前端 HTML/CSS （六）

￡神魔★判官ぃ 2023-01-01 08:52 123阅读 0赞

### 目录 ###

*   *   *   *  元素框
             *  整体结构
             *  宽度
             *  高度
             *  宽度、高度的最大值和最小值
             *  内边距
             *  单边内边距
             *  行内元素的内边距
             *  边框
             *  边框样式
             *  边框宽度
             *  边框颜色
             *  简写属性
             *  整个边框
             *  行内元素的边框
             *  外边距
             *  外边距设置
             *  外边距折叠
             *  单边外边距
             *  行内元素的外边距
             *  横向格式化
             *  纵向格式化
             *  调整宽度和高度的计算方式
             *  背景
             *  背景色
             *  背景图

**问题：**

1.  做功能，需求。
2.  课上讲的知识，你得有体系。
    
    你在看的时候。
3.  别钻牛角尖。

#### 元素框 ####

文档中的每个标签都会生成一个矩形框。这个框描述标签在文档布局中所占的空间。

默认的时候渲染出来的元素不会出现重叠，但是如果元素是手动定位的可能会出现重叠。

> 虽然CSS可以做成三角形、圆形等，其实所有CSS最初生成的框都是矩形框。

#### 整体结构 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

*  内容区域：用来存储内容。
 *  宽度：用来定义内容区的宽度。
 *  高度：用来定义内容区的高度。
 *  内边距：用来定义内容区域和边框的距离。
 *  边框：是围绕内容区域和内边距的一条或多条线。
 *  外边距：定义盒子和盒子之间的距离。

#### 宽度 ####

内容区域左边界到右边界的距离。

格式：`width`，可以用在块状元素、行内块状元素。

*  auto，默认值。没有特定的宽度值。
    
    块状元素，宽度默认是父元素的宽度。
    
    行内元素，宽度默认是内容的宽度。
 *  px
 *  em，按到当前字体的大小来进行计算。
 *  %，使用百分比来设置宽度，相对于父元素的宽度来设置。

#### 高度 ####

内容区域的上边界到下边界的距离。

格式：`height:value`，可以用在块状元素、行内块状元素。

*  auto，默认值。
    
    没有内容高度为0。
    
    块状元素，有内容看的是行高。
    
    行内元素，有内容。即使设置了行高也不会影响高度（但是会影响文字所在的垂直距离）

#### 宽度、高度的最大值和最小值 ####

*  元素内容区域可以使用min-width和min-height定义最小值。取值范围和width、height取值相同。
 *  元素的内容区域可以使用max-width和max-height定义最大值。

#### 内边距 ####

适用于所有的元素，元素默认没有内边距。

`padding`

*  px像素
 *  em按照当前字体的大小来计算。
 *  `%`，使用百分比设置内边距，水平和垂直都相对于父元素内容区域的宽度计算。

总共四个值，上、右、下、左，按照顺时针进行计算。

格式2:`padding: top/bottom left/right`

格式3：`padding:top right/left bottom`

格式4：`padding:top right bottom left`

#### 单边内边距 ####

*  padding-top
 *  padding-right
 *  padding-bottom
 *  padding-left

#### 行内元素的内边距 ####

行内元素上设置左内边距和右内边距可以正常使用，但是上内边距和下内边距对行高没有影响。

行内块状元素可以设置内边距并且有正常的效果。

#### 边框 ####

边框三要素：

*  宽度，默认为2px或3px。
 *  样式，默认为none，没有样式。
 *  颜色，默认的边框的颜色，是元素自身的文本的颜色。

#### 边框样式 ####

`border-style`

*  none，没有样式为none时不仅没有样式也没有宽度。
 *  `solid`，实线。
 *  格式：`border-style:top/bottom left/right`
 *  格式：`border-style:top left/right bottom`
 *  格式：`border-style:top right bottom left`
 *  `border-top-style`
 *  `border-right-style`
 *  `border-bottom-style`
 *  `boder-left-style`

#### 边框宽度 ####

`border-width`

*  px
 *  em
 *  边宽宽度设置为 `百分比%`无效。

`border-width:top/bottom left/right`

`border-width:top right/left bottom`

`border-width:top right bottom left`

*  `border-top-width`
 *  `border-right-width`
 *  `border-bottom-width`
 *  `boder-left-width`

#### 边框颜色 ####

`border-color`

`border-color:top/bottom left/right`

`border-color:top right/left bottom`

`border-color:top right bottom left`

*  `border-top-color`
 *  `border-right-color`
 *  `border-bottom-color`
 *  `boder-left-color`

相等：`border-color: rgba(0, 0, 0, 0) = border-color: transparent;`

#### 简写属性 ####

`border-top：width style color`

`border-right`

`border-bottom`

`border-left`

**注意**：

> 简写属性先看有几个数值，如果有1个数值属性，可以打乱顺序；如果有两个数值或以上，就不能打乱顺序，不然会影响显示或无效果。

#### 整个边框 ####

`border:width style color`

缺点：定义的样式、宽度、颜色同时应用于4个边。

做一个三角形。

三角形一般用于做气泡对话框，如微信对话框。

#### 行内元素的边框 ####

行内元素的边框对于上下边框对行高没有影响，左右边框会将周围的文本推开。

#### 外边距 ####

CSS中可以设置任何元素的外边距。

外边距默认是0。

有些标签默认的时候都会自带一个margin。

#### 外边距设置 ####

`margin`

*  px
 *  em
 *  %，百分比相对于父元素的内容的宽度进行计算（上、右、下、左）

`margin:top/bottom left/right`

`margin:top left/right bottom`

`margin:top right bottom left`

注意：元素的外边距可以设置为负值，这有可能使元素框从父元素中跑出来。有可能与其他元素重叠。

body默认的时候是有8px的外边距。

#### 外边距折叠 ####

外边距折叠只有垂直外边距会折叠，左右外边距不会。

*  情况1：盒子的底部margin和它下一个兄弟的顶部margin
    
    折叠的时候相邻的两个上下外边距会折叠为其中最大的那个外边距。
    
    解决：直接设置上边或下边的外边距或将第一个盒子inline-block;
 *  情况2：盒子的顶部margin和第一个普通子元素的顶部margin。
    
    外边距产生折叠的原因：margin之间直接接触了，没有阻隔。(我就是想让外边距和外边距之间不接触。)
    
    父元素直接设置边框或内边距，隔开就好了。

#### 单边外边距 ####

*  `margin-top`，上外边距
 *  `margin-right`,右外边距
 *  `margin-bottom`，下外边距
 *  `margin-left`，左外边距

#### 行内元素的外边距 ####

*  行内元素上设置的上、下外边距对行高没有影响。
 *  行内元素上设置的左外边距和右外边距可以正常使用。
 *  行内块状元素的上、下、左、右 都可以正常使用。

**注意：**

> 行边距合并在块状元素中发生。

#### 横向格式化 ####

容纳块：离的最近的块级元素。

*  默认情况下，块级框各个组成部分的横向尺寸始终等于容纳块的宽度。
    
    `容纳块的宽度=子元素的margin-left+子元素的border-left+子元素的padding-left+子元素的width+子元素的padding-right+子元素的border-right+子元素的margin-right`。
 *  横向格式化
    
    七个属性只有width、margin-left、margin-right可以设置为auto。其他的属性值只能设置为具体值或者使用默认值（默认值为零）
    
     *  情况一：width、margin-left、margin-right其中两个设置为具体的值，一个设置为auto。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-left:10px; margin-right:auto;/*margin-right的值现在为188*/ border:1px solid blue; } </style>
    </head>
    
    <body>
        
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]  
width、margin-left、margin-right其中margin-left、margin-right都设置为具体的值，width设置为auto。这个时候也需要满足上面所说的公式。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:auto; height: 100px; margin-left:10px; margin-right:10px; border:1px solid blue; } </style>
    </head>
    
    <body>
        
        <div id="f">
          <div id="z"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]

*  情况二：width、margin-left、margin-right，三个属性都设置具体的值（这种情况叫过度约束）margin-right看不到效果。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-left:10px; margin-right:10px; border:1px solid blue; } </style>
    </head>
    
    <body>
      
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]  
为什么写上margin-right不好使的问题，因为没有写margin-left时默认值为0，这个时候也是过度约束，所以还是以margin-left为主，所以margin-right不好使。解决这个问题，将margin-left: auto就可以了。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-right:10px; margin-left:auto; border:1px solid blue; } </style>
    </head>
    
    <body>
    
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]

*  情况三：width、margin-left、margin-right，其中两个设置为auto。
    
    1.  如果margin-left和margin-right设置为auto，那么两侧相等。（水平居中块状元素）

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-right:auto; margin-left:auto; border:1px solid blue; } </style>
    </head>
    
    <body>
    
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]  
某一边和width设置为auto。外边距为auto的那个值将会等于0，width会被设置为填满容纳块所需的值。

<!DOCTYPE html>
    <html>
        <head>
           <meta charset="utf-8" />
     	<style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:auto; height: 100px; margin-right:10px; margin-left:auto; border:1px solid blue; } </style>
        </head>
         <body>
             <div id="f">
           		<div id="z"></div>
             </div>
         </body>
    </html>

显示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]  
情况四：三个属性都为auto。两边为零，width要多宽有多宽。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:auto; height: 100px; margin-right:auto; margin-left:auto; border:1px solid blue; } </style>
    </head>
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]

#### 纵向格式化 ####

`容纳块的宽度=margin-top + border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom`

*  情况一：height、margin-top、margin-bottom，其中两个值设置为具体值，一个设置为auto。块级框的margrin-top或margin-bottom设置为auto时，二者自动计算为0。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-top:auto; margin-bottom:auto; border:1px solid blue; } </style>
    </head>
    
    <body>
    
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]  
height、margin-top、margin-bottom其中margin-top和margin-bottom设置为具体值，height设置为auto，这个情况下高度不会被自动拉开。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: auto; margin-top:10px; margin-bottom:10px; border:1px solid blue; } </style>
    </head>
    
    <body>
    
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]

*  情况二：height、margin-top、margin-bottom三个都设置为auto之外的值。这个时候设置的是多少就是多少。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> body{ margin:0; } #f{ width:300px; height: 300px; border:1px solid green; } #z{ width:100px; height: 100px; margin-top:10px; margin-bottom:10px; border:1px solid blue; } </style>
    </head>
    
    <body>
    
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 10]

#### 调整宽度和高度的计算方式 ####

默认情况下，块级框的宽度（width）是不包括padding，我们可以使用box-sizing来进行调整。

box-sizing：适用于所有可以设定width和height的元素。

*  `content-box`:默认值，内容区域的宽度等于width，高度等于height，内边距、边框都在这个尺寸上面增加。（w3c盒子模型的计算方式。）
 *  `border-box`：宽度、高度等于内容区域+内边距+边框，相应的内容区域将会被缩小（IE盒子模型这种计算方式也叫怪异盒子模型）。

#### 背景 ####

前景色：文本、边框，可以通过color和border-color来进行设置。

背景色：前景后面的颜色。元素背景将会延伸到元素边框的外边界终止。

#### 背景色 ####

`background-color`

图片可以有背景色。

#### 背景图 ####

背景图：`background-image`

*  `url(图片地址)`

背景颜色和背景图可以同时使用，但是背景图将会盖在背景颜色上面。

背景图和盒子大小没关系。

> 背景图片（background-image）和图片（img）的区别：
> 
>  *  背景图片是一个CSS属性你能在上面写东西。
>  *  图片是网页中的元素，你插入的img是没有办法在上面写东西的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/723e9800ee8c4141b6dc365496b14e33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: /images/20221120/31d50f7fdea448e1841cfae0cf7b0639.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: /images/20221120/c93e297103ad408e84bed617640b6b11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: /images/20221120/0b16611694a74d3182796be00c848c6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]: /images/20221120/7941c32e43034638b50f1f5b128322c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]: /images/20221120/0a92c93e157a4237a2daa1670e47f959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]: /images/20221120/ae8c9a6e46fe43b4ab7062e8df286eb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]: /images/20221120/b1512cadf3ea477ea9f864e1f7f8c9de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]: /images/20221120/5ff8b2da84b54d4090f77278767562ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]: /images/20221120/9ff058b6b4644483ba1365d23963ce41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 10]: /images/20221120/7d477912df66414698c34579ef1584be.png