box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素微饥。
例如膨俐,假如您需要并排放置兩個(gè)帶邊框的框格侯,可通過(guò)將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框编检,并把邊框和內(nèi)邊距放入框中加勤。
box-sizing: content-box|border-box|inherit;
content-box
這是由 CSS2.1 規(guī)定的寬度高度行為仙辟。
寬度和高度分別應(yīng)用到元素的內(nèi)容框。
在寬度和高度之外繪制元素的內(nèi)邊距和邊框鳄梅。
border-box
為元素設(shè)定的寬度和高度決定了元素的邊框盒叠国。
就是說(shuō),為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制卫枝。
通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
inherit
規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值讹挎。
參考鏈接:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Box Sizing