1. Home
  2. CSS3 box-sizing property

The best CSS3 box-sizing property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,related articles,

CSS3 box-sizing property

Examples

Two boxes designated border:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
box-sizing 10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5

Attribute definitions and instructions

box-sizing property allows you to define certain elements in some way to adapt to the designated area.

For example, if you need to place two side by side with a border box by the box-sizing to "border-box". This can make the browser showing a box with the specified width and height, and the border, and padding into the box.

Defaults: content-box
inherit: no
version: CSS3
JavaScript syntax: object .style.boxSizing = "border-box"

grammar

box-sizing: content-box | border-box | inherit:

value Explanation
content-box This is the behavior of the width and height specified CSS2.1. Width and height (min / max attribute) specified element suitable for box width and height. Padding and borders, and drawing layouts specify the width and height of the element except
border-box Specifies the width and height (min / max attribute) to determine the element's border box. In other words, the elements specified width and height including the designation of the padding and border. Width and height of the content minus the respective sides of the border and fill is calculated from the width "width" and "height" attribute specified
inherit Value specifies the box-sizing property should be inherited from the parent element

related articles

CSS3 tutorial: CSS3 the User Interface

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 box-sizing property
10/30