【转】CSS3 Box-sizing

 /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  内盒尺寸计算（元素大小）
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

.boxtest {
    border: 20px solid;
    padding: 30px;
    margin:
    background: #ffc;
    width: 300px;
 }

box-sizing ： content-box || border-box || inherit

Content box*/
  Element {
     -moz-box-sizing: content-box;  Firefox3.5+*/
     -webkit-box-sizing: content-box; Safari3.2+
     -o-box-sizing:Opera9.6
     -ms-box-sizing:IE8
     box-sizing:W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
  }
        
  Border box border-box;   border-box; */
  }

<div class="imgBox" id="contentBox"><img src="/images/header.jpeg" alt="" /></div>
   ="borderBox">

 .imgBox img{
     width: 140px;
     height:
     padding: 20px;
     border: 20px solid orange;
     margin: 10px;
  }
  #contentBox img{ content-box; content-box; 
  }

  #borderBox img{ border-box; border-box;
  }

="layoutDemo">
    id="header" class="innerPadding border">Header Content</="content"="clearfix">
        ="left"="aside innerPadding border">Left Sidebar>;
        ="main-content"="article innerPadding border">Main Content="footer"> Footer Content>
  >
 

 .layoutDemo { 960px; #000;     
  }
        
  #header { 100%; orange;
  }
        
  #left { 220px;
    float: left;
    margin-right: 20px
    background: green;
  }
        
  #main-content { 720px; gray;
  }
        
  #footer { red;
  }
 

 .innerPadding { 10px;
  }

 .border { 10px solid yellow;
  }

.box-sizing {
    -moz-box-sizing:
    -webkit-box-sizing:
    -o-box-sizing:
    -ms-box-sizing:
    box-sizing: border-box;
  }

 #left {
    *width:180px; 
  }
  #right { 680px;
  }

form action="#" method="post"="form-field"input type="submit" value="submit" />
    ="reset"="reset" button ="button">buttonbutton="text"="text" select name="select"="select">
           option value="1">1980optionselect="checkbox"="checkbox" />checkbox="radio"="radio" />radiotextarea ="textarea"="" cols="30" rows="3"="textarea"></textareaform>

<style type="text/css">
     body {
    font-size: 12px;
     }
     form { 200px; 20px auto; 10px; 1px solid #ccc;
     }
        
     .form-field {
    margin-bottom: 5px; #cdcdcd; 2px;
     }
        
    .submit,.reset,.button,.text,.select,.textarea { 80px;
    border-color: red;
    }
            
    .textarea {
    resize: none;
    }
  </style>

 .submit,.textarea,.checkbox,.radio { 0;
     border-width: 1px;
   }

.submit,1)">
    border-width: 1px;
    height: 17px; border-box;
   }
                
   .checkbox,1)"> 13px; border-box;
   }

  .submit,1)"> border-box;
     这里需要减去border的值，如果padding的值不是0还需要减去padding的值，
     *height:15px; 
     *width: 15px;
   }