1.css樣式優先順序
元素上的樣式》 style中嵌入的樣式》外部樣式檔案，其實不太準確，應當是當嵌入式出現在外部樣式的後面時，按照style出現的順序來渲染的，後面出現的會覆蓋前面的。
同乙個樣式檔案中，元素選擇器越精確優先順序越高，id選擇器(100)>類選擇器(10)>元素選擇器(1)，根據權值(累計值)來確定使用哪種樣式（繼承的權值最低）；權值相同，出現越靠後的優先順序越高；
若要讓某個樣式優先順序變高，可使用!important，例如：color: bule !important;
瀏覽器預設的樣式《網頁製作者設定的樣式《使用者設定的樣式，但應用了!important則高於使用者設定的樣式。
2. 同乙個元素可以有多個類，如，但id只能有乙個。
3.子選擇器
ele1>ele2：用於選擇指定元素ele1的第一代(即直接後代，不包括巢狀的ele2)子元素ele2.
ele1 ele2：用於選擇指定元素 ele1的所有後代子元素ele2
4. 偽選擇器
a:hover
5.繼承性：css中某些樣式具有繼承性，對某元素設定了樣式，也適用於其子元素，如color，但某些不具備繼承性，如border
6.縮排：text-indent屬性
行距：line-height
字母間距：letter-spacing
單詞間距：word-spacing
7.為塊狀元素中的文字或設定位置: blockele
8.塊級元素 display:block;
獨佔一行(擴充滿正行)
可設定寬度、高度、行高、頂底邊距
未設定寬度時時父元素寬度的100%
9.內聯元素 display:inline;
和其他元素在一行
不可設定寬度、高度、行高、頂底邊距
其寬度為包含的或文字的寬度，不可調節
10.內聯塊元素 display:inline-block
和其他元素在一行，但可設定寬度、高度、行高、頂底邊距，如 img、input
11.width
（1）width和height都是指定元素內容區，不包括padding等。
auto：即子元素的margin+border+padding+內容區寬度=父元素內容區寬度；內容區根據父元素內容區減去邊距等來自動調節大小，一般情況下保持整個寬度都在父元素的內容區內；
100%：子元素內容區寬度=父元素內容區寬度，margin、padding、border會額外新增到內容區外面，保證內容區寬度=父元素內容區寬度；首先滿足左側的padding、margin，所以右側可能會超出父元素；
預設為auto
（2）行內元素的寬度和高度是由其包含內容決定的，由其內容來撐開，不能設定width和height；
塊級元素的寬度預設為父元素的width的auto
（3）width不具備繼承性
屬性的繼承性總結： 布局
12.流動模型：文件預設的模型，塊元素在垂直方向獨佔一行，內聯元素在一行從左到右水平分布
13.浮動模型：脫離原文件流
（1）若後面是非浮動的block元素，則當浮動元素不存在，會在浮動元素的位置擺放，但塊元素內的文字等會環繞浮動元素；若後面是非浮動的inline元素則會環繞浮動元素。
（2）若元素未設定寬度而設定了浮動，則寬度會隨內容的變化而變化
（3）設定浮動的元素僅會對緊跟其後的元素產生影響，而不會對前面或者更後面的元素產生影響
（4）清除浮動：
方法一：對受浮動影響的元素設定clear屬性
方法二：對受浮動影響的元素同時設定width:100%（固定寬度）和overflow:hidden;這個一般是設定浮動元素所在元素的父元素
14.定位
（1）絕對定位
<1>相對於最近的定位父元素，若所有父元素都未設定定位，則相對於瀏覽器(html標籤)；若設定了距離，則是相對于父元素的邊框內邊界的距離，忽略padding；若未設定距離則 是相對於內容區邊界。
脫離原文件流，並且內聯元素變為塊級元素；
產生z-index屬性（預設是處理x,y軸所在平面），和其他元素有重疊時會遮蓋其他元素;
<2>若未設定寬度，則其寬度發生改變，不再是撐滿整行而是隨內容變化而變化；
<3>當元素設定了絕對定位但未設定偏移量時：不管父元素有無設定定位屬性（非static），該元素依然在原本在文件流中的位置；但以脫離文件流了
設定了偏移量：以最近的定位的父元素為基準偏移
（2）相對定位
相對於原本在文件流中的位置偏移，沒有脫離文件流，原來的位置仍保留；
產生z-index屬性（預設是處理x,y軸所在平面），和其他元素有重疊時會遮蓋其他元素
（3）固定定位
與absolute有很多共同點：脫離原來文件流，變為塊級元素
相對於檢視的位置不變，不會隨滾動條變化
總結：當塊元素設定了定位或者浮動後，不再像原來那樣佔滿整行，而是由其內容來撐開。
水平居中技巧
15.行內元素水平居中
給其父元素設定：text-align:center;
16.定寬塊級元素居中
元素必須設定了寬度，且為該元素設定屬性：margin：x auto;設定寬度的原因是塊級元素預設是填滿正行，若不設定寬度是無法居中顯示的
17.不定寬塊級元素居中
例如分頁頁碼，無法確定寬度
方法一：建table表，將要居中元素放入td框中；為table設定margin：x auto; 缺點：增加無語義標籤
css：
table
li
再為其父元素設定：text-align:center;
沒有無語義標籤，但將元素設定為inline，則不可以設定其長度了
.div1 ul
.div1
要居中元素設定 position:relative; left:-50%;
垂直居中技巧
18. 父元素高度確定的單行文字
設定父元素的height和line-height一致
19. 父元素高度確定的多行文字、、塊元素
方法一：把要居中的元素放到table標籤的td中，設定td的高度和verticle-align:middle，verticle-align只適用與th、td
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
table td //td預設verticle-align:middle20.頁面若通過設定margin:0 auto;到達居中，則不可以再設定浮動或絕對定位，否則無法居中
21. 通常需要初始化margin和padding值為0，以免瀏覽器預設的填充帶來干擾
*22.想要網頁內容居中，可以在body標籤下設定乙個把網頁內容包裹起來，並且設定其寬度，margin:0 auto則可以居中顯示
橫向兩列布局
23. 一般使用浮動來進行橫向兩列布局，兩個都浮動或乙個浮動另乙個設定margin來取得合適位置
24. 定位進行橫向兩列布局一般適用於：一列寬度固定，另一列寬度自適應
父元素進行相對定位，寬度自適應(未規定寬度)的元素進行絕對定位，固定寬度的元素不做任何處理
注意：需固定寬度的列要》寬度自適應的列：因為絕對定位的元素脫離了文件流，需要有元素來把父元素撐開
不定寬元素不能使用浮動解決的原因：此時寬度自適應的元素未設定寬度，如果設定了浮動，則寬度由內容來撐開，很有可能內容很多會會佔滿整行，這樣就會直接跳到下一行，所以不能實現兩列布局（其實可以通過23.方式中的margin來實現，width預設為auto，父元素的內容寬度-margin等寬度=寬度自適應的元素內容寬度）
橫向三列布局
25.若設定了寬度，則可用浮動
26.未設定則left和right可用絕對定位，中間元素使用margin值確定位置
混合布局
25.寬度自適應是說寬度會隨瀏覽器視窗的大小變化而變化，其父元素也是不定寬的，該元素的寬度未設定(預設100%)或設定為父元素的百分比，這樣都會隨父元素變化，但若父元素設定了定寬，則子元素也變成定寬了(預設為父元素的100%)。
CSS基礎學習筆記
個人理解 距被控制的元素越近，優先順序越高 css基礎語法 選擇器 即需要改變樣式的 html 元素宣告 屬性和值 即css 規則格式為 selector property value porperty2 value 值的不同寫法和單位 值為單詞 風格 空格和大小寫 css高階語法 繼承及其問題 擺...
CSS基礎學習筆記
初學css所以就以部落格的形式記錄下來，權當是個記事本了。css規則由倆個主要部分構成 選擇器，以及一條或多條宣告 selector 其中選擇器通常是你需要改變的html元素，例如 p 或 h1 這些 每條宣告由乙個屬性和乙個值組成 其中屬性 property 是希望您設定的樣式屬性。每個屬性都有乙...
學習筆記 CSS基礎
css 指層疊樣式表 cascading style sheets 是一種標記語言，屬於瀏覽器解釋型語言，可以直接由瀏覽器執行，不需要編譯。html只負責網頁的內容，標籤盡量只負責語意不負責樣式。css 主要負責網頁的樣式，給網頁進行布局，解決了內容與表現分離的問題。css 可以重複使用，避免 冗餘...