4.盒子模型

盒子模型（box model）
- 网页的布局指就是将元素摆放到网页的不同的位置
- 布局就得先确定元素的大小
- 在网页中每一个元素都是一个矩形，或者可以直接将其想象为是一个盒子，
每一个盒子，都由以下几个部分组成：
- 内容区（content）
- 内容区在元素最内部，用来容纳子元素
- 内容区的大小由width和height设置
- 内边距（padding）
- 内容区和边框之间的距离称为内边距
- 边框（border）
- 边框是盒子边界，离开边框就属于盒子的外部了
- 边框会影响到盒子可见框的大小
- 外边距（margin）
- 盒子与盒子之间的距离称为外边距
- 外边距不会影响盒子的大小，但是它会影响盒子的位置（实际大小）

border-width 用来指定边框的宽度
10px 20px 30px 40px 上 右 下 左
10px 20px 30px 上 左右 下
10px 20px 上下 左右
10px 上下左右
除了border-width以外，
也可以通过border-xxx-width来分别设置某个边框的宽度
xxx可以是top right bottom left
边框的样式：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
border 简写属性，可以同时设置边框的三个样式
border-xxx 简写属性
border-top
border-bottom
border-left
border-right

border: solid red 10px;

内容区和边框之间的距离称为内边距
共有四个方向的内边距：
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
默认情况下，背景颜色会延伸到内边距上，
所以我们无法直观的看到内边距
内边距也会影响到盒子可见框的大小
一个元素的可见框的大小由：
内容区、内边距和边框共同决定
padding简写属性，可以同时设置四个方向的内边距
10px 20px 30px 40px 上 右 下 左
10px 20px 30px 上 左右 下
10px 20px 上下 左右
10px 上下左右

padding: 10px;

盒子的可见框指可见的部分，大小由内容区、内边距、边框共同决定
box-sizing 用来指定盒子可见框的计算方式
可选值：
content-box 默认值，width和height用来设置内容区的大小
border-box 设置该值后，width和height用来设置盒子可见框的大小(整个盒子大小)

外边距同样有四个方向
margin-top 上外边距，值越大元素越靠下
margin-bottom
margin-left 左外边距，值越大元素越靠右
margin-right
- 由于我们的浏览器默认是按照自左向右，自上向下的顺序来排列元素的，
所以当我们设置上和左外边距时，是改变元素自身的位置
但是设置下和右时，会改变其他元素的位置

margin: 10px;

外边距的折叠
- 垂直方向的相邻外边距会发生外边距折叠的现象
兄弟元素间外边距会取较大值（这样设计是为了避免两个元素之间的距离）
父子元素间子元素外边距会传递给父元素，这样会导致布局出问题，需要避免该问题

可以将margin的值设置为auto，设置auto后，元素的外边距由浏览器自动计算
当我们将margin-left或margin-right中的一个设置为auto时，则浏览器会自动使其尽量的大
如果将margin-left和margin-right同时设置为auto，则浏览器会使元素左右的外边距相同，
也就是元素会在其父元素中水平居中
通过将一个块元素的左右外边距设置为auto，以使其在父元素中水平居中
默认情况下，垂直外边距设置为auto时，浏览器会自动取0为外边距

内容区
width height
- 行内元素的大小被内容撑开，
无法通过width和height来设置行内元素宽度高度
内边距
padding
- 行内元素可以设置内边距，但是垂直方向的内边距不会影响布局
边框
border
- 行内元素可以设置边框，但是垂直方向的边框不会影响页面的布局
外边距
margin
- 行内元素可以设置水平方向的外边距

当子元素大小超过父元素内容区时，子元素会从父元素中溢出（overflow）
在css通过overflow这个样式，来处理溢出内容
overflow
- 设置元素如何处理溢出内容
- 可选值：
visible，默认值 溢出内容直接在元素以外的位置显示
hidden 隐藏溢出的内容
scroll 生成双方向滚动条，通过滚动条来查看完整内容
auto 根据需要生成滚动

display
- 用来设置元素的类型
- 可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块元素
- 行内块兼具行内元素和块元素的特点
- 不独占一行，又可以设置宽高
- 注意：
行内块的特点和文本很像，所以布局时尽量少用
none 隐藏元素

visibility
- 用来设置一个元素的可见性
- 可选值：
visible，默认值 元素可见
hidden 元素是隐藏的在页面中不可见，但是依然占据页面的位置

为了开发起来更加便利，编写CSS样式前，我们通常都需要对默认样式进行重置

方式一：
*{
margin: 0;
padding: 0;
}

方式二：
- 使用reset.css
https://meyerweb.com/eric/tools/css/reset/reset.css
- 直接清除掉默认样式

方式三：
- 使用normalize.css
https://necolas.github.io/normalize.css/8.0.1/normalize.css
- 没有直接清除掉所有样式，而是将默认样式统一

文档流（normal flow） 正常布局流
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
- 文档流是网页中的位置，我们所创建的元素默认都存在于文档流中
- 文档流中的元素，必须要遵循文档流的规则在页面中排列
- 块元素
- 块元素在文档流中自上向下垂直排列
- 块元素的默认宽度会将父元素撑满（默认值为auto）
- 块元素的默认高度被内容撑开
- 行内元素
- 行内元素在文档流中会自左向右水平排列，如果一行不足以容纳所有元素
则会另起一行继续自左向右水平排列（和我们日常的书写相同）
- 行内元素的默认宽度和高度都被内容撑开

包含块（containing block）
- 在文档流中，包含块就是离当前元素最近的祖先块元素

子元素会在父元素内容区中排列
在文档流中，块元素的水平排列，必须要遵循如下一个等式：
子元素可见框宽度 + 子元素的水平外边距 = 包含块内容区的宽度
200 + 600 = 800
margin-left + 可见框 + margin-right = 包含块内容区的宽度
100 + 200 + 100 = 800 右外边距会自动修正为500
500 + 500 + 100 = 800 右外边距会自动修正为-200
100 + auto + 100 = 800 宽度为auto，会自动设置为600
auto + 200 + auto = 800
auto + auto + 200 = 800
- 当所有的属性值中没有auto，此时浏览器会自动调整右外边距以使等式强制满足
- 当只有一个属性值设置为auto，则浏览器会自动调整该值以使等式满足
- 当左右外边距为auto，而width有值时，则左右外边距会设置为相等的值，以使等式满足
- 当外边距和width同时设置为auto，则设置auto的外边距就是0
在文档流中，块元素的垂直排列，不需要遵循等式！
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含块内容区的宽度