1. 塊級(jí)元素 和 行內(nèi)元素 和 行內(nèi)塊元素
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型碗暗，它們也稱為塊元素?和?行內(nèi)元素
另外還有一個(gè)結(jié)合體：行內(nèi)塊元素
1.1 塊級(jí)、行內(nèi)梢夯、行內(nèi)塊元素
1.1.1 塊級(jí)元素（block）
特點(diǎn)：
總是從新行開始言疗，每個(gè)塊級(jí)元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行
可以對(duì)其設(shè)置寬度(寬度默認(rèn)是容器的100%)、高度颂砸、外邊距噪奄、內(nèi)邊距、背景色沾凄、對(duì)齊等屬性
可以容納行內(nèi)元素(inline-block)和其他塊元素
常見塊級(jí)元素：
h1~h6, p, div, ul, ol, 其中div是最典型的塊級(jí)元素
1.1.2 行內(nèi)元素（inline）
特點(diǎn)：
和相鄰行內(nèi)元素在一行上梗醇。行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)特的區(qū)域知允，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)
一般不可以設(shè)置寬度(默認(rèn)寬度是本身內(nèi)容的寬度)撒蟀、高度、對(duì)齊等屬性
水平方向上的padding和margin可以設(shè)置温鸽，垂直方向無(wú)效
行內(nèi)元素只能容納文本或則其他行內(nèi)元素保屯，(a標(biāo)簽例外, a里面可以放塊級(jí)元素)
常見行內(nèi)元素：
a, strong, b, em, i, del, s, ins, u, span其中span是最典型行內(nèi)元素
1.1.3 塊級(jí)元素和行內(nèi)元素對(duì)比
塊級(jí)元素獨(dú)占一行，有寬高涤垫；行內(nèi)元素一行可有多個(gè)姑尺，沒寬高
PS：特別注意！
1. 只有文字才能組成段落蝠猬，因此p里面不能放塊級(jí)元素切蟋，同理還有（h1~h6, dt）他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素
2. 鏈接里不能再放鏈接榆芦，a里不能再放a
3. 行內(nèi)元素 和 行內(nèi)塊元素 可以看做類似于文本柄粹，但是塊級(jí)元素不能當(dāng)做文本處理
4. a里面可以放塊級(jí)元素
1.1.4 行內(nèi)塊元素（inline-block）
行內(nèi)元素有幾個(gè)特殊標(biāo)簽：img, input, td喘鸟， 可以對(duì)他們?cè)O(shè)置寬高和對(duì)齊等屬性，有些資料可能稱他們?yōu)樾袃?nèi)塊元素驻右。
特點(diǎn)：
和相鄰元素（行內(nèi)塊）在一行上什黑，但是之間會(huì)有空白鏈接
默認(rèn)高度就是它本身內(nèi)容的寬度
高度，行高堪夭，外邊距以及內(nèi)邊距都可以控制
上例以input為例愕把，既有塊級(jí)元素的特性(能改寬高)， 又有行內(nèi)元素的特性（一行能顯示多個(gè)）
1.2. 顯示模式的轉(zhuǎn)換
上例：
1. 將塊級(jí)元素div轉(zhuǎn)為行內(nèi)元素森爽，丟失塊級(jí)的特性擁有行內(nèi)特性
2. 將行內(nèi)元素span轉(zhuǎn)為塊級(jí)元素恨豁，丟失行內(nèi)特性擁有塊級(jí)的特性
3. 將行內(nèi)元素轉(zhuǎn)為行內(nèi)塊元素，保留行內(nèi)元素特性同時(shí)擁有塊級(jí)元素特性
1.3 綜合練習(xí)
1.3.1 例一
1.3.2 例二導(dǎo)航欄案例
提示：
1.?background-image: url();
2. 行內(nèi)元素 和 行內(nèi)塊元素可以當(dāng)做文本做對(duì)齊等樣式處理爬迟，但塊級(jí)元素不行
3. 高度居中對(duì)齊：行高等于盒子的高度圣絮，可以讓單行文本垂直居中
2. 行高的測(cè)量、行高顯示的原理
用于文本垂直居中
上圖的第一部分：line-height沒有設(shè)置雕旨，默認(rèn)值為font-size: 16px扮匠，文本在元素作用區(qū)域中置頂顯示
第二部分：line-height指定為元素的height: 50px， 則文本整個(gè)行高跟元素的行高相等凡涩，(50-16)/2=17, 17就是文本內(nèi)容與上下邊距的距離棒搜，是相等的
當(dāng)
font-size≤line-height<height： 文本內(nèi)容位置偏上
line-height=height：文本內(nèi)容居中
line-height≥height：文本內(nèi)容偏下
3. CSS的三大特性
3.1 層疊性
層疊性是瀏覽器處理沖突的一個(gè)能力，如果一個(gè)屬性通過2個(gè)相同選擇器設(shè)置到同一個(gè)元素上活箕，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉
原則：
1. 樣式?jīng)_突力麸，遵循就近原則。哪個(gè)樣式后定義育韩，就執(zhí)行哪個(gè)樣式（長(zhǎng)江后浪推前浪克蚂，前浪死在沙灘上）
2. 樣式不沖突，不會(huì)層疊
3.2 繼承性
書寫CSS樣式時(shí)筋讨，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式埃叭，一般用于文本相關(guān)的屬性可繼承（例如文本顏色和字號(hào)）
原則：
1. 想要設(shè)置一個(gè)可繼承的屬性，只需要將它應(yīng)用于父元素即可悉罕。
2. 文本相關(guān)的屬性一般可繼承（text-, font-, line-）赤屋，會(huì)降低CSS樣式的復(fù)雜性。
3. 不是所有屬性都可繼承壁袄，height屬性不可繼承类早。
3.3 優(yōu)先級(jí)
優(yōu)先級(jí)就是看權(quán)重，權(quán)重有一套特殊性計(jì)算公式：
總結(jié)權(quán)重嗜逻， 有小到大：
* 0000
div 0001
.one 0010
#two 0100
行內(nèi)選擇器 1000
!Important 無(wú)窮大涩僻，最大權(quán)重
PS：
1. 如果權(quán)重相同，根據(jù)層疊性，采用就近原則
2. 相同類型的選擇器同時(shí)使用逆日，會(huì)有疊加效果
3. 數(shù)位之間沒有進(jìn)制說法：0,0,0,5+0,0,0,5=0,0,0,10 而不是0,0,1,0恼琼。 因此不會(huì)出現(xiàn)10個(gè)div能趕上一個(gè)類選擇器的情況
4. 繼承的權(quán)重是0
3.4 經(jīng)典優(yōu)先級(jí)6題
不難噩死，主要注意一下繼承權(quán)重為0的問題
見我的前端面試題
4. background背景
之前已經(jīng)熟練應(yīng)用了background-color和background-image
4.1 backgroud-image和backgroud-repeat配合設(shè)置背景圖片是否重復(fù)
略
4.2 backgroud-image和backgroud-position配合設(shè)置圖片在塊級(jí)元素中的位置
PS：
1. position后跟方位名詞， 他們之間可以沒有前后順序
2. position如果只寫一個(gè)方位名詞神年， 另外一個(gè)默認(rèn)是居中的
3. position也可以跟px值已维，第一個(gè)值是x方向，第二個(gè)值是y方向
1.3 一個(gè)綜合練習(xí)
常見官網(wǎng)或者個(gè)人網(wǎng)站的主頁(yè)架子：
1.4 background-image 與 background-attachment 配合設(shè)置背景圖是固定已日，還是跟著滾動(dòng)條走
略垛耳，一般用默認(rèn)scroll，特殊需求需要設(shè)置為fixed
1.5 background連寫（簡(jiǎn)寫）
1.6 背景透明度設(shè)置
語(yǔ)法：
rgba(r1, g2, b3, a4)
r1/g2/b3: 是rgb的數(shù)值
a4: 是alpha的值飘千，介于0~1之間堂鲜，例如0.2， 0.8护奈〉蘖可省略0（.2, .8）
google瀏覽器支持0~1之間的小數(shù)值孕索，例如0.3 0.8 代表30% 80%
