CSS3 box-sizing

Please test in Firefox, other browsers are not necessarily valid

<! DOCTYPE HTML > <style type=" Text/css ";
Textarea{display:block; width : 500px;height:500px; margin:100px Auto;
. content-box{
Box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-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;
-webkit-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;
-webkit-box-sizing: Border-box;
width:100px;
height:100px;
padding:20px;
border:5px solid #3DA3EF;
Background:yellow;
}

</style><script type= "Text/javascript" >
</script>
<div class= "Content-box" >content-box </div>
<div class= "Padding-box" >padding-box</div>
<div class= "Border-box" >border-box </div>

<textarea style= "" >

Browser reasons, I am in Google Chrome is your effect, but Firefox is normal
ie8+ browser support for Content-box and BORDER-BOX;FF supports all three values.

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
Padding-box,padding calculation into width inside
Border-box,border and padding calculation into the width, in fact, is a strange mode ~

</textarea>
</body>

CSS3 box-sizing