盒模型

参考 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;
}

 

 

posted @ 2014-03-09 23:23  cart55free99  阅读(223)  评论(0)  编辑  收藏  举报