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;
}