css世界 之 你所不知道的 width/height 用法

塊級元素與內聯元素

定義

1. 塊級元素：一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。
2. 內聯元素：能夠和文字在一行顯示，多個內聯元素能夠在一行顯示

這裏就要注意了： 塊級元素和display:block不是一個概念，塊級元素的display不必定是block值，也多是table，或者list-item等值，因此只要符合塊級元素的基本特徵，都屬於塊級元素的一種。

同理，內聯元素和display:inline也不是一個概念，內聯元素的display不必定是inline，也多是inline-block，因此span，a，input,button，img等都屬於內聯元素。

display不一樣值的盒子組成

首先，咱們引入一個抽象概念，其實每一個元素都是由兩層盒子組成：外在盒子與內在盒子，

1. 外在盒子：負責元素是否能夠在一行顯示，仍是隻能換行顯示
2. 內在盒子：負責元素的寬高，內容呈現等

可能還不是很理解吧，咱們來結合一個實際例子看一下：display:inline-block

咱們想一想爲何inline-block既能夠像塊級元素那樣設置寬高，又能夠像內聯元素那樣，在一行上顯示呢？咱們來經過咱們的兩層盒子理論來講一下：inline-block，其實就是由一個外層inline盒子，和一個內層block盒子組成，這樣外層盒子就能夠在一行中顯示了，同時咱們也能夠對內層block盒子設置寬高。

類比，咱們看一下其餘display屬性值：

1. display:block；其實等價於display:block-block，這樣咱們就既能夠保證換行顯示，也能夠設置寬高
2. display:table； 其實等價於display: block-table， 這樣能夠保證表格既能夠換行顯示，也能夠設置寬高
3. display:inline-table; 顧名思義，能夠保證表格在一行顯示，不換行，也能夠設置寬高。

相信你們經過這幾個例子，可以真正理解這兩層盒子的意思了吧，這裏還有一個注意點，width/height是做用在哪一個盒子上呢？ 很顯然，咱們上面已經提到了，它是做用與內層盒子。

除了經常使用的這些display屬性值，咱們這裏羅列的display的全部屬性值：

width/height的具體做用細節

1. 深藏不露的width:auto

在實際開發過程當中，width的默認值爲auto， 因此咱們可能也用的比較少，可是它實際在頁面中幾乎每一個頁面都會或多或少用到它的特性，因此咱們更須要了解它的特性，這樣纔有助於咱們能更好的理解爲何頁面會這樣渲染？爲何最後出來是這樣一個效果呢。

咱們首先來講兩個名詞：外部尺寸和內部尺寸

1. 外部尺寸：元素的寬度由外部元素所決定
2. 內部尺寸：元素的寬度由內部元素所決定，簡單來說就是 元素的尺寸由內部的元素決定，而非由外部的容器決定。如何快速判斷一個元素使用的是否 爲 「內部尺寸」 呢？很簡單，假如這個元素裏面沒有內容，寬度就是 0，那就是應用的「內 部尺寸」。

不一樣的元素在不一樣的場景下，會表現爲不一樣的尺寸，或者換句話說，元素默認的width:auto，在不一樣的場景下，也會表現爲不一樣的寬度。

接下來，咱們介紹一下常見的這種場景：

1. 外部尺寸：

a. 塊級元素：例如div，p等標籤默認寬度是100%於它的父元素，也就是說此時div的寬度徹底依託於外部尺寸的寬度，即此時表現爲外部尺寸

b. 格式化寬度：格式化寬度僅出如今「絕對定位模型」中，也就是出如今 position 屬性值爲 absolute 或 fixed 的元素中。在默認狀況下，絕對定位元素的寬度表現是「包 裹性」，寬度由內部尺寸決定，可是，有一種狀況其寬度是由外部尺寸決定的，是什麼情 況呢？對於非替換元素，當 left/top 或 top/bottom 對立方位的屬性值同時 存在的時候，元素的寬度表現爲「格式化寬度」，其寬度大小相對於最近的具備定位特性 （position 屬性值不是 static）的祖先元素計算。

2. 內部尺寸

全部表現爲內部尺寸的元素都有如下三個特性：

a. 包裹性：即元素寬度由內部元素決定，同時，它的寬度永遠小於它的父元素的寬度，就好像爲該元素設置了一個max-width:100%的效果相似。咱們常見的inline-block 元素，浮動元素以及絕對定位元素都具備包裹性，均有相似的智能寬度行爲。

想要更深入的理解，能夠參考實際案例：demo.cssworld.cn/3/2-5.php

b. 首選最小寬度

首選最小寬度是指元素最適合的最小寬度，有一個問題：假如父元素的寬度是0px，那麼它的子inline-block元素寬度是多少呢？會是0嗎？不會，在 CSS 世界中，圖片和文字的權重要遠大於佈局，所以，CSS 的設計者顯然是不會讓圖文在 width:auto 時寬度變成 0 的，此時所表現的寬度就是「首選最小寬度」。

c. 最大寬度

最大寬度就是元素能夠有的最大寬度。我本身是這麼理解的，「最大寬 度」實際等同於「包裹性」元素設置 white-space:nowrap 聲明後的寬 度。若是內部沒有塊級元素或者塊級元素沒有設定寬度值，則「最大寬度」其實是最大的連 續內聯盒子的寬度。

2. 實際代碼中如何應用width屬性

首先咱們再強調一下box-sizing的做用細節：display: content-box/padding-box/border-box，默認狀況下，咱們所設置的width都是針對content-box而言的，若是想設置其餘寬度，須要手動更改box-sizing的值，這點你們基本都知道了，

這裏咱們重點說一下如何在實際代碼中設置寬度呢？

1. 記住「無寬度」這條準則，

也就是說咱們在實際代碼中，儘可能不要設置width，由於一旦設置了定寬，那麼自己的流式佈局特性就消失了，因此咱們能不用就不用，

可是，在某些場景下，確實須要咱們設置一個定寬，那麼在這樣的場景下，咱們要遵循另一個原則：寬度分離原則

2. 寬度分離原則

即css中的width屬性不與影響寬度的padding/border，有的時候也包含margin一塊兒使用，

也就是說下面這樣的代碼儘可能不要寫

box { width: 100px; border: 1px solid; }
.box { width: 100px; padding: 20px; }
複製代碼

那有什麼替代方案呢？咱們能夠再包一層父節點

.father {width:100px}
.father .box {border: 1px solid 100px; padding: 20px}
複製代碼

或者，咱們手動修改box-sizing的值

.box{
    box-sizing: border-box;
    width: 100px;
    border: 1px solid;
    padding: 20px
}
複製代碼

3. 替換與非替換元素的寬度表現

對於非替換元素，若是咱們將display設置爲block,那麼它則會具備流動性，即寬度是由外部元素決定，可是替換元素就不同了，替換元素不管display是inline仍是block, 它的寬度是有內部元素所決定的，它不受display的影響。

例如

input {
    display:block;
}
複製代碼

這個時候，咱們將一個替換元素的display手動變成了block，那麼它的寬度會變成100%於它的父元素嗎？哈哈，很顯然不會，它仍是原來的尺寸，咱們要記住替換元素的這個特性。

這個時候，如何讓一個替換元素的寬度撐滿水平方向呢？有人可能想到，直接width:100%啊，可是有個問題，就是input自己是有padding和border的，若是咱們直接設置width:100%，實際效果可能光標就直接緊貼兩邊了，那麼，如何優化呢？把box-sizing改爲border-box啊，

是的，這也是box-sizing:border-box最經常使用的一個應用場景：即解決替換元素的寬度自適應問題，因此咱們在實際開發中，沒有必要設置 * {box-sizing:border-box}, 即沒有必要將全部元素的box-sizing屬性值都變成border-box, 只須要將替換元素的box-sizing重置，即

input, textarea, img, video, object { 
    box-sizing: border-box; 
}
複製代碼

4. height:auto 與 height:100%

height:auto 即元素的高度是由內容的高度所決定的，固然，對於絕對定位元素來講，也會存在格式化高度的效果，格式化高度和格式化寬度相似，參考咱們以前講的便可。

height 和 width 還有一個比較明顯的區別就是對百分比單位的支持。對於 width 屬性， 就算父元素 width 爲 auto，其百分比值也是支持的；可是，對於 height 屬性，若是父元素height 爲 auto，只要子元素在文檔流中，其百分比值徹底就被忽略了。

那麼，如何讓height：100%生效呢？

• 1. 給父元素設置顯式的高度

.parent {
    height: 300px;
    padding: 20px;
}
.child {
    height: 100%;// 此時子元素高度爲300px；
}
複製代碼

• 2. 給本身使用絕對定位

.parent {
    height: 300px;
    padding: 20px;
    position: relative;
}
.child {
    height: 100%;//此時子元素的高度是 340px
    position: absolute;
}
複製代碼

咱們看到上面兩種方式的效果還不同，爲何呢？

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

這裏，咱們引入一個實際開發中常見的一個效果？任意高度元素的展開收起動畫技術

固然，可能有至關一部分人，直接控制display的屬性在none和其餘值之間切換便可，可是這種方式雖然能夠實現，可是效果略顯生硬，如何在收起和展開時有一個過分效果呢？

可能第一反應是，收起時height設置爲0，展開時height設置爲auto，這樣看着好像是能夠的，可是實際這樣實現是有問題的，由於auto 是個關鍵字值，並不是數值，正如 height:100%的 100%沒法和 auto 相計 算同樣，從 0px 到 auto 也是沒法計算的，所以沒法造成過渡或動畫效果。

那麼還有更好的方法嗎？不妨試試max-height便可

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

這樣咱們就能夠爲該元素添加動畫效果了，不過此方法有一個注意點，咱們說設置一個足夠大的最大高度值，並不意味着咱們要設置的無限大，若是設置的無限大，頗有可能動畫帶來延遲，因此在實際開發中，咱們只須要設置一個足夠安全的max-height便可，這樣即便收起時有延遲，時間也會很短，用戶很難發現，也會不會影響用戶體驗。