Reprinted from Http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html
CSS3 box-sizing Properties
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//Because the content box contains only the width of the content padding and border-box so it becomes very large
Padding-box,padding calculation into width within//padding not included
Border-box,border and padding calculated into the width, in fact, is the strange mode ~//border and padding are counted inside what box is the largest side of the front (memory)
ie8+ Browser supports Content-box and Border-box;
The FF supports all three values.
When used:
-webkit-box-sizing:100px; For Ios-safari, Android
-moz-box-sizing:100px; For FF
box-sizing:100px; For other
Chestnuts:
<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>
(FF):
Examples of CSS box-sizing