box-sizing
概述
- box-sizing 屬性用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒子模型璧帝。
句法
- box-sizing: content-box;
- box-sizing: border-box;
值
- content-box
默認(rèn)值，標(biāo)準(zhǔn)盒子模型逛揩。 width 與 height 只包括內(nèi)容的寬和高跷跪， 不包括邊框（border）馋嗜，內(nèi)邊距（padding），外邊距（margin）吵瞻。 - border-box
width 和 height 屬性包括內(nèi)容葛菇，內(nèi)邊距和邊框，但不包括外邊距橡羞。
Height
概述
- box-sizing:content-box（默認(rèn)值）;
- height是指content的高度
值
- <百分比>
- 相對于元素的塊容器高度（相對于父元素的高度）眯停。
- 用在root 元素 (e.g. <html>) 上是相對于初始塊容器（即瀏覽器窗口"viewport"的尺寸）。
max-height
概述
- max-height 這個屬性會阻止 height 屬性的設(shè)置值變得比 max-height 更大卿泽。
- max-height 屬性用來設(shè)置給定元素的最大高度. 如果height 屬性設(shè)置的高度比該屬性設(shè)置的高度還大,則height 屬性會失效.
- max-height 重載（覆蓋掉） height, 但是 min-height 又會重載（覆蓋掉） max-height.
值
- <百分比>
- 相對于父元素的高度（padding+content高度）計算得來的,如果該元素的父元素沒有明確的指定高度,則該百分比相當(dāng)于none.（相當(dāng)于沒有設(shè)置）
min-height
概述
- 用來設(shè)置指定元素的最小高度莺债。當(dāng) height 屬性設(shè)置的高度小于該屬性的值時，則 height 屬性會失效签夭。
- min-height 會將 max-height和 height的值都覆蓋掉齐邦。
值
- <百分比>
- 使用百分比指定的值是根據(jù)該元素的父元素的高度計算得來的。不允許負(fù)值第租。
