五、CSS盒子模型

1.CSS长度单位

1. px：像素。
2. em：相对元素font-size的倍数。
3. rem：相对根字体大小，html标签就是根。
4. %：相对父元素计算。

注意：CSS中设置长度必须加单位，否则样式无效！

2.元素的显示模式

• 块元素（block）

  又称：块级元素

  特点：

  1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
  2. 默认宽度：撑满父元素。
  3. 默认高度：由内容撑开。
  4. 可以通过css设置宽高。

• 行内元素（inline）

  又称：内联元素

  特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 无法通过css设置宽高。

• 行内块元素（inline-block）

  又称：内联块元素

  特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 可以通过css设置宽高。

注意：元素早期只分为：行内元素、块级元素，区分条件也只是一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算作行内元素。

3.总结各元素的显示模式

• 块元素（block）

  1. 主体结构标签：html、body
  2. 排版标签：h1~h6、hr、p、pre、div
  3. 列表标签：ul、ol、li、dl、dt、dd
  4. 表格相关标签：table、tbody、thead、tfoot、tr、caption
  5. form与option

• 行内元素（inline）

  1. 文本标签：br、em、strong、sup、sub、del、ins
  2. a与label

• 行内块元素（inline-block）

  1. 图片：img
  2. 单元格：td、th
  3. 表单控件：input、textarea、select、button
  4. 框架标签：iframe

4.修改元素显示模式

通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：

值	描述
none	元素会被隐藏。
block	元素将作为块级元素显示。
inline	元素将作为内联元素显示。
inline-block	元素将作为行内块元素显示。

5.盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

1. margin（外边框）：盒子与外界的距离。
2. border（边框）：盒子的边框。
3. padding（内边距）：紧贴内容的补白区域。
4. content（内容）：元素中的文本或后代元素都是它的内容。

图示如下：

盒子的大小=content + 左右padding + border。

注意：外边框margin不会影响盒子的大小，但会影响盒子的位置。

6.盒子内容区（content）

值	描述	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

注意：

max-width、min-width一般不与width一起使用。

max-height、min-height一般不与height一起使用。

7.关于默认宽度

所谓的默认宽度，就是不设置width属性时,元素所呈现出来的宽度。

总宽度=父的content-自身的左右margin。

内容区的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding。

8.盒子内边距（padding）

css属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置1~4个值

padding复合属性的使用规则：

1. padding：10px；四个方向内边距都是10px。
2. padding：10px 20px；上10px，左右20px。（上下、左右）
3. padding：10px 20px 30px；上10px，左右20px，下30px。（上、左右、下）
4. padding：10px；上10px，右20px，下30px，左40px。（上、右、下、左）

注意：

1. padding的值不能为负数。
2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

9.盒子边框（border）

css属性名	功能	属性值
border-style	边框线风格 复合了四个方向的边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线 …
border-width	边框线宽度 复合了四个方向的边框宽度	长度，默认3px
border-color	边框线颜色 复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求。
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color	分别设置各个方向的边框	同上

边框相关属性共20个。

border-style、border-width、border-color其实也是复合属性。

10.盒子外边距（margin）

css属性名	功能	属性值
margin-left	左外边距	CSS中的长度值
margin-right	右外边距	CSS中的长度值
margin-top	上外边距	CSS中的长度值
margin-bottom	下外边距	CSS中的长度值
margin	复合属性，可以写1~4个值，规律同padding（顺时针）	CSS中的长度值

10.1 margin注意事项

1. 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
3. 块级元素、行内块元素，均可以完美地设置四个方向得margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
5. margin的值可以是负值。

10.2 margin塌陷问题

什么是margin塌陷？

​ 第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

如何解决margin塌陷？

• 方案一：给父元素设置不为0的padding。
• 方案二：给父元素设置宽度不为0的border。
• 方案三：给父元素设置css样式overflow:hidden。

10.3 margin合并问题

什么是margin合并？

​ 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决margin塌陷？

​ 无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

11.处理内容溢出

css属性名	功能	属性值
overflow	溢出内容的处理方式	visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同overflow
overflow-y	垂直方向溢出内容的处理方式	同overflow

注意：

1. overflow-x、overflow-y 不能一个是hidden，一个是visible，是实验性属性，不建议使用。
2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

12.隐藏元素的方式

方式一：visibility属性

visibility属性默认值是show，如果设置为hidden，元素会隐藏。

元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式二：display属性

设置display：none，就可以让元素隐藏。

彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

13.样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

会继承的css属性

字体属性、文本属性（除了vertical-align）、文本颜色等。

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

14.默认样式

元素一般都有默认得样式，例如：

1. a元素：下划线、字体颜色、鼠标小手。
2. h1~h6元素：文字加粗、文字大小、上下外边距。
3. p元素：上下外边距。
4. ul、ol元素：左内边距
5. body元素：8px外边距（4个方向）

​ …

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。

15.布局小技巧

1. 行内元素、行内块元素，可以被父元素当作文本处理。

   即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。

   例如：text-align、line-height、text-indent等。

2. 如何让子元素，在父亲中水平居中：

   • 若子元素为块元素，给父元素加上：margin:0 auto;。
   • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center;。

3. 如何让子元素，在父亲中垂直居中：

   • 若子元素为块元素，给父元素加上：margin-top;，值为：（父元素content➖子元素盒子总高）➗2。

   • 若子元素为行内元素、行内块元素：

     ​ 让父元素的height=line-height，每个子元素都加上：vertical-align:middle;

     ​ 补充：若想绝对垂直居中，父元素font-size设置为0。

16.元素之间的空白问题

产生的原因：

​ 行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）。

17.行内块的幽灵空白问题

产生的原因：

​ 行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案：

1. 方案一：给行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可。
2. 方案二：若父元素中只有一张图片，设置图片为display：block。
3. 方案三：给父元素设置font-size：0。如果该行内块内部还有文本，则需要单独设置font-size。