一.背景

? ?這里將陸續介紹前端CSS中相關知識，先介紹CSS2.1，后續會介紹CSS3的相關屬性，通過該系列的文章，希望能給準備轉戰前端的人員一些幫助，同時也幫助自己梳理知識，文章中如有錯誤，歡迎指出。

? ?下面是CSS2.1第一個階段的知識框圖，后面會陸續更新該系列后續文章。

? ?

?

二.整體介紹

? ?(一).基礎介紹

　 1. 七個基本的入門屬性首先要記住，顏色：color，背景顏色：background-color，字體大小：font-size，加粗：font-weight:bold，傾斜：font-style:italic， 文字居中：text-align:center，

　　 下劃線：text-decoration：underline。

? ? 2. 相對路徑的寫法： ?../../ ? ? a/b/

? ? 3. 七個基本選擇器：id選擇器、標簽選擇器、類選擇器、交集選擇器、并集選擇器、后代選擇器、通配符。

? ? 4. 四個CSS3選擇器：子代選擇器、序選擇器、相鄰選擇器、兄弟選擇器。

? ? 5. 行高(line-height)：行高的作用范圍、單行文本豎直居中、多行文本豎直居中。

? ? 6. font屬性：等價于(font-size, line-height, font-family)，比例寫法，font-family的規則和特殊寫法。

? ? 7. a標簽：偽類(link、visited、hover、active)、a標簽的美化(常規寫法和簡介寫法)。

?　8. background屬性：background-color、background-image、background-repeat、background-attachment、background-position；顏色的三種表示方法。?

??(二).繼承性和層疊性

　 1. 繼承性：作用范圍。

? ? 2. 權重的計算規則：①如果標簽被選中，比較權重，id選擇器>類選擇器>標簽選擇器，如果權重相同，以后面寫的為主。②如果標簽沒被選中，權重為0，就近原則，哪個離目標標簽近，以哪個為主。

? ? 3. !important的性質。

? (三).盒模型

　 1. 包含：width、height、padding、border、margin。

? ? 2. padding的兩種寫法。

? ? 3. border的三種拆分形式。

? ? 4. margin在標準流中的塌陷現象以及利用“margin:0 auto”特性居中的條件。

? ? 5. 瀏覽器兼容性。

?(四).標準文檔流

　 1. 塊級元素和行內元素各自的特性以及分別包括什么。

? ? 2. 相互轉換的方法： 塊→行(display:inline)、行→塊(display:block)。

? ? 3. 引出脫離標準文檔流的三種方法：浮動、絕對定位、固定定位。

?(五).浮動

　 1. 浮動(float)的性質：脫標、相互依靠、字圍效果。

? ? 2. 清除浮動的五種方法以及各自的優缺點。

? ? 3. 引出脫離標準文檔流的三種方法：浮動、絕對定位、固定定位。

?(六).定位

　 1. 相對定位：含義、性質(不脫標，老家留坑，形影分離)、作用(微調位置、字絕父相)。

? ? 2. 絕對定位：性質(脫標、居中的用法)、參考點(兩種情況)。

? ? 3. 固定定位：性質(脫標)、作用。

? ? 4. z-index：性質、從父現象。

?

后續文章，會詳細介紹CSS2.1基礎入門的六個板塊。

?

總結

以上是生活随笔為你收集整理的第二节 CSS入门介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。