CSS3 Box-sizing Detailed

People slowly realized that the traditional box model was not straightforward, so they added a new one called box-sizingThe CSS property.

box-sizing: Box size, box model.

We often encounter the left and right module width of 50%, add a border will fall down, add a style to solve, look at the chestnut:

<! DOCTYPE html>


The Box-sizing property can be one of three values: Content-box (Default), Border-box,padding-box.

Content-box,border and padding do not count into width

Padding-box,padding calculation into width inside

Border-box,border and padding calculate into the width, in fact, is a strange 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>