布局：
文档流：
网页是多层的，文档流是最底下一层，是网页的基础
我们创建的元素默认都是文档流中进行排列中进行排列
元素在文档流中特点：
块元素：
独占一行、默认宽度是父元素的全部，默认高度是块内内容高度（子元素高度）
自上而下垂直排布
行内元素：
不独占一行，只占自身大小，默认宽高都是内容宽高
自左向右水平排列
盒模型：
CSS将页面中的所有元素都设置成为一个矩形的盒子，进行布局
每一个盒子由以下几部分组成：
内容区 (content) 、内边距 (padding)
边框 (border) 、外边距 (margin）
内容区：
通过style设置width和height是设置内容区的大小，元素中所有子元素和文本内容都是在内容区中
边框：
属于盒子的边缘，边框内属于盒子的内部
边框的大小会影响盒子的大小
要设置边框，至少设置三个样式
边框宽度：border-width
可以设定多个值：
当有四个值则对应 上 右 下 左 （顺时针）
当有三个值则对应 上 右 下 （左和右同值）
当有两个值则对应 上下 左右
当一个值 所有
也有类似边框样式：
border-top-width 直接指定上边框像素
（top right bottom lef 同样运用，单独指定一个边框）
边框颜色：border-color
颜色样式的具体写法和宽度样式相同，也可以分上下左右进行分别设置
默认值为color的值
边框样式：border-style (虚线、实线等）
具体可以设定值为： solid 实线
dotted 点状虚线
dashed 虚线
double 双实线
边框样式的具体写法和宽度样式相同，也可以分上下左右进行分别设置
边框简写样式：
语法： border : 上面三个值直接写下来
可以同时设置所用相关样式，且没有顺序要求
也可以通过 border-top：之类的来设定单边
还可以使用 border-xxx : none; 来消除某一边的样式
内边距：
内容区和边框之间的距离是内边距
通过 padding: 进行设置内边距大小（也可以用padding-top等进行单独设置）
内边距大小会影响盒子大小
背景颜色会延申到内边距上
所用盒子大小要将 内容区+内边距+边框
外边距：
外边距不会影响盒子可见框大小
外边距是对盒子的位置进行影响，改变盒子的位置
存在四个方向外边距：
margin-top 上外边距，设置一个正值，元素向下移动
margin-right 默认情况下，无效
margin-bottom 下外边距，设置一个正值，此元素下边元素进行移动
margin-left 左外边距，设置一个正值，元素向右移动
margin也可以设定负值，则向相反的方向移动
改变top和left（上、左）是移动元素自身，改变bottom和right是移动其他元素
margin简写属性：
margin： 可以同时设定四个外边距，写法类似上面
margin不影响盒子大小，只影响盒子实际占用空间大小
水平布局：
在父元素中的子元素的水平布局由7个值决定：
margin-left、border-left、padding-left、width、padding-right、
border-right、margin-right
且一个子元素在父元素内，水平布局一定要满足：
这7个值相加等于父元素内容区的width
如果相加使等式不成立，则称为过度约束，浏览器会自动对等式进行调整
调整情况：
1、不存在auto的情况下，浏览器调整margin-right的值使等式成立
2、存在auto的情况下（只有width、margin-left、margin-right可以设置auto）
若某个值为auto，则自动调整为auto的值，使等式成立
若将一个宽度和一个外边距设置为auto，则自动将宽度调整到最大，外边距调
整为0
若三个值都是auto，情况和上面一样
如果两个外边距为auto，则两个外边距设定同样的值，会将子元素居中
常常利用这个特点进行元素居中处理
（如果width没设置，则默认auto）
垂直布局：
在默认情况下，父元素的高度会由子元素撑开（在父元素没有设置高度时）
在父元素设置了高度值后，子元素再超过父元素高度则会产生溢出
使用 overflow 属性处理溢出;
overflow可选值：
visible 默认值，溢出会在父元素外显示
hidden 溢出值进行裁剪
scroll 生成两个滚动条，通过滚动条进行查看
auto 根据需要生成滚动条
还有 overflow-x、overflow-y 单独处理x，y轴溢出
垂直外边距的重叠（折叠）：
相邻的垂直方向外边距会发生重叠
兄弟元素：
兄弟元素之间的相邻外边距会取两者之间的较大值（都是正值的情况下）
特殊情况：
相邻外边距一正一负：取两者的和
相邻外边距两负：取绝对值较大的
父子元素：
父子元素之间的相邻外边距，子元素的会传递给父元素（上外边距）
因为会影响到布局，需进行处理
垂直居中：
在父元素中设置 line-height 的值和height的值相同就会让子元素垂直居中
行内元素的盒模型： 行内元素不支持设置宽高，直接由内容撑开
总结：不影响垂直方向的布局
display 属性：
用来设置元素的类型：
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
（既可以设置宽高，又不会独占一行）
table 将元素设置为一个表格
none 将元素隐藏（且不占据页面位置）
visibility 属性：
用来设置元素状态：
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素隐藏，但还占据页面位置
默认样式：
通常情况下，浏览器会为元素设置一些默认样式
默认样式会影响页面布局，通常情况下编写网页需要去除默认样式
通过F12进行查看，在style中进行去除
特殊：对于ul、ol中的项目符号
可以通过 list-style：none; 进行去除
对于简单网页可以统一去除：
使用通配选择器 *{} 进行统一去除
对于复杂网页需要一个个进行去除：
可以通过引入他人编写好的默认样式去除css进行去除（重置样式表）
盒子大小：
默认情况下，盒子大小有内容区、内边距和边框共同决定
可以通过 box-sizing对盒子大小的计算方式进行修改：
可选值：
content-box 默认值，计算方式为默认方式
border-box 宽高直接改变的是盒子的总宽高、内容区会自行修改
