开发者社区> 问答> 正文

一个关于 css布局的问题?

关于这种布局,为什么里面div2元素的boder不会让父元素宽度增加?要是给div1设置边框肯定会增加宽度,这种原理是什么?求高手解答一下。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    html.body{
      width:100%;
      height:100%;
    }
    .div1{
        width:33.33%;
        float:left;
       
    }
    .div2{
        height:150px;
        border:1px solid red;
    }
   
  </style>
</head>
<body>
   <div class="div1">
       <div class="div2"></div>
   </div>
  <div class="div1">
       <div class="div2"></div>
   </div>
  <div class="div1">
       <div class="div2"></div>
   </div>
</body>
</html>

代码在线浏览地址

展开
收起
杨冬芳 2016-06-08 14:28:00 1967 0
1 条回答
写回答
取消 提交回答
  • IT从业

    你没设置div2的宽度啊,他的盒子宽度(width+border+padding之和)就继承父元素的了,如果你给div1和div2的高度都是150,然后再给div2一个border,应该就能看出差距了。建议用chrome工具看

    2019-07-17 19:31:55
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载