今天學(xué)到了什么
1.盒子模型的參數(shù)
2.標簽的分類
3.CSS選擇器
1.CSS盒子模型
1.1盒子模型參數(shù)
傳遞一個參數(shù)// margin:100px 四個方向全部改變
傳遞兩個參數(shù)//margin:100px 200px ( 結(jié)果:top,bottom-- 100px left,right -- 200px)
傳三個參數(shù) top--100 left,right -- 200 bottom --300(結(jié)果:margin:100px 200px 300px;)
傳四個參數(shù) margin:100px 200px 300px 400px
總結(jié)：參數(shù)傳遞的方向為top->right->bottom->left(當其中一面沒有參數(shù)時默認傳遞其對面的參數(shù))
1.2padding的傳參
實驗過程和盒子傳參一樣
總結(jié)：參數(shù)傳遞的方向為top->right->bottom->left(當其中一面沒有參數(shù)時默認傳遞其對面的參數(shù)嚼鹉，當只設(shè)置一個參數(shù)時币叹，這一個參數(shù)向四面?zhèn)鬟f)
小tips:元素內(nèi)容的起始位置,是基于它自身width,height的起始位置 ,所以元素居中僅僅針對塊元素有效
2.標簽的分類
2.1塊標簽
h1,p,div,ul,li,dl,dt,dd
特點:1.獨占一行 2.能設(shè)置width,height
塊標簽?zāi)J display:block
2.2內(nèi)聯(lián)標簽
a,span,i,em,strong
特點:
1.并排顯示 2.不能設(shè)置width,height 3.不能設(shè)置margin-top,margin-bottom
內(nèi)聯(lián)默認 display:inline
2.3內(nèi)聯(lián)塊
input,img,button
特點:1.并排顯示 2.能設(shè)置width,height
內(nèi)聯(lián)塊默認 display:inline-block
2.4內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
2.5不改變內(nèi)聯(lián)和內(nèi)聯(lián)塊的display屬性 實現(xiàn)水平居中
parentElement{
text-align:center;
}
3.CSS選擇器
3.1偽類選擇器
格式: #+標簽名{}(例：#two{})
3.2分組選擇器
格式 ：標簽名+：hover{}(例：p:hover{})
3.3后代選擇器
格式：.parent+標簽名{}(例：.parent p{})
注意：.parent p{}是選擇parent之后的所有p元素
3.4兄弟選擇器
格式：
div+標簽名{} (例：
div+p{}萍启，它表示選中div之后的第一個p元素)
div~p{}表示選中div之后的所有p元素偽類選擇器：input:focus{}
3.5 偽元素匠童，是用css自定義生產(chǎn)的元素
語法：
div:before{
content:""
}
3.7屬性選擇器
語法：
element[attr=value] {
}
3.8選擇器的最高優(yōu)先級別：
語法：!important> id>class>p{}
3.9選擇器的權(quán)重：
選擇器嵌套的層次越深,那么權(quán)重越高
