width：auto
auto默認值包含四種表現(xiàn)形式：
- 充分利用可用空間：fill-available
- 收縮與包裹: fit-content
- 收縮到最信恿铩：min-content
- 超出容器限制
height：100%
如果父元素高度為auto轻庆，只要子元素在文檔流中畜挥，百分比值會被忽略殊校。
使height：100%生效：
- 設(shè)置顯示的高度值
html,body {
height: 100%;
}
- 使用絕對定位
div {
position: absolute;
height: 100%;
}
外部尺寸與流體特性
- 正常流寬度：margin/border/padding/content內(nèi)容區(qū)域自動分配水平空間
- 格式化寬度：僅出現(xiàn)在“絕對定位模型”中
內(nèi)部尺寸與流體特性
- 包裹性：包裹+自適應(yīng)
- 首選最小寬度：每個漢字寬度症革，每個英文字符單元
- 最大寬度：最大的連續(xù)內(nèi)聯(lián)盒子的寬度
內(nèi)聯(lián)元素
可以和文字在同一行顯示
內(nèi)聯(lián)盒模型
- 內(nèi)容區(qū)域
- 內(nèi)聯(lián)盒子
- 行框盒子
- 包含盒子
幽靈空白節(jié)點
在HTML5文檔聲明中琅坡，內(nèi)聯(lián)元素的所有解析和渲染表現(xiàn)就如同每個行框盒子的前面有一個“空白節(jié)點”春叫。這個空白節(jié)點永遠透明，不占寬度碾褂，無法獲取兽间，但確實存在，表現(xiàn)如文本節(jié)點一樣斋扰。
替換元素
根據(jù)是否具有可替換內(nèi)容，可以把元素分為替換元素和非替換元素。
典型的替換元素：<img>传货、<object>屎鳍、<video>、<iframe>问裕、<textarea>逮壁、<input>······
替換元素特性：
- 內(nèi)容可替換
- 內(nèi)容的外觀不受頁面上的css影響
- 有自己的尺寸
- 在很多css屬性上有自己的一套規(guī)則
替換元素和非替換元素的區(qū)別：
- 替換元素和非替換元素之間只隔了一個src屬性
- 替換元素和非替換元素之間只隔了一個CSS
content屬性
content內(nèi)容生成技術(shù)
- content輔助元素生成
- content字符內(nèi)容生成
- content圖片生成
- content開啟閉合符號生成
- content計數(shù)器
margin
margin合并的3種場景
- 相鄰兄弟元素margin合并
- 父級和第一個/最后一個子元素
- 空塊級元素的margin合并
margin合并的計算規(guī)則：
- 正正取大
- 正負相加
- 負負最負
margin：auto的填充規(guī)則
- 如果一側(cè)定值，一側(cè)auto粮宛，則auto為剩余空間大小
可用于實現(xiàn)左對齊或右對齊 - 如果兩側(cè)均是auto窥淆，則平分剩余空間
注：觸發(fā)margin：auto計算有一個前提，width和height不能是auto
margin無效情形：
-
display計算值inline的非替換元素的垂直margin無效 - 表格中
<tr>和<td>元素設(shè)置display計算值是table-cell和table-row的元素的margin都是無效的 - margin合并的時候
- 絕對定位元素非定位方向的margin值“無效”
- 定高容器的子元素的
margin-bottom或者定寬容器的子元素的margin-right的定位“失效” - 鞭長莫及導(dǎo)致的margin失效
- 內(nèi)聯(lián)特性導(dǎo)致的margin失效
vertical-align
vertical-align屬性值分為4類：
- 線類：
baseline,top,middle,bottom - 文本類：
text-top,text-bottom - 上下標類：
sub,super - 數(shù)值百分比類： 如
20px,2em,20%
vertical-align作用的前提： 只能應(yīng)用于內(nèi)聯(lián)元素以及display值為table-cell的元素
層疊上下文和層疊水平
層疊順序：
- 正
z-index -
z-index：0或者z-index:auto或者不依賴z-index的層疊上下文 -
inline水平盒子 -
float浮動盒子 -
block塊狀盒子 - 負
z-index - 層疊上下文
background/boder
層疊領(lǐng)域的黃金準則
- 誰大誰上
- 后來居上
z-index不犯二準則： 對于非浮層元素巍杈，避免設(shè)定z-index值忧饭，z-index值沒有任何道理需要超過2。
流向的改變
directionunicode-bidiwriting-mode
