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