A我今天學(xué)了什么
1.css盒子模型
1.1 box-sizing：border-box
當(dāng)設(shè)置box-sizing：border-box；
padding和border寬度不會(huì)改變
box-sizing：content-box{默認(rèn)清晰}
總寬度=width|+padding+border
例：{
padding：“15px”
box-sizing：border-box；
}
2.浮動(dòng)Float（目的：為了讓元素并排顯示）
2.1如何清除浮動(dòng)
(1)給下面的兄弟元素給clear:both;
(2)給父級(jí)加overflow:hidden;
(3)用偽元素,給a父級(jí)內(nèi)容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
before（在什么之前）
after（在什么之后）
3.定位：position（父相子絕）
1.1Relative 定位
相對(duì)定位元素的定位是相對(duì)其正常位置厕氨。
postion:relative
1.2absolute定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素钞钙，如果沒(méi)有已定位的父元素
岔擂，那么它的位置相對(duì)于<html>:都通過(guò)left,top,right,bottom移動(dòng)
1.3
z-index:設(shè)置元素的堆疊順序 給position:absolute絕對(duì)定位的元素
例子:搜索框
***當(dāng)子元素沒(méi)有設(shè)置寬度试吁，如果設(shè)置了絕對(duì)定位,它不會(huì)繼承父元素的寬度
4.布局方式的總結(jié)
1.默認(rèn)布局
2.浮動(dòng)布局(左右安置)
3.層級(jí)布局(定位)
5.實(shí)現(xiàn)元素的垂直水平居中
1.父元素設(shè)置parent{position:relative;}
2.子元素設(shè)置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
B我掌握了什么
1盒子模型
1.1 box-sizing：border-box
當(dāng)設(shè)置box-sizing：border-box；
padding和border寬度不會(huì)改變
box-sizing：content-box{默認(rèn)清晰}
總寬度=width|+padding+border
例：{
padding：“15px”
box-sizing：border-box挂据；
}
2.浮動(dòng)Float（目的：為了讓元素并排顯示）
2.1如何清除浮動(dòng)
(1)給下面的兄弟元素給clear:both;
(2)給父級(jí)加overflow:hidden;
(3)用偽元素,給a父級(jí)內(nèi)容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
before（在什么之前）
after（在什么之后）
3.定位：position（父相子決）
1.1Relative 定位
相對(duì)定位元素的定位是相對(duì)其正常位置胖喳。
postion:relative
1.2absolute定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素泡躯，如果沒(méi)有已定位的父元素
，那么它的位置相對(duì)于<html>:都通過(guò)left,top,right,bottom移動(dòng)
1.3
z-index:設(shè)置元素的堆疊順序 給position:absolute絕對(duì)定位的元素
例子:搜索框
***當(dāng)子元素沒(méi)有設(shè)置寬度，如果設(shè)置了絕對(duì)定位,它不會(huì)繼承父元素的寬度
4.布局方式的總結(jié)
1.默認(rèn)布局
2.浮動(dòng)布局(左右安置)
3.層級(jí)布局(定位)
5.實(shí)現(xiàn)元素的垂直水平居中
1.父元素設(shè)置parent{position:relative;}
2.子元素設(shè)置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
C我掌握不好的地方
1.全部掌握
