一:

1css三大特性

繼承性   重疊性  優先順序

繼承性:text-/font-/line-

a標籤的顏色不具有繼承性,標題標籤的字型大小不具有繼承性

!2元素類別

塊元素:div,p,h1-h6

塊元素特徵:自動繼承直接父元素的寬度,不繼承時沒有寬高,換行

行內塊:img,input,select,textarea 

行內塊元素特徵:一個完整的行內塊元素有預設的寬高,不換行,可設定寬高

行內:a,span,ins,u,del,s,i,em,偽元素

行內元素特徵:不可設定寬高,不換行

二:

常規佈局:

一般適用pc端

流式佈局:

寬度百分比,單位rem,一般適用於移動端

響應式佈局:

一種頁面在pc端和移動端上顯示效果不一樣,

pc端上:

預設的樣式,

平板上:

@media only screen and (max-width:980px){

}

這裡面的程式碼具有繼承性,所以沒寫的還是pc端樣式,需要改變的需要注意權重問題

手機上:

@media only screen and (min-width:320px) and (max-width:768px){

}

只需要在注意權重的情況下寫不同就行了,其實原理就是程式碼的重疊性,

柵格佈局(bootstrap):

1直接父元素為類名container

2用柵格引數實現在不同裝置中網頁效果不一樣

.col-xs-值/.col-sm-/.col-md-/.col-lg-

3柵格引數中各個值相加為12

col-md-offset-3:列偏移

col-md-push-:往最後

col-md-pull-往最前