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

塊級元素基本概念

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

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

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

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

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

---

width

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

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

width影響的外部尺寸

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

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

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

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

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

父元素

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

限定時 父元素出滾動條

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

2、格式化寬度

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

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

width影響的內部尺寸

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

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

1、包裹性

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

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

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

2、首選最小寬度

所謂“首選最小寬度”，指的是元素最適合的最小寬度。
在 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 值太大，在收起的時候可能會有“效果延遲”的問題。