🎁 CSS 盒子模型

# 盒子模型

文档流 Normalflow：HTML 网页所创建的元素默认在文档流中排序；

元素的两个状态：在文档流中 / 不在文档流中；
通过 CSS 为每一层网页结构设置样式，通常用户只能看到最顶层。

块元素 Block Element：

块元素会在页面中独占一行；
默认宽度是父元素的全部（会把父元素撑满）；
默认高度是被内容撑开（子元素）；

行内元素 Inline Element：

行内元素不会独占页面的一行，只占自身的大小；
行内元素在页面中左向右水平排列；
如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列；
行内元素的默认宽度和高度都是被内容撑开；

盒子模型 Box Model：

CSS 盒子模型将页面的所有元素都设置为一个矩形的盒子，具备以下的部分：内容区 Content、内边距 Padding、边框 Border、外边距 Margin；

# 内容区 Content

是主要信息内容，元素中的所有子元素和文本内容都在内容区；

设置排列内容区的大小：

width 设置内容区的宽度
height 设置内容区的高度

# 边框 Border

属于盒子的边缘，边框里属于盒子内部，边框外都是盒子外部；

⚠️注意：边框的大小会影响整个盒子的大小；

设置边框的属性：

border-width 边框的宽度：默认 3px

- border-top-width 上边框的宽度
- border-right-width 右边框的宽度
- border-bottom-width 下边框的宽度
- border-left-width 左边框的宽度
border-color 边框的颜色：默认使用 color 的颜色值
- border-top-color 上边框的颜色
- border-right-color 右边框的颜色
- border-bottom-color 下边框的颜色
- border-left-color 左边框的颜色
border-style 边框的样式：没有默认值，必须指定；

solid 实线

dotted 点状虚线

dashed 虚线

double 双线
- border-top-style 上边框的样式
- border-right-style 右边框的样式
- border-bottom-style 下边框的样式
- border-left-style 左边框的样式

border 简写属性，同时设置边框的所有相关属性，没有顺序要求：

一般顺序是 宽度颜色样式 ；

# 内边距 Padding

也叫填充，是内容区和边框的空间：

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
padding 同时指定四个方向的内边距

🌰 例子：

当内外的 div 盒子宽度和高度一样时，由于 .outer 设置了 padding 属性，其盒子大小被撑大了；

盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算；

# 外边距 Margin

叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是 CSS 布局的一个重要手段；

⚠️注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间；

margin-top 上外边距
- 设置正值，元素自身向下移动
- 设置负值，元素自身向上移动
margin-right 右外边距
- 设置正值，其右边的元素向右移动
- 设置负值，其右边的元素向左移动
- 对于块元素，设置 margin-right 不会产生任何效果
margin-bottom 下外边距
- 设置正值，其下边的元素向下移动
- 设置负值，其下边的元素向上移动
- 对于块元素，会有垂直方向上的边距重叠问题
margin-left 左外边距
- 设置正值，元素自身向右移动
- 设置负值，元素自身向左移动

🌰 例子：

按照顺时针的方向和盒子对称，通过同时设置指定对应方向的宽度、颜色或样式：

四个值： 上右下左
三个值： 上左右下
两个值： 上下左右
一个值： 上下左右

# 水平方向布局

元素在水平方向的位置通过左右内边距、左右边框、左右外边距、宽度决定；

一个元素在其父元素中，水平布局必须要满足以下的等式：

左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距 = 父元素的宽度（ margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度 ）

以上等式必须满足，当上述等式相加结果不成立，则有过度约束自动调整：

如果这七个值中没有 auto 的情况，则浏览器会自动调整 margin-right 值以使等式满足

100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==>

100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
如果这七个值中有 auto 的情况，则会自动调整 auto 值以使等式成立
左右外边距和宽度可以设置为 auto ： width 、 margin-left 、 margin-right ：
- 如果某个值为 auto ，则会自动调整 auto 的那个值以使等式成立：
  
  200 + 0 + 0 + auto + 0 + 0 + 200 = 600 ==>
  
  200 + 0 + 0 + 400 + 0 + 0 + 200 = 800 ；
  
  auto + 0 + 0 + 200 + 0 + 0 + 200 = 600 ==>
  
  400 + 0 + 0 + 200 + 0 + 0 + 200 = 800 ；
  
  200 + 0 + 0 + 200 + 0 + 0 + auto = 600 ==>
  
  200 + 0 + 0 + 200 + 0 + 0 + 400 = 800 ；
- 如果宽度为 auto ，则宽度会调整到最大，其他 auto 的外边距会自动设置为 0 ：
  
  auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==>
  
  0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
  
  200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==>
  
  200 + 0 + 0 + 600 + 0 + 0 + 0 = 800
  
  auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==>
  
  0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
- 如果外边距都为 auto ，则 auto 的外边距会自动均分以使等式成立
  
  常用于水平居中： margin: 0 auto; /* 设置左右外边距为 auto */
  
  auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==>
  
  300 + 0 + 0 + 200 + 0 + 0 + 300 = 800

🌰 例子 / 过度约束实现水平居中：

# 元素溢出

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出；

使用 overflow / overflow-x / overflow-y 属性来设置父元素如何处理溢出的子元素；
可选值： visible / hidden / scroll / auto ：
- visible 溢出内容会在父元素外部位置显示，默认值；
- hidden 溢出内容会被裁剪，不会显示；
- scroll 生成两个滚动条，通过滚动条来查看完整的内容；
- auto 根据需要生成滚动条；

🌰 例子：

# 边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象；

对于兄弟元素：兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）；兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理；

特殊情况：

如果相邻的外边距一正一负，则取两者的和

如果相邻的外边距都是负值，则取两者中绝对值较大的

对于父子元素：父子元素间相邻外边距，子元素会传递给父元素（上外边距）;

父子外边距的折叠会影响到页面的布局，必须要进行处理：

转换思路，将对子元素的调整转为对父元素的调整：

子元素中的 margin-top 转化为父元素的 padding-top ，但是调整 padding 会影响元素的大小，所以需要手动计算调整父元素的高度 height ；
仍然保留子元素的 margin-top 属性，但是给父元素加一个上边框 border-top ：

但是因为增加了边框的宽度，所以需要手动调整父元素的高度 height ；同时子元素会因为仍相对于父元素调整的 margin-top 而下移，所以也需要调整 margin-top

脱离文档流问题

上述父子元素的边距折叠问题中，父元素使用了 border 属性调整，就让子元素的外边距不传递给父元素了，这是导致 `

🌰 例子：

# 行内元素

行内元素不支持设定宽度 weight 、高度 height ；
行内元素可以设置 border ，垂直方向的 border 不会影响页面的布局；
行内元素可以设置 padding ，垂直方向 padding 不会影响页面的布局；
行内元素可以设置 margin ，垂直方向的 margin 不会影响页面的布局；

将行内元素修改为可以对页面布局产生影响，使用 dispaly 属性修改元素显示的类型：

inline 将元素设置为行内元素；
block 将元素设置为块元素；
inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行；
table 将元素设置为一个表格；

none 元素不在页面中显示，但是不占位；

visibility 用来设置元素的显示状态：
- visible 默认值，元素在页面中正常显示；
- hidden 元素在页面中隐藏不显示，但是依然占据页面的位置；

🌰 例子：

# 浏览器的默认样式

通常情况，浏览器都会为元素设置一些默认样式；

~~利用 CSS 重设：先定义好一些 CSS 样式，来让所有浏览器都按照同样的规则解释 CSS，这样就能避免发生这种问题：~~

~~Reset 样式：引入外部样式表~~

<link rel="stylesheet" href="assets/reset.css">

~~Normalize 样式：将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的：~~
```
<link rel="stylesheet" href="assets/normalize.css">
```
1
~~更多的 CSS 重设方法：目前比较全的 CSS 重设 (reset) 方法总结 - 寒意 - 博客园 (cnblogs.com) (opens new window)~~

🌟 关于 CSS Reset 那些事（一）之历史演变与 Normalize.css - SegmentFault 思否 (opens new window)

🌟 Normalize-ZH.css Alsiso/normalize-zh: Normalize.css 中文文档与源码解读 (github.com) (opens new window)

🌟 normalize.css 入门和下载 - SegmentFault 思否 (opens new window)

🌟 在 codepen 中使用 Normalize 或者 Reset CSS 预设：进入 ⚙️ Pen Settings > CSS