《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

塊級元素基本概念

塊級元素：是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。

塊級元素」和「display 爲 block 的元素」不是一個概念。

每一個元素都兩個盒子，外在盒子和內在盒子。外在盒子負責元素是能夠一行顯示，仍是隻能換行顯示；內在盒子負責寬高、內容呈現什麼的。

display屬性值是inline-block的元素既能和圖文一行顯示，又能直接設置 width/height。由於有兩個盒子，外面的盒子是 inline 級別，裏面的盒子是 block 級別

而盒子上的 width/height 做用在了內在盒子上。

---

width

width 的默認值是 auto，看似簡單的默認值至少包含了如下 4 種不一樣的寬度表現。
（1）充分利用可用空間。
（2）收縮與包裹。
（3）收縮到最小。
（4）超出容器限制

尺寸也分「內部尺寸」和「外部尺寸」。其中「內部尺寸」由內部元素決定；還有一類叫做「外部尺寸」寬度由外部元素決定。

width影響的外部尺寸

一、正常流寬度。
「外部尺寸」的塊級元素一旦設置了寬度，流動性就丟失了

a { 
  display: block; 
  width: 100%; 
}

對a標籤設置爲block以後，天然會填充父元素，width: 100%不只僅是多餘，更會形成元素在流動性上的丟失。

所謂流動性，並非看上去的寬度 100%顯示這麼簡單，而是一種 margin/border/padding
和 content 內容區域自動分配水平空間的機制

eg.設置了一個塊級元素的width爲100%以後，雖然看上去與width:auto沒有差異，都佔父元素的100%，可是當爲改元素設置border、margin時，其實際尺寸就會超過父元素，從而產生滾動條。

父元素

不限定width時， 內容區域自動分配

限定時 父元素出滾動條

設置了外部尺寸以後，會影響元素的寬度

二、格式化寬度

格式化寬度僅出如今「絕對定位模型」中，也就是出如今 position屬性值爲 absolute 或 fixed（position默認值爲static） 的元素中。當 left/top 或 top/bottom 對立方位的屬性值同時存在的時候，元素的寬度表現爲「格式化寬度」，其寬度大小相對於最近的具備定位特性（position 屬性值不是 static）的祖先元素計算

上面的普通流同樣，「格式化寬度」具備徹底的流體性，也就是 margin、border、padding 和 content 內容區域一樣會自動分配水平（和垂直）空間。

width影響的內部尺寸

內部尺寸：假如這個元素裏面沒有內容，寬度就是 0，那就是應用的「內部尺寸」。

內部尺寸的三種表現形式：

一、包裹性

對於一個元素，若是其 display 屬性值是 inline、inline-block，那麼即便其裏面內容
再多，只要是正常文本，寬度也不會超過容器。

eg.包裹性的實踐：文字少的時候居中顯示，文字超過一行的時候居左顯示

.box { 
 text-align: center; 
} 
.content { 
 display: inline-block; 
 text-align: left; 
}

二、首選最小寬度

所謂「首選最小寬度」，指的是元素最適合的最小寬度。
在 CSS 世界中，圖片和文字的權重要遠大於佈局，有圖文存在時，不會讓width：auto爲0的

（3）最大寬度
「最大寬度」實際等同於「包裹性」元素設置 white-space:nowrap 聲明後的寬度。

實際運用的話，我認爲跟flex佈局有點像，用於不定寬度內元素的橫向佈局。

寬度分離原則

所謂「寬度分離原則」，就是 CSS 中的 width 屬性不與影響寬度的 padding/border（有
時候包括 margin）屬性共存，也就是不能出現如下的組合：

.box { width: 100px; border: 1px solid; }

或者

.box { width: 100px; padding: 20px; }

分離，width 獨立佔用一層標籤，而padding、border、margin 利用流動性在內部自適應呈現。

缺點：多使用了一層標籤， HTML 的成本也是成本，過深的嵌套是會增長頁面渲染和維護成本的。可是通常來講，只要給最外面控制寬度的一層標籤再加一層，因此與後期維護相比，成本可忽略不計。

改變 width/height 做用細節的 box-sizing

其實對於寬度分離來講，在決定寬度的div上設置box-sizing就能夠再也不外面套一層標籤了。所起到的效果是同樣的。

height

height:100%

。對於 width 屬性，
就算父元素 width 爲 auto，其百分比值也是支持的；可是，對於 height 屬性，若是父元素height 爲 auto，只要子元素在文檔流中，其百分比值徹底就被忽略了。
若是包含塊的高度沒有顯式指定（即高度由內容決定），而且該元素不是絕對定位，則計算值爲auto。

'auto' * 100/100 = NaN

因此子元素的高度設爲100%是無效的。

如何讓元素支持 height:100%效果

（1）設定顯式的高度值。
（2）使用絕對定位。

div { 
 border: 1px solid blue;
 height: 100%; 
 position: absolute; 
}

此時的 height:100%就會有計算值，即便祖先元素的 height 計算爲 auto 也是如此。

須要注意的是，絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區別的，區別
在於絕對定位的寬高百分比計算是相對於 padding box 的，也就是說會把 padding 大小值計算在內，可是，非絕對定位元素則是相對於 content box 計算的。

父元素

子元素

CSS min-width/max-width和min-height/max-height 二三事

min-width/max-width出現的場景必定是自適應佈局或流體佈局中。

.container {
    min-width: 1200px;
    max-width: 1400px;
}

爲了不圖片在移動端展現過大影響體驗，常常會有下面的max-width限制：

img {
    max-width: 100%;
    height: auto !important;
}

height:auto 是必需的，不然，若是原始圖片有設定 height，max-width 生效的時候，
圖片就會被水平壓縮。

max-width 會覆蓋 width，並且這種覆蓋不是普通的覆蓋，是會超越！important的效果

任意高度元素的展開收起動畫技術

.element { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .25s; 
} 
.element.active { 
  max-height: 666px; /* 一個足夠大的最大高度值 */ 
}

其中展開後的 max-height 值，咱們只須要設定爲保證比展開內容高度大的值就能夠，由於max-height 值比 height 計算值大的時候，元素的高度就是 height 屬性的計算高度，在本交互中，也就是 height:auto 時候的高度值。因而，一個高度不定的任意元素的展開動畫效果就實現了。

不過若是 max-height 值太大，在收起的時候可能會有「效果延遲」的問題。