CSS盒子模型

基本属性

1. 内容区
通过width和height来设定宽高，元素中所有的子元素和内容文本都显示在这个区域里面

2. 边框
通过border-xxx来设定，常用属性如下：
border-width：边框的宽度
border-color：边框的颜色
border-style：边框的样式

详细说明如下：
border-width：分成上右下左四个方向，可以单独设定某一个方向的，也可以一次性设定所有方向的，省略不写的状况下，默认的大小是3个像素。

/* 设定一个值：一次代表了四个方向，例如设定四个边框都是10px */
border-width: 10px;

/* 设定两个值：格式为 上下 左右，例如上下=10px 左右=20px */
border-width: 10px 20px;

/* 设定三个值：格式为 上 左右 下，例如上=10px 左右=20px 下=30px */
border-width: 10px 20px 30px;

/* 设定四个值：格式为 上 右 下 左，例如上右下左方向分别是10px, 20px, 30px, 40px */
border-width: 10px 20px 30px 40px

可以通过属性来单独设定某一个方向的边框大小，如下：
border-top-width：上
border-rigth-width：右
border-bottom-width：下
border-left-width：左

border-color：跟border-width一样的，使用方式没有区别，省略不写的状况下，默认使用前景色color的值，如果没有设定color的话，color默认值是black。

border-style：跟border-width一样的，使用方式上没有区别，省略不写的状况下，默认使用的样式是none，即没有边框。一共有下面四种样式：
solid：实线
dotted：点状虚线
dashed：虚线
double：双线

border的简写：可以一次性设定width，color，style，方式如下：

/* width设定10px，color设定为red，style设定为solid
   注意：三个的顺序没有要求，写成width color style或者style width red显示的效果都是一样的
 */
border: 10px red solid

4. 内边距
内边距有四个方向，上右下左。跟边框的设定类似，可以分别通过四个单独的属性设定，也可以通过简写设定。

/* 设定上内边距 */
padding-top: 10px

/* 设定右内边距 */
padding-right: 10px;

/* 设定下内边距 */
padding-bottom: 10px;

/* 设定左内边距 */
padding-left: 10px

/* 简写：一次性设定四个方向的内边距，规则与边框的一致 */
padding: 10px;

盒子可见区域的大小是由内容区+内边距+边框决定的，计算盒子大小的时候，要将三个累加到一起计算。

5. 外边距
外边距不会影响到盒子可见区域的大小，但是会影响到盒子的位置，影响到盒子实际占用的空间。也一共分成了上右下左四个方向，设定方式和前面的都是类似的，但是外边距可以设定成负值，设定成负值会向相反的方向移动。

/* 设定上外边距 */
margin-top: 10px;

/* 设定右外边距 */
margin-right: 10px;

/* 设定下外边距 */
margin-bottom: 10px;

/* 设定左外边距 */
margin-left: 10px;

/* 简写：一次性设定四个方向的外边距，规则与边框的一致 */
margin: 10px;

水平布局

元素在其父元素水平方向的位置由如下几个属性共同决定：
margin-left：左外边距
border-left：左边框
padding-left：左内边距
width：内容区宽度
padding-right：右内边距
border-right：右边框
margin-right：右外边距
在其父元素中，水平布局必须满足下面的等式:
margin-left + border-left + padding-left + width + padding-right + border-right - margin-right = 父元素的内容区宽度
如果出现等式不满足的状况，称为过度约束，浏览器会自动调整等式。调整的方式如下：
1.如果7个值中没有定义为auto的值，则自动调整margin-right的值，使得等式成立。
2.如果7个值中有值定义为auto，则调整auto的那个值，使得等式成立。可以被定义为auto的值分别是width、margin-left、margin-right。具体调整方式如下：

1. 将宽度和一个外边距设定为auto，则宽度会调整到最大，设置为auto的外边距为自动为0
2. 如果将3个值都设定为auto，则外边距都是0，宽度会调整到最大
3. 如果将两个外边距都设定为auto，则会将外边距设定为相同的值，会让其相对于父元素居中

/* 设定子元素内容区宽度为100px，相对于父元素居中 */
width: 100px;
margin: auto;

垂直布局

子元素是在父元素的内容区中排列的，如果出现子元素的大小超过了父元素，则子元素会从父元素中溢出。可以使用overflow来设置溢出时候如果处理。设定情况如下：

1. visible：默认值，子元素会从父元素中溢出，在父元素的外部显示
2. hidden：溢出的内容将会被裁减，只显示父元素大小部分
3. scroll：生成两个滚动条，通过滚动条来查看完整的内容
4. auto：根据需要生成滚动条
   
   

垂直外边距的折叠

相邻的垂直方向外边距会发生折叠现象，折叠的规则如下：

兄弟元素

1. 如果两者的相邻垂直外边距都是正值，取两者之间的最大值
2. 如果两者的相邻垂直外边距一正一负，取两者相加之和
3. 如果两者的相邻垂直外边距都是负值，取两者之间绝对值较大的

父子元素
父子元素间相邻的上外边距，子元素的会传递给父元素。父子元素的外边距折叠会影响到页面的布局，必须进行处理。

行内元素的盒模型

盒模型属性
行内元素的盒模型属性和块元素的基本一致。差异如下：

1. 不支持设置宽度和高度，宽度和高度都是有内容撑开的
2. 可以设置margin、border、padding，但是垂直方向的不会影响到页面的布局

元素显示
可以配置元素显示的类型和显示的状态，显示的类型为display，显示的状态为visibility。

1. display: inline：将元素设置为行内元素
2. display: block：将元素设置为块元素
3. display: inline-block：将元素设置为行内块元素，既可以设置宽高，又不会独占一行
4. display: table：将元素设置为一个表格
5. display: none：元素不在页面中显示，不占据页面位置
6. visibility: visible：默认值，元素在页面中正常显示
7. visibility: hidden：元素在页面中隐藏，不显示，但是依然还是占据了位置