CSS保健室｜width、height

前言

平面設計會用到尺寸、室內設計也會、網頁設計當然也要 +1 ，雖然是基礎語法，但還是藏著一些你可能不知道的細節，那就繼續看下去吧！

（ 圖片來源 ）

width

width 屬性設置元素的寬度。

max-width

max-width 定義元素的最大寬度。

min-width

min-width 屬性設置元素的最小寬度。

height

height 屬性設置元素的高度。

對於 width 屬性，父元素 width 為 auto ，其百分比值也是支持的；但是對於 height 屬性，其父元素 height 為 auto ，其百分比值是會完全被忽略的。

div {
    width: 100%; /*這是多餘的*/
    height: 100%; /*這是無效的*/
}

height: 100% 無效的原因是：規範中規定如果包含塊的高度沒有顯示指定（ 即高度由內容決定 ），並且該元素不是絕對定位，計算值為 auto ，則 auto * 100% = NAN ，因為計算不了所以無效，但是 width 的解釋卻是：如果包含塊的寬度取決於該元素的寬度，那麼產生的佈局在 CSS2.1 中是未定義的。對於 “ 未定義行為 ” ，瀏覽器根據自己的理解去發揮，這時的 width 值，就按照包含塊真實的計算值作為百分比基數去計算了。

那我們要怎麼讓元素支持 height: 100% 效果呢？

方法一
設定明確高度值 － height: 200px; 或者可以生效的百分比高度。

html, body {
    height: 100%;
}

方法二
使用絕對定位

div {
    height: 100%;
    position: absolute;
}

絕對定位元素和非絕對定位元素的百分比計算是有差的，區別在於絕對定位的寬高百分比計算是相對於 padding box 的，非絕對定位元素則是相對於 content box 計算的。

max-height

max-height 屬性設置元素的最大高度。

min-height

min-height 屬性設置元素的最小高度。

min > max > !important

HTML

<div>到底是哪個權重比較大啦！吼唷！到底是哪個權重比較大啦！吼唷！到底是哪個權重比較大啦！吼唷！</div>

CSS

div{
  font-size: 20px;
  min-width: 160px;
  max-width: 60px;
  width: 400px!important;
  background-color: #ccc;
}

雖然這種寫法不太可能會發生，但如果是改別人的程式碼，發現不管怎麼寫，尺寸就是不會變，那你就要看一下是不是權重惹的禍。

圖片中每個文字的大小是 20px ，所以 8 個字就是 160px ，印證了 min 的權重最重，所以就算把 min-width 寫在最上面，下面的值還是覆蓋不了它。

參考資料

1. CSS width 属性
2. CSS min-width 属性
3. CSS max-width 属性
4. CSS height 属性
5. CSS min-height 属性
6. CSS max-height 属性
7. min-width & max-width - 金魚都能懂的CSS必學屬性
8. 《CSS世界》學習筆記--關於width和height易忽略的細節
9. CSS进阶（2）—— width,height如此高深,难道你真懂得