Css3 box-sizing ., Detailed description of css3box-sizing

Css3 box-sizing ., Detailed description of css3box-sizing

People gradually realized that the traditional box model is not direct, so they added a newbox-sizing.

box-sizing: Box Size, box model.

We often encounter that the width of the left and right modules is 50%, and adding a border will fall down. Adding this style will solve the problem. Let's look at the chestnuts:

<! DOCTYPE html> 

The box-sizing attribute can be one of three values: content-box (default), border-box, and padding-box.
Content-box, border, and padding are not included in width.
Padding-box, and padding is calculated into the width
Border-box, border, and padding are calculated within the width, which is actually a weird mode.
Pears:
<style type="text/css">    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #E6A43F;        background: blue;    }    .padding-box{        box-sizing:padding-box;        -moz-box-sizing:padding-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #186645;        background: red;                    }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #3DA3EF;        background: yellow;    }</style>