A今天學(xué)了什么
1.css盒子模型:
content 內(nèi)容
padding 填充
border 邊框
margin 邊界
box-sizing：boder-box
設(shè)置padding和border時余蟹，寬度將保持不變
box-sizing： content-box ）（默認(rèn)清晰）
設(shè)置padding和border時奖亚，它的寬度將會改變
盒子的總寬度=width+border+padding
2.float 浮動
目的：是為了讓元素并排顯示
如何清除浮動：
a.給下面的兄弟元素加：clear:both;
b.給父級加：overflow:hidden;
c.用偽元素，給a父級內(nèi)容生成
.row:before{
display:table;
content:""
}
.row:after{
display:table;
content:""
clear:both;
}
3.position 定位
relative 相對定位
相對定位的元素是相對其正常位置
absolute 絕對定位
絕對定位的元素的位置相對于最近的已定位父元素，如果沒有已定位的父元素箫津，那么它的位置相對于<html>：都通過left,top ,right, bottom來移動
z-index：設(shè)置元素的堆疊順序給position:absolute絕對定位的元素
比如：搜索框
當(dāng)子元素沒有設(shè)置寬度粹污，如果設(shè)置了絕對定位蜕着，它就不會繼承父元素的寬度
4.布局方式的總結(jié)
默認(rèn)布局
浮動布局（左右安置）
定位布局
5.實(shí)現(xiàn)元素的垂直水平居中
父元素設(shè)置
parent{position:relative;}
子元素設(shè)置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
6.拓展知識
p*10表示有10個p標(biāo)簽
p{abc}*10表示有10個<p>abc</p>標(biāo)簽
p{$$}*10表示有10個<p>01</p>~<p>10</p>標(biāo)簽
p.text#id${}*10<p class="text1" id="id1">01</p>~<p class="text10" id="id10">10</p>
ul >li*10=<ul>
里面有10個li
<ul>
7.拓展選擇器
選擇第一個子元素
div>p:first-child{} 選擇div里面第一個子元素
選擇最后一個子元素
div>p:last-child{} 選擇div里面最后一個子元素
選擇某一個子元素
ul li:nth-child(index) even為偶數(shù) odd奇數(shù)
不選中某個
:not(selector)
B我掌握好的地方
1.css盒子模型:
content 內(nèi)容
padding 填充
border 邊框
margin 邊界
box-sizing：boder-box
設(shè)置padding和border時僵蛛，寬度將保持不變
box-sizing： content-box ）（默認(rèn)清晰）
設(shè)置padding和border時，它的寬度將會改變
盒子的總寬度=width+border+padding
5.實(shí)現(xiàn)元素的垂直水平居中
父元素設(shè)置
parent{position:relative;}
子元素設(shè)置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
6.拓展知識
p*10
=10個p標(biāo)簽
p{abc}*10
=10個<p>abc</p>標(biāo)簽
p{$$}*10
=<p>01</p>~<p>10</p>標(biāo)簽
p.text#id${}*10
=<p class="text" id="id01">01</p>~<p class="text" id="id10">10</p>
p.text#id${$$}*10>a[href=""]
=<p class="text" id="id1">01<a href=""></a></p>~<p class="text" id="id10">10<a href=""></a></p>
ul >li*10=<ul>
里面有10個li
<ul>
7.拓展選擇器
選擇第一個子元素
div>p:first-child{} 選擇div里面第一個子元素
選擇最后一個子元素
div>p:last-child{} 選擇div里面最后一個子元素
選擇某一個子元素
ul li:nth-child(index) even為偶數(shù) odd奇數(shù)
不選中某個
:not(selector)
C我掌握不好的地方
都掌握了
