A今天学习的内容
1.css盒子模型
设置了box-sizing：border-box时，设置padding和border，它的宽度还是会保持不变
图例
9.PNG
宽高还是100px
设置了box-sizing：content-box时，再设置padding和border，它的宽度会发生改变
图例
10.PNG
宽高=100px+5（border的像素）×2=110
2.浮动float
浮动的目的：为了让元素并排显示
清除浮动的方法：
①在下面设置一个兄弟元素，给它添加clear：both样式；
②给父级加overflow：hidden样式；
③给需要清除浮动的元素后面 插入一个伪元素,设置为块然后清除浮动；
③例
11.PNG
3.定位position
①relative相对定位——position：relative；
例子：
12.PNG
②absolute绝对定位——position：absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于html都通过left、top、right和bottom移动；
z-index：设置元素的堆叠顺序（作用于给position：absolute绝对定位的元素），设置多个
z-index就看哪个z-index的数字大，谁最大就在最上面显示；
例子：
13.PNG
注意，当子元素没有设置宽度时，如果设置了绝对定位，它不会继承父元素的宽度。
4.布局方式
①默认布局（正常）
②浮动布局（将元素置于左右）
③层级布局（定位的运用）
5.实现元素垂直水平居中
父元素设置{position：relative}
子元素设置{
position：absolute；
left：50%；
top：50%；
margin-left：-50%的子元素宽度；
margin-left：-50%的子元素高度；
}
例子：
14.PNG
B今天掌握的内容
1.border-sizing的运用
2.运用float样式使元素能够并排显示
3.三种清除浮动的方法（一般用添加伪元素的方法）
4.相对定位和绝对定位的使用方法
5.布局方式（默认、浮动、层级）
6.利用定位和margin实现元素的垂直水平居中
C未掌握的内容
基本了解各自的作用，用法需要练习消化
