CSS3 Box size (box-sizing)

Using CSS3Box size adjustment feature, you can specify the effective width of the element.

Using box size (box-redefine box width using box sizing (box

By default, the box of the element is visible/the actual width or height displayed on the web page depends on itwidthorheight,paddingandborderthe property value. For example, if you set the width of100% of<div>If an element applies some internal padding and border, the horizontal scrollbar will appear, as shown in the following example.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px solid #f08080;
}

This is a very common problem that web designers have been facing for a long time. However, CSS3introduced the box-sizing property to solve this problem and make CSS layout simpler and more intuitive. The box-sizing property changes the default CSS box model in the following way, that is, any padding or border specified on the element is laid out and drawn within the content area, so that the rendering width and height of the element are equal to the specified CSS width and height properties.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px solid #f08080;
　　　　box-sizing:  border-box;
}

If you see the output of this example, you will find that the scrollbar has disappeared.

Using Box-Sizing

Layout creation through CSS box-sizing property to create a multi-column layout very easily. Now, you don't have to worry about the final size of the element box without adding borders or borders on it.

The following example will create a two-column layout with equal widths for each column, and usesfloatproperties are placed side by side.

.box　{
　　　　width:　50%;
　　　　padding:　20px;
　　　　background:  #f2f2f2;
　　　　float:  left;
　　　　box-sizing:  border-box;
}

Similarly, you can use this simple technique to create more complex layouts.

.box　{
　　　　width:　30%;
　　　　padding:　20px;
　　　　margin-left:　5%;
　　　　background:  #f2f2f2;
　　　　float:  left;
　　　　box-sizing:  border-box;
}
.box:first-child　{
　　　　margin-left: 0;
}