CSS盒子模型
2023/7/16约 2038 字大约 7 分钟...
CSS长度单位
px：像素em：相对元素font-size的倍数rem：相对根字体大小（html标签）%：相对父元素计算
注意：CSS中设置长度，必须加单位，否则样式无效！
元素的显示模式
块元素（block）
又称：块级元素
特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
行内元素（inline）
又称：内联元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过CSS设置宽高
行内块元素（inline-block）
又称：内联块元素
特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
注意：元素早期只分为：行内元素、块级元素，区分条件也只有一条：是否独占一行，如果按照这种分类方式，行内块元素应该算作行内元素
总结各元素的显示模式
块元素（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>
盒子模型的组成
CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）：盒子与外界的距离
- border（边框）：盒子的边框
- padding（内边距）：紧贴内容的补白区域
- content（内容）：元素中的文本或后代元素都是它的内容
图示如下：
盒子的大小= content + 左右padding + 左右border
注意：外边距margin不会影响盒子的大小，但会影响盒子的位置。
关于默认宽度
所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度
总宽度 = 父的content - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin = 自身的左右border - 自身的左右padding盒子内边距（padding）
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置1～4个值 |
padding复合属性的使用规则：
padding:10px;四个方向内边距都是10pxpadding:10px 20px;（上下、左右）padding: 10px 20px 30px;（上、左右、下）padding: 10px 20px 30px 40px;（上、右、下、左）
- 注意点：
padding的值不能为负数- 行内元素的左右内边距是没问题的，上下内边距不能完美的设置
- 块级元素、行内块元素，四个方向内边距都可以完美设置
盒子边框（border）
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框线风格（复合了四个方向的边框风格） | none：属性值solid：实线dashed：虚线dotted：点线double：双实线...... |
| border-width | 边框线宽度（复合了四个方向的边框宽度） | 长度，默认3px |
| border-color | 边框线颜色（复合了四个方向的边框颜色） | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求 |
盒子外边距-margin
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | css中的长度值 |
| margin-right | 右外边距 | css中的长度值 |
| margin-top | 上外边距 | css中的长度值 |
| margin-bottom | 下外边距 | css中的长度值 |
| margin | 复合属性，可以写1～4个值，规律同padding（顺时针） | css中的长度值 |
margin注意事项
- 子元素的
margin，是参考父元素的content计算的。 - 上
margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置 - 块级元素、行内块元素，均可以完美地设置四个方向的
margin;但行内元素，左右margin可以完美设置，上下margin设置无效 margin的值也可以是auto，如果给一个块级元素左右都设置margin为auto，该块级元素会在父元素中水平居中margin的值可以是负值
margin塌陷问题
margin塌陷：第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
解决方案：
- 给父元素设置不为0的
padding - 给父元素设置宽度不为0的
border - 给父元素设置css样式
overflow:hidden
margin合并问题
margin合并：上面兄弟的下外边距和下面兄弟的上外边距会合并，取一个最大值，而不是相加
处理内容溢出
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible:显示（默认值）hidden:隐藏scroll:显示滚动条，不论内容是否溢出auto:自动显示滚动条，内容不溢出就不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | 同上 |
| overflow-y | 垂直方向溢出内容的处理方式 | 同上 |
注意：
overflow-x、overflow-y不能一个是hidden，一个是visible，是实验属性，不建议使用overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症
隐藏元素的方式
visibility属性默认值是show，如果设置为hidden，元素会隐藏（隐藏后占位）- 设置
display:none，就可以让元素隐藏（隐藏后不占位）
样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）
会继承的css属性
字体属性、文本属性（除了vertical-align）、文字颜色等不会继承的css属性
边框、背景、内边距、外边距、宽高、溢出方式等- 一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
默认样式
元素的默认样式优先级大于继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素
布局小技巧
行内元素、行内块元素，可以被父元素当作文本处理。即：可以像处理文本对齐一样，去处理行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。
元素之间的空白问题
产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 去掉换行和空格（不推荐）
- 给父元素设置
font-size:0，再给需要显示文字的元素单独设置字体大小（推荐）。
行内块的幽灵空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
- 给行内块设置
vertical，值不为baseline即可，设置为middle、bottom、top均可。 - 若元素中只有一张图片，设置图片为
display:block。 - 给父元素设置
font-size:0。