摘要：塊級(jí)元素基本概念塊級(jí)元素是一個(gè)水平流上只能多帶帶顯示一個(gè)元素，多個(gè)塊級(jí)元素則換行顯示。其中內(nèi)部尺寸由內(nèi)部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設(shè)為是無(wú)效的。此時(shí)的就會(huì)有計(jì)算值，即使祖先元素的計(jì)算為也是如此。

塊級(jí)元素：是一個(gè)水平流上只能多帶帶顯示一個(gè)元素，多個(gè)塊級(jí)元素則換行顯示。

塊級(jí)元素”和“display 為 block 的元素”不是一個(gè)概念。

每個(gè)元素都兩個(gè)盒子，外在盒子和內(nèi)在盒子。外在盒子負(fù)責(zé)元素是可以一行顯示，還是只能換行顯示；內(nèi)在盒子負(fù)責(zé)寬高、內(nèi)容呈現(xiàn)什么的。

display屬性值是inline-block的元素既能和圖文一行顯示，又能直接設(shè)置 width/height。因?yàn)橛袃蓚€(gè)盒子，外面的盒子是 inline 級(jí)別，里面的盒子是 block 級(jí)別

而盒子上的 width/height 作用在了內(nèi)在盒子上。

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

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

1、正常流寬度。
“外部尺寸”的塊級(jí)元素一旦設(shè)置了寬度，流動(dòng)性就丟失了

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

對(duì)a標(biāo)簽設(shè)置為block之后，自然會(huì)填充父元素，width: 100%不僅僅是多余，更會(huì)造成元素在流動(dòng)性上的丟失。

所謂流動(dòng)性，并不是看上去的寬度 100%顯示這么簡(jiǎn)單，而是一種 margin/border/padding
和 content 內(nèi)容區(qū)域自動(dòng)分配水平空間的機(jī)制

eg.設(shè)置了一個(gè)塊級(jí)元素的width為100%之后，雖然看上去與width:auto沒(méi)有差別，都占父元素的100%，但是當(dāng)為改元素設(shè)置border、margin時(shí)，其實(shí)際尺寸就會(huì)超過(guò)父元素，從而產(chǎn)生滾動(dòng)條。

父元素

不限定width時(shí)， 內(nèi)容區(qū)域自動(dòng)分配

限定時(shí) 父元素出滾動(dòng)條

設(shè)置了外部尺寸之后，會(huì)影響元素的寬度

2、格式化寬度

格式化寬度僅出現(xiàn)在“絕對(duì)定位模型”中，也就是出現(xiàn)在 position屬性值為 absolute 或 fixed（position默認(rèn)值為static） 的元素中。當(dāng) left/top 或 top/bottom 對(duì)立方位的屬性值同時(shí)存在的時(shí)候，元素的寬度表現(xiàn)為“格式化寬度”，其寬度大小相對(duì)于最近的具有定位特性（position 屬性值不是 static）的祖先元素計(jì)算

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

內(nèi)部尺寸：假如這個(gè)元素里面沒(méi)有內(nèi)容，寬度就是 0，那就是應(yīng)用的“內(nèi)部尺寸”。

內(nèi)部尺寸的三種表現(xiàn)形式：

1、包裹性

對(duì)于一個(gè)元素，如果其 display 屬性值是 inline、inline-block，那么即使其里面內(nèi)容
再多，只要是正常文本，寬度也不會(huì)超過(guò)容器。

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

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

2、首選最小寬度

所謂“首選最小寬度”，指的是元素最適合的最小寬度。
在 CSS 世界中，圖片和文字的權(quán)重要遠(yuǎn)大于布局，有圖文存在時(shí)，不會(huì)讓width：auto為0的

（3）最大寬度
“最大寬度”實(shí)際等同于“包裹性”元素設(shè)置 white-space:nowrap 聲明后的寬度。

實(shí)際運(yùn)用的話，我認(rèn)為跟flex布局有點(diǎn)像，用于不定寬度內(nèi)元素的橫向布局。

所謂“寬度分離原則”，就是 CSS 中的 width 屬性不與影響寬度的 padding/border（有
時(shí)候包括 margin）屬性共存，也就是不能出現(xiàn)以下的組合：

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

或者

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

分離，width 獨(dú)立占用一層標(biāo)簽，而padding、border、margin 利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。

缺點(diǎn)：多使用了一層標(biāo)簽， HTML 的成本也是成本，過(guò)深的嵌套是會(huì)增加頁(yè)面渲染和維護(hù)成本的。但是一般來(lái)說(shuō)，只要給最外面控制寬度的一層標(biāo)簽再加一層，所以與后期維護(hù)相比，成本可忽略不計(jì)。

其實(shí)對(duì)于寬度分離來(lái)說(shuō)，在決定寬度的div上設(shè)置box-sizing就可以不再外面套一層標(biāo)簽了。所起到的效果是一樣的。

。對(duì)于 width 屬性，
就算父元素 width 為 auto，其百分比值也是支持的；但是，對(duì)于 height 屬性，如果父元素height 為 auto，只要子元素在文檔流中，其百分比值完全就被忽略了。
如果包含塊的高度沒(méi)有顯式指定（即高度由內(nèi)容決定），并且該元素不是絕對(duì)定位，則計(jì)算值為auto。

"auto" * 100/100 = NaN

所以子元素的高度設(shè)為100%是無(wú)效的。

（1）設(shè)定顯式的高度值。
（2）使用絕對(duì)定位。

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

此時(shí)的 height:100%就會(huì)有計(jì)算值，即使祖先元素的 height 計(jì)算為 auto 也是如此。

需要注意的是，絕對(duì)定位元素的百分比計(jì)算和非絕對(duì)定位元素的百分比計(jì)算是有區(qū)別的，區(qū)別
在于絕對(duì)定位的寬高百分比計(jì)算是相對(duì)于 padding box 的，也就是說(shuō)會(huì)把 padding 大小值計(jì)算在內(nèi)，但是，非絕對(duì)定位元素則是相對(duì)于 content box 計(jì)算的。

父元素

子元素

min-width/max-width出現(xiàn)的場(chǎng)景一定是自適應(yīng)布局或流體布局中。

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

為了避免圖片在移動(dòng)端展示過(guò)大影響體驗(yàn)，經(jīng)常會(huì)有下面的max-width限制：

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

height:auto 是必需的，否則，如果原始圖片有設(shè)定 height，max-width 生效的時(shí)候，
圖片就會(huì)被水平壓縮。

max-width 會(huì)覆蓋 width，而且這種覆蓋不是普通的覆蓋，是會(huì)超越！important的效果

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

其中展開后的 max-height 值，我們只需要設(shè)定為保證比展開內(nèi)容高度大的值就可以，因?yàn)?b>max-height 值比 height 計(jì)算值大的時(shí)候，元素的高度就是 height 屬性的計(jì)算高度，在本交互中，也就是 height:auto 時(shí)候的高度值。于是，一個(gè)高度不定的任意元素的展開動(dòng)畫效果就實(shí)現(xiàn)了。

不過(guò)如果 max-height 值太大，在收起的時(shí)候可能會(huì)有“效果延遲”的問(wèn)題。