参考 http://www.cnblogs.com/webmoon/archive/2012/12/23/2830170.html

不过我觉得他有个地方说的不对  (也可能是我错了)

其中有一段提到

混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。

 

我发现内边距(padding)或是边框(border)都会把已经设定了高宽的盒子撑开  但是对于已设定高宽的盒子  内容再大也撑不开这个元素

 

  
         
       
     
    
      
      
       
    
      
  
     
  
     
    
      
        
       
        
       
        
       
        
       
                                
       
    
      
  
     
  
     
    
      
      
       ssdfdsv    
      
  
     

 

body{
       margin:50px;  background-color:#2C3437;}.content{
     display:inline-block;  width:350px;  height:239px;  margin-right:-4px;}.inner{
       position: relative;     /*    由于块元素默认width是100%(相对其父元素)    ==>  子div默认宽度上占满父div    一个未指定width的元素     当position是relative和static时          在宽度上会100%占满父元素        高度上会包裹子元素    但是当position是absolute和fixed这两种绝对布局时(设置了float时也是如此)        子div默认宽度不再是100%  而是根据内容来定        高宽都是包裹子元素    上述所提到的高宽都是指所占位置的实际大小    */    background-color: green;    /*border: 1px solid black;*/}.ele{
       height: 20px;    width: 50px;}.inner2{
       height: 70px;    width: 230px;    position: relative;    background-color: green;}.inner2 .ele{
       width: 240px;}