css3 box-sizing属性_html/css_WEB-ITnose

Definition and Usage

The box-sizing attribute allows you to define specific elements that match a certain area in a specific way.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This causes the browser to render a box with the specified width and height, and put the borders and padding into the box.

box-sizing: content-box | border-box

Default: content-box

content-box :

padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value and border, padding and margin, that is (Element width = width border padding margin)

This property behaves like a box model in standard mode.

border-box:

padding and border are included within the defined width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width)

This attribute behaves like a box model in weird mode.

Example:

<style type="text/css">    div{width:200px;height:100px;padding: 20px;        background:#eee;}    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        border: 10px solid #333;    }    .padding-box{        box-sizing:padding-box;        -moz-box-sizing:padding-box;        -webkit-box-sizing:padding-box;/*chrome 不支持*/        border: 10px solid #ccc;          }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        border: 10px solid #666;    }</style><div class="content-box">content-box</div><div class="padding-box">padding-box/*chrome 不支持*/</div><div class="border-box">border-box</div>