参考 http://www.cnblogs.com/webmoon/archive/2012/12/23/2830170.html
不过我觉得他有个地方说的不对 (也可能是我错了)
其中有一段提到
混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。
我发现内边距(padding)或是边框(border)都会把已经设定了高宽的盒子撑开 但是对于已设定高宽的盒子 内容再大也撑不开这个元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css.css" type="text/css" </head> <body> <div class='content'> <div class='inner'> <div class='ele'></div> </div> </div> <div class="content"> <div class='inner2'> <div class='ele'></div> <div class='ele'></div> <div class='ele'></div> <div class='ele'></div> <div class='ele'></div> </div> </div> <div class='content'> <div class='inner'> <label>ssdfdsv</label> </div> </div> </body> </html>
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; }