简介
CSS中将每一个元素都设置为了一个矩形的盒子
将所有的元素都设置为盒子，是为了方便页面的布局
当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子
内容区
内容区相当于盒子存放东西的空间
内容区在盒子的最里边
元素的所有的子元素都是放在父元素的内容区
内容区设置：
width：内容区的宽度
height：内容区的高度
内边距
内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
盒子中一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
padding：可以同时设置四个方向的内边距，规则和border-width一致
padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
padding:上下左右
盒子的可见框大小由内容区、内边距和边框共同决定
边框
边框盒子可见框最外侧，边框是盒子的边缘
设置边框需要同时设置三个样式，缺一不可
border-width：边框的宽度
可以同时指定四个边框的宽度，也可以分别指定
四个值：border-width : 上 右 下 左;
border-width : 10px 20px 30px 40px;
三个值：border-width : 上 左右 下 ;
border-width : 10px 20px 30px;
两个值：border-width : 上下 左右 ;
border-width : 10px 20px;
一个值：border-width : 上下左右 ;
border-width : 10px;
border-color：边框的颜色
border-style：边框的样式
除了这三个样式，CSS中还提供了
border-xxx-width
border-xxx-color
border-xxx-style
xxx可以是：top、right、bottom、left
通过这些样式可以单独指定四个边的颜色，宽度和样式
边框的简写属性：
border
border-left
border-top
border-right
border-bottom
这个几个属性可以同时设置边框相关的的样式
border可以同时设置四个边的颜色，宽度，样式
border-xxx可以单独设置某一个边
使用这些样式可以同时设置border-width border-style border-color，
不同的属性使用空格隔开，并且没有顺序要求。
外边距
外边距盒子和其他盒子之间的距离，
外边距不会影响可见框的大小，但是会影响盒子的位置
也是具有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
简写属性：
margin 规则和padding一致
margin值：
可以设置为auto:
如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值
如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，
通过这种方式使一个子元素在它的父元素中水平居中 margin:0 auto
可以设置为负值:
如果将margin设置为负值，则元素会向相反的方向移动
外边距的重叠
/* 外边距的重叠: */
相邻的垂直外边距会发生重叠现象:
相邻元素的外边距会取最大值
子元素的外边距会传递给父元素
水平外边距不会重叠，而是取和
/* 内联元素的盒子模型 */
不支持设置width和height
padding：
支持水平方向的padding
垂直方向的padding也支持，但是不会影响布局
border：
支持四个方向边框，但是垂直的边框不会影响布局
margin：
支持水平方向外边距
不支持垂直方向的
盒模型相关的样式
display：
设置元素的显示类型
可选值：
none 元素不会在页面中显示，并且不会占据页面的位置
block 元素会作为块元素显示
inline 元素会作为内联元素显示
inline-block 元素会作为行内块元素显示
既具有内联元素的特点也具有块元素的特点
不独占一行； 可以设置宽高
visibility：
设置元素是否在页面中显示
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素不在页面中显示，但是依然在页面中占据位置
overflow：
设置元素如何处理溢出内容
可选值：
visible 默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden 溢出的内容会被隐藏不会显示
scroll 在父元素中同时添加水平和垂直方向的滚动条
不管内容是否溢出都会添加滚动条
auto 根据需要自动生成滚动条
文档流
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素：
1.块元素在文档流中自上向下排列
2.块元素在文档流中宽度默认是父元素的100%
3.块元素在文档流中高度默认被内容撑开
内联元素：
1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，
则换到下一行，继续自左至右排列
2.内联元素在文档流中宽度和高度默认都被内容撑开