day4

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未掌握的内容

基本了解各自的作用，用法需要练习消化