A 今天学了什么

1.CSS盒子模型

a9d3fd1f4134970a37cf81a69fcad1c8a6865dfe.jpg

1.1box-sizing:border-box

当设置padding和margin时，盒子大小不会改变
默认是content-box， 可以改变大小

2浮动float

目的：为了让元素并排

3.如何清除浮动

给下面的兄弟元素加 clear:both

给父级加overflow:hidden

用伪元素，给父级内容生成
.row:after{
cotent:"";
display:table;
clear:both
}

4.定位position

position:relative 相对定位
相对定位位置是相对其正常位置

position:absolute 绝对定位
相对定位位置是相对其最近的已定位的父元素，

都通过 top right bottom left 来控制移动   

z-index 设置元素显示的优先级 

当子元素没有宽度，当它设置了定位，则不再继承父级

5.布局样式

默认布局
浮动布局(左右安置)
层级布局（定位）

6.实现元素垂直水平居中

父元素设置{
position:relative
}
子元素
{
position:absolute:
top:50%
left:50%
margin-top:-50%childheight
margin-left:-50%childwidth

当不知道元素宽高时，如何设置元素垂直水平居中
position:absolute:
top:50%
left:50%
margin:auto

B今天学会了什么

1 盒子模型

a9d3fd1f4134970a37cf81a69fcad1c8a6865dfe.jpg

1.1box-sizing:border-box

当设置padding和margin时，盒子大小不会改变
默认是content-box， 可以改变大小

2浮动float

目的：为了让元素并排

3.如何清除浮动

给下面的兄弟元素加 clear:both

给父级加overflow:hidden

用伪元素，给父级内容生成
.row:after{
cotent:"";
display:table;
clear:both
}

4.定位position

position:relative 相对定位
相对定位位置是相对其正常位置

position:absolute 绝对定位
相对定位位置是相对其最近的已定位的父元素，

都通过 top right bottom left 来控制移动   

z-index 设置元素显示的优先级 

当子元素没有宽度，当它设置了定位，则不再继承父级

5.布局样式

默认布局
浮动布局(左右安置)
层级布局（定位）

6.实现元素垂直水平居中

父元素设置{
position:relative
}
子元素
{
position:absolute:
top:50%
left:50%
margin-top:-50%childheight
margin-left:-50%childwidth

C今天没有掌握什么

都掌握了