A今天学了什么
1.盒子模型
1.box-sizing:border-box
当设置box-sizing:border-box时，设置padding,和border,它的宽度还是会保持不变
2.总宽度
总宽度=width+border+padding
3.居中
margin-left:auto;
margin-right:auto;
2.浮动(float)
1.浮动
为了让元素并排显示
2.如何清除浮动
1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden
3.用伪元素,给父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
row（公共）
3.定位
1.position:absolute | relative（给父级相对，子级绝对 通过上下左右控制）
position:absolute (绝对位置)
position:relative（相对位置）
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
2.z-index
设置元素的堆叠顺序 给position:absolute绝对定位的元素（数字越大优先级高）
4.元素垂直水平居中
1.父元素设置parent{position:relative;}
子元素设置child{
position:absolute;
left:50%;top:50%;
margin-left:-50%;
margin-top:-50%;
}
5.css样式引入方式
1.内部样式
在标签里面写
2.内联样式
在html里面写（style）
3.外部样式
<link rel="stylesheet" type="text/css" href="/c5.css">
6.绝对路径和相对路径
1.绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
B我今天掌握了什么
1.盒子模型
1.box-sizing:border-box
当设置box-sizing:border-box时，设置padding,和border,它的宽度还是会保持不变
2.总宽度
总宽度=width+border+padding
3.居中
margin-left:auto;
margin-right:auto;
3.定位
1.position:absolute | relative（给父级相对，子级绝对 通过上下左右控制）
position:absolute (绝对位置)
position:relative（相对位置）
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
2.z-index
设置元素的堆叠顺序 给position:absolute绝对定位的元素（数字越大优先级高）
4.元素垂直水平居中
1.父元素设置parent{position:relative;}
子元素设置child{
position:absolute;
left:50%;top:50%;
margin-left:-50%;
margin-top:-50%;
}
5.css样式引入方式
1.内部样式
在标签里面写
2.内联样式
在html里面写（style）
3.外部样式
<link rel="stylesheet" type="text/css" href="/c5.css">
6.绝对路径和相对路径
1.绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
C我今天没掌握什么
2.浮动(float)
1.浮动
为了让元素并排显示
2.如何清除浮动
1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden
3.用伪元素,给父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
