CSS盒子模型
-
-
- 五、CSS盒子模型
-
- 1.CSS长度单位
- 2.元素的显示模式
- 3.总结各元素的显示模式
- 4.修改元素显示模式
- 5.盒子模型的组成
- 6.盒子内容区（content）
- 7.关于默认宽度
- 8.盒子内边距（padding）
- 9.盒子边框（border）
- 10.盒子外边距（margin）
-
- [10.1 margin注意事项](#10.1 margin注意事项)
- [10.2 margin塌陷问题](#10.2 margin塌陷问题)
- [10.3 margin合并问题](#10.3 margin合并问题)
- 11.处理内容溢出
- 12.隐藏元素的方式
- 13.样式的继承
- 14.默认样式
- 15.布局小技巧
- 16.元素之间的空白问题
- 17.行内块的幽灵空白问题
-
五、CSS盒子模型
1.CSS长度单位
- px：像素。
- em：相对元素font-size的倍数。
- rem：相对根字体大小，html标签就是根。
- %：相对父元素计算。
注意：CSS中设置长度必须加单位，否则样式无效！
2.元素的显示模式
-
块元素（block）
又称：块级元素
特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素。
- 默认高度：由内容撑开。
- 可以通过css设置宽高。
-
行内元素（inline）
又称：内联元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 无法通过css设置宽高。
-
行内块元素（inline-block）
又称：内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过css设置宽高。
注意：元素早期只分为：行内元素 、块级元素，区分条件也只是一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。
3.总结各元素的显示模式
-
块元素（block）
- 主体结构标签：html、body
- 排版标签：h1~h6、hr、p、pre、div
- 列表标签：ul、ol、li、dl、dt、dd
- 表格相关标签：table、tbody、thead、tfoot、tr、caption
- form与option
-
行内元素（inline）
- 文本标签：br、em、strong、sup、sub、del、ins
- a与label
-
行内块元素（inline-block）
- 图片：img
- 单元格：td、th
- 表单控件：input、textarea、select、button
- 框架标签：iframe
4.修改元素显示模式
通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
|---|---|
| none | 元素会被隐藏。 |
| block | 元素将作为块级元素显示。 |
| inline | 元素将作为内联元素显示。 |
| inline-block | 元素将作为行内块元素显示。 |
5.盒子模型的组成
CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边框）：盒子与外界的距离。
- border（边框）：盒子的边框。
- padding（内边距）：紧贴内容的补白区域。
- 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复合属性的使用规则：
- padding：10px；四个方向内边距都是10px。
- padding：10px 20px；上10px，左右20px。（上下、左右）
- padding：10px 20px 30px；上10px，左右20px，下30px。（上、左右、下）
- padding：10px；上10px，右20px，下30px，左40px。（上、右、下、左）
注意：
- padding的值不能为负数。
- 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
- 块级元素 、行内块元素 ，四个方向内边距都可以完美设置。
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注意事项
- 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
- 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
- 块级元素、行内块元素，均可以完美地设置四个方向得margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
- margin的值也可以是auto，如果给一个块级元素 设置左右margin都为auto，该块级元素会在父元素中水平居中。
- 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 |
注意：
- overflow-x、overflow-y 不能一个是hidden，一个是visible，是实验性属性，不建议使用。
- overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。
12.隐藏元素的方式
方式一：visibility属性
visibility属性默认值是show，如果设置为hidden，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二：display属性
设置display：none，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
13.样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的css属性
字体属性、文本属性（除了vertical-align）、文本颜色等。
不会继承的css属性
边框、背景、内边距、外边距、宽高、溢出方式等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
14.默认样式
元素一般都有默认得样式，例如：
- a元素：下划线、字体颜色、鼠标小手。
- h1~h6元素：文字加粗、文字大小、上下外边距。
- p元素：上下外边距。
- ul、ol元素：左内边距
- body元素：8px外边距（4个方向）
...
优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。
15.布局小技巧
-
行内元素、行内块元素，可以被父元素当作文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。
-
如何让子元素，在父亲中水平居中：
- 若子元素为块元素，给父元素加上：margin:0 auto;。
- 若子元素为行内元素、行内块元素，给父元素加上：text-align:center;。
-
如何让子元素，在父亲中垂直居中：
-
若子元素为块元素，给父元素加上：margin-top;，值为：（父元素content➖子元素盒子总高）➗2。
-
若子元素为行内元素、行内块元素：
让父元素的height=line-height，每个子元素都加上：vertical-align:middle;
补充：若想绝对垂直居中，父元素font-size设置为0。
-
16.元素之间的空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一：去掉换行和空格（不推荐）。
- 方案二 ：给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小（推荐）。
17.行内块的幽灵空白问题
产生的原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
- 方案一 ：给行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可。
- 方案二 ：若父元素中只有一张图片，设置图片为display：block。
- 方案三 ：给父元素设置font-size：0。如果该行内块内部还有文本，则需要单独设置font-size。