1. 塊級元素 和 行內元素 和 行內塊元素

HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱為塊元素?和?行內元素

另外還有一個結合體：行內塊元素

1.1 塊級、行內、行內塊元素

1.1.1 塊級元素（block）

特點：

總是從新行開始，每個塊級元素通常都會獨自占據一整行或多整行

可以對其設置寬度(寬度默認是容器的100%)、高度、外邊距、內邊距、背景色、對齊等屬性

可以容納行內元素(inline-block)和其他塊元素

常見塊級元素：

h1~h6, p, div, ul, ol, 其中div是最典型的塊級元素

1.1.2 行內元素（inline）

特點：

和相鄰行內元素在一行上。行內元素（內聯元素）不占有獨特的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構

一般不可以設置寬度(默認寬度是本身內容的寬度)、高度、對齊等屬性

水平方向上的padding和margin可以設置，垂直方向無效

行內元素只能容納文本或則其他行內元素，(a標簽例外, a里面可以放塊級元素)

常見行內元素：

a, strong, b, em, i, del, s, ins, u, span其中span是最典型行內元素

1.1.3 塊級元素和行內元素對比

塊級元素獨占一行，有寬高；行內元素一行可有多個，沒寬高

PS：特別注意！

1. 只有文字才能組成段落，因此p里面不能放塊級元素，同理還有（h1~h6, dt）他們都是文字類塊級標簽，里面不能放其他塊級元素

2. 鏈接里不能再放鏈接，a里不能再放a

3. 行內元素 和 行內塊元素 可以看做類似于文本，但是塊級元素不能當做文本處理

4. a里面可以放塊級元素

1.1.4 行內塊元素（inline-block）

行內元素有幾個特殊標簽：img, input, td， 可以對他們設置寬高和對齊等屬性，有些資料可能稱他們為行內塊元素。

特點：

和相鄰元素（行內塊）在一行上，但是之間會有空白鏈接

默認高度就是它本身內容的寬度

高度，行高，外邊距以及內邊距都可以控制

上例以input為例，既有塊級元素的特性(能改寬高)， 又有行內元素的特性（一行能顯示多個）

1.2. 顯示模式的轉換

模式間轉化例子

上例：

1. 將塊級元素div轉為行內元素，丟失塊級的特性擁有行內特性

2. 將行內元素span轉為塊級元素，丟失行內特性擁有塊級的特性

3. 將行內元素轉為行內塊元素，保留行內元素特性同時擁有塊級元素特性

1.3 綜合練習

1.3.1 例一

1.3.2 例二導航欄案例

實現一個導航欄如圖

提示：

1.?background-image: url();

2. 行內元素 和 行內塊元素可以當做文本做對齊等樣式處理，但塊級元素不行

3. 高度居中對齊：行高等于盒子的高度，可以讓單行文本垂直居中

2. 行高的測量、行高顯示的原理

用于文本垂直居中

line-height：基線與基線之間的距離

上圖的第一部分：line-height沒有設置，默認值為font-size: 16px，文本在元素作用區域中置頂顯示

第二部分：line-height指定為元素的height: 50px， 則文本整個行高跟元素的行高相等，(50-16)/2=17, 17就是文本內容與上下邊距的距離，是相等的

當

font-size≤line-height<height： 文本內容位置偏上

line-height=height：文本內容居中

line-height≥height：文本內容偏下

3. CSS的三大特性

3.1 層疊性

層疊性是瀏覽器處理沖突的一個能力，如果一個屬性通過2個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

div有沖突的樣式

原則：

1. 樣式沖突，遵循就近原則。哪個樣式后定義，就執行哪個樣式（長江后浪推前浪，前浪死在沙灘上）

2. 樣式不沖突，不會層疊

3.2 繼承性

書寫CSS樣式時，子標簽會繼承父標簽的某些樣式，一般用于文本相關的屬性可繼承（例如文本顏色和字號）

繼承性

原則：

1. 想要設置一個可繼承的屬性，只需要將它應用于父元素即可。

2. 文本相關的屬性一般可繼承（text-, font-, line-），會降低CSS樣式的復雜性。

3. 不是所有屬性都可繼承，height屬性不可繼承。

3.3 優先級

優先級簡單示例

優先級說明

優先級就是看權重，權重有一套特殊性計算公式：

Specificity計算公式

總結權重， 有小到大：

* 0000

div 0001

.one 0010

#two 0100

行內選擇器 1000

!Important 無窮大，最大權重

PS：

1. 如果權重相同，根據層疊性，采用就近原則

2. 相同類型的選擇器同時使用，會有疊加效果

權重疊加效果

權重疊加效果2

3. 數位之間沒有進制說法：0,0,0,5+0,0,0,5=0,0,0,10 而不是0,0,1,0。 因此不會出現10個div能趕上一個類選擇器的情況

4. 繼承的權重是0

非繼承， 顯示紅色

繼承權重為0，不會顯示繼承的綠色，而顯示p自己的紅色

即便繼承中的樣式加上了import，依然屬于繼承，權重依然為0

3.4 經典優先級6題

不難，主要注意一下繼承權重為0的問題

見我的前端面試題

4. background背景

之前已經熟練應用了background-color和background-image

4.1 backgroud-image和backgroud-repeat配合設置背景圖片是否重復

略

4.2 backgroud-image和backgroud-position配合設置圖片在塊級元素中的位置

PS：

1. position后跟方位名詞， 他們之間可以沒有前后順序

2. position如果只寫一個方位名詞， 另外一個默認是居中的

3. position也可以跟px值，第一個值是x方向，第二個值是y方向

1.3 一個綜合練習

常見官網或者個人網站的主頁架子：

1.4 background-image 與 background-attachment 配合設置背景圖是固定，還是跟著滾動條走

略，一般用默認scroll，特殊需求需要設置為fixed

1.5 background連寫（簡寫）

1.6 背景透明度設置

語法：

rgba(r1, g2, b3, a4)

r1/g2/b3: 是rgb的數值

a4: 是alpha的值，介于0~1之間，例如0.2， 0.8。可省略0（.2, .8）

google瀏覽器支持0~1之間的小數值，例如0.3 0.8 代表30% 80%