盒子模型
盒模型、盒子模型、框模型（box model）
CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
内容区
内容区(content):元素中的所有的子元素盒文本内容都在内容区中排列
内容区的大小由width盒height两个属性来设置
width：设置内容区的宽度
Height:设置内容区的高度
边框(border)
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子外部
要设置边框，需要至少设置三个样式
边框的宽度 border-width 默认值一般是3px，不同浏览器不一样
也可以指定四个方向的宽度，上右下左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了boder-width,还有border-xxx-width,用来单独指定一个边的宽度
边框的颜色 border-color
也可以按上右下左设置不同的颜色，如果省略则自动使用color的颜色
边框的样式 border-style
默认值是null，表示没有边框
也可按照上右下左来指定四个方向样式
solid：表示实线
Dotted:点状虚线
dashed：虚线
Double:双线
border简写，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
还有border-xxx,也适用于下面的简写 border-top
border：10px orange solid
内边距(padding)
内容区和边框之间的距离是内边距
一共有四个方向的内边距
Padding-top
Padding-right
Padding-bottom
Padding-left
内边距的设置会影响到盒子的大小
背景颜色会延申到内边距上
一个盒子的可见框的大小，由内容区 内边距和 边框共同决定
所以在计算盒子大小时，需要将这三个区域加到一起计算
Padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样
外边距(margin)
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距
Margin-top:上外边距，设置一个正值，元素会向下移动
Margin-right：
Margin-bottom：下外边距，设置一个正值，其下边的元素会移动
Margin-left：左外边距，设置一个正值，元素会向右移动
所以默认情况下，如果我们设置的是左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
margin也可以设置负值，则元素会向相反的方向移动
margin会影响到盒子实际占用空间大小
水平方向的布局
元素在其父元素中，水平方向的位置由以下几个属性共同决定
Margin-left
Border-left
Padding-left
Width
Padding-right
Border-right
Margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
上面的相加=其父元素内容区的宽度（必须满足）
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
调整的情况
如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足
这七个值中有三个值可以设置为auto
Width
Margin-left
Margin-right
如果某个值为auto，则会自动调整为auto的那个值以使等式成立
垂直方向的布局
默认情况下父元素的高度被内容撑开
子元素是在父元素的内容区中排列的，如果子元素超过父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden：溢出内容会被裁剪不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
Auto:根据需要生成滚动条
Overflow-x:单独处理水平方向
Overflow-y:单独处理垂直方向
垂直外边距的折叠
相邻的垂直方向外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素
父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须进行处理
行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局
Display用来设置元素显示的类型
可选值：
Inline 将元素设置为行内元素
Block 将元素设置为块元素
Inline-block:将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行
Table:将元素设置为一个表格
none：元素不在页面中显示
visibility：用来设置元素的显示状态
可选值：
Visible:默认值，元素在页面中正常显示
Hidden:元素在页面中隐藏，不显示，但是依然占据页面的位置