一:
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-往最前
網頁布局基礎 css布局學習總結
1.標準文件流 從上到下，從左到右輸出文件內容 2.浮動 3.絕對定位 需要注意的是塊級元素如div p ul 等 行級元素如span strong img input等 塊級元素與行級元素都是盒子模型，下面說下盒子模型 盒子模型是網頁布局的基石，border padding margin 下面給出...
前端基礎之CSS（總結）
css學什麼?主要學習選擇器和屬性，選擇器是去找到標籤的位置，屬性是給標籤增加需要的樣式。css選擇器 1.基本選擇器 1.標籤選擇器 2.id選擇器 3.類選擇器 class c1 c2 2.通用選擇器 3.組合選擇器 1.後代選擇器 空格 2.兒子選擇器 3.毗鄰選擇器 div p 用的時候感覺...
Css元素布局定位
doctype html html lang zh cn head meta charset utf 8 title css position title style type text css wrap ps,pf,pr,pa ps.pf pr.pa style head body div cla...