今天的學(xué)習(xí)內(nèi)容
1.參數(shù)的傳遞
-
1.1盒子模型的傳參
- margin:100px 四個(gè)方向全部改變
margin:100px 200px; top,bottom-- 100px left,right -- 200px - //傳三個(gè)參數(shù) top--100 left,right -- 200 bottom --300
margin:100px 200px 300px; - //傳四個(gè)參數(shù)
margin:100px 200px 300px 400px
top right bottom left
-
1.2padding
//傳一個(gè)參數(shù) 四個(gè)方向都改變
//傳兩個(gè)參數(shù) 第一參數(shù)top,bottom 第二個(gè)參數(shù)left,right
//傳三個(gè)參數(shù)
第一個(gè)參數(shù)top 第一參數(shù)left,right 第三個(gè)參數(shù)bottom
//傳四個(gè)參數(shù) top,right,bottom,left
2.標(biāo)簽的分類
- 塊標(biāo)簽:h1,p,div,ul,li,dl,dt,dd
特點(diǎn):1.獨(dú)占一行 2.能設(shè)置width,height - 內(nèi)聯(lián)標(biāo)簽:<h1>h1</h1>
<p>p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<div>div</div>
特點(diǎn):1.并排顯示 2.不能設(shè)置width,height 3.不能設(shè)置margin-top,margin-bottom - 內(nèi)聯(lián)塊: input,img,button
特點(diǎn):1.并排顯示 2.能設(shè)置width,height
3.水平居中
02.PNG
4.選擇器
-
1.后代選擇器
.parent>p{} 選擇所包含的同等級(jí)別的p元素(親兒子)
.parent p{} 選擇parent之后的所有p元素
03.PNG
-
2.兄弟選擇器
div+p{} -->選中div之后的第一個(gè)p元素
div~p{} -->選中div之后的所有p元素
-
3.屬性選擇器
語(yǔ)法: element[attr=value]{ }
04.PNG
-
4.偽元素
偽元素-->用css自定義生產(chǎn)的元素
div:before{
content:" "
}
05.PNG
-
5.選擇器的優(yōu)先級(jí)別
!important> id>class>p{}
06.PNG
-
6.選擇器的權(quán)重
選擇器嵌套的層次越深,那么權(quán)重越高
07.PNG