CSS盒子模型
盒模型（盒子模型、框模型）
CSS将页面中的所有元素都设置为了一个矩形盒子，所以对页面布局就是将一个个盒子摆放到不同位置。
一、每一个盒子都有以下几个部分组成：
1、内容区(content) 2、内边距(padding)
3、边框(boder) 4、外边距(margin)
内容区(content)：元素中所有的子元素和文本内容都在内容区中排列，
内容区大小由width和height来设置。
边框(border)：是盒子边缘，盒子内外的分界线。
要设置边框有三个属性：宽度(border-width) 颜色(border-color) 样式(border-style)。
(1)border-width：一般有默认值3px。可用来指定四个方向边框宽度。
还有border-xxx-width（border-top-width等，下面属性也有）
四个值：上，右，下，左。 三个值：上、左右、下。
两个值：上下、左右。 一个值：上下左右。
(2)border-color：用来指定边框颜色，规则同border-width。如果省略，使用color的值。
(3)border-style：指定边框样式。
solid实线 dotted点状线 dashed虚线 double双线 none没有边框（默认值）
border简写属性：border：10px red solid; 没有顺序。
内边距(padding)：内容区和边框之间的距离。有四个方向内边距:padding-top、right、bottom、left。
(1)内边距设置会影响盒子大小。
(2)整个盒子的背景颜色会延伸到内边距上。如果要区分，可以在内容区加不同的背景颜色。
（盒子的可见框大小由内容区、内边距、边框共同决定。）
外边距(margin)：外边距不会影响可见框大小，但会影响位置、占地。同样有四个方向外边距。
margin-top:上外边距，设置一个正值元素会向下移动。
margin-left:左外边距，设置一个正值元素会向右移动。
margin-right margin-bottom设置正值会让其他元素移动。
margin也可以设置负值，往相反方向走。
二、水平方向的布局
元素在其水平方向的位置由以下几个元素共同决定：
margin-left border-left padding-left width padding-right border-right margin-right
子元素的上述和必须等于其父元素内容区宽度。如果不满足，称为过度约束，浏览器会自动调整。
调整情况：(1)如果所有值没有 auto 情况，则会自动调整margin-right。
七个值中有三个(width margin-left、right)可设为auto，会先调整有auto的值。width值默认auto。
(2)如果一个宽度和一个外边距都auto，则宽度会自动调整到最大，设置为auto的外边距自动为0。
(3)如果两个外边距auto，宽度固定，则外边距为相同的值。可使一个元素在其父元素中水平居中。
三、垂直方向的布局
父元素高度如果不写，就被内容撑开。若父元素高度设定，子元素高度大于它，那子元素就会从父元素溢出。
可以使用overflow设置父元素来处理溢出的子元素。还有overflowx、y。
可选值：(1)visible(默认值)：子元素溢出，在父元素外部显示。
(2)hidden(隐藏)：溢出的部分裁剪不显示。
(3)scroll：生成水平垂直两方向滚动条，可查看完整内容。
(4)auto：根据水平垂直方向需要生成滚动条。
四、外边距的折叠
相邻垂直方向外边距会发生重叠现象。
(1)兄弟元素之间相邻垂直，两者都是正值或负值会取两者之间绝对值较大的；如果两者异号，取两者和。
（对开发有利，不需要处理。）
(2)父子元素之间上外边距，子元素会传递给父元素 （影响页面布局，要处理）。
五、行内元素的盒模型
1、行内元素不支持设置width和height。
2、行内元素可设置padding、border和margin，但垂直方向不会影响布局。
display：用来设置元素显示类型。
(1)inline 把元素设置为行内元素
(2)block 把元素设置为块元素
(3)inline-block 把元素设置为行内块元素（即可以设置宽高，又不会独占一行）
(4)table 把元素设置为表格。
(5)none 元素不在页面显示，不占位置。
visibility：用来设置元素显示状态。
(1)visible 默认，正常显示。
(2)hidden 隐藏不显示。但占位置。
