兩天學會CSS（第二天）

css選擇器

①萬用字元選擇器：*{}儘量避免使用通配選擇器，因為會給所有的標籤新增樣式

②標籤選擇器：直接用標籤名div{}

③類選擇器：又稱class選擇器 用.name{}完成
*注
1.class選擇器是可以複用的
2.可以新增多個class樣式
3.多個樣式的時候，樣式的優先順序根據CSS決定，而不是class屬性中的順序

④ID選擇器：用#name{}

⑤群主選擇器：使用，分隔

⑥後代選擇器：使用空格進行分割分隔

⑦子代選擇器：使用>進行分隔

⑧屬性選擇器：使用[屬性名=“屬性值”]

⑨偽類選擇器：css偽類用於向某些元素新增特殊的效果。一般用於初始樣式新增不上的時候，用偽類來新增。
1:link 訪問前的樣式（只能給a標籤）
2:visited 訪問後的樣式（只能給a標籤）
3:hover 滑鼠移入時的樣式（可以給所有標籤）
4:active 滑鼠按下時的樣式（可以給所有標籤）
遵循愛恨法則

css優先順序

style行間（權重1000）> id（權重100） > class（權重10）> 標籤（權重1）

盒子模型

padding/border/margin
只寫一個值：上右下左
寫兩個值：上下、左右
寫三個值：上、左右、下
寫四個值：上、右、下、左
1.背景顏色會填充到margin以內的區域（不包括margin區域）
2.文字會在content區域
3.padding不會出現負值，margin是可以出現負值的
box-sizing（盒尺寸，可以改變盒子模型的展示形態）
2.解決一些百分比的問題input{width:100%;padding:30px;box-sizing:border-box;}
margin疊加
當給兩個盒子同時新增上下外邊距的時候，就會出現疊加的問題（取兩者中大的值作為疊加值），只有上下有，左右沒有
解決方案：
想辦法只給一個元素新增間距
margin傳遞
傳遞問題只會出現在巢狀的結構中，且只有margin-top會有傳遞的問題，其它三個方向沒有傳遞問題
解決方案：
1.給父容器加邊框
2.margin換成padding（加給父元素，padding-top: ;並進行調整）
margin自適應居中（只可以左右，不可以上下）
margin-left:auto;margin-right:auto;居中
一般寫法：margin：0 auto;(margin:auto auto;)

標籤分類

按型別：
block：塊 div p ul li h1…
獨佔一行；支援css中所有的樣式；不寫寬時，和父元素寬相同；所佔區域是一個矩形
inline：內聯 span a em strong img…
挨在一起；有些樣式不支援（寬、高、margin、padding的某些）；不寫寬時，寬度由內容決定；所佔區域不一定是矩形；內聯標籤之間會有空隙（換行產生），解決，找到兩個內聯的父元素：font-size:0;然後兩個內聯在設定font-size;16px;空隙消失
inline-block：內聯塊 input select…
挨在一起，支援寬高

溢位隱藏

overflow:visible（預設）/ hidden / scroll（有滾動條）/ auto（內容多的時候有滾動，內容少的時候沒有）

擴充

opacity
0（透明）~ 1（不透明）
rgba 最後一個為透明度，只針對背景，不針對文字，可以讓指定樣式透明，不改變其他樣式
cursor 手勢
default：預設透明
自定義滑鼠樣式：pointer（手型）、help（箭頭帶問號）
自定義，準備圖片 .cur .ico的才可以，`cursor:url(),auto;