问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css box-sizing border-box

头像
Bonnie
    20512651
    头像
    spencerht
      7.8k2728

      很简单的问题，两个div为什么没有在一排。我感觉是我理解有误，border-box是包括了padding、border以后的

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            width: 100%;
            box-sizing: border-box;
        }
        .demo div{
            width: 50%;
            border: 1px solid red;
            height: 90px;
        }
    </style>
</head>
<body>
<div class="demo">
    <div></div>
    <div></div>
</div>
</body>
</html>
      css
      阅读 2.9k
      3 个回答
      得票最新
      头像
      Leslie
        8511111

        你的.demo>div 仍然是block元素 就算你把宽度设置成了50% 剩下的50% 会默认变成margin
        想要一行排列
        .demo div{

            width: 50%;
    display:inline-block;
    border: 1px solid red;
    height: 90px;
}

        并且要消除html中的文本节点（删除换行）
        <div class="demo">

        <div></div><div></div>

        </div>

        另外你的理解没问题 border-box是包含border，padding，content区域的盒子模型

        头像
        callmeDAY
          2051310

          你需要理解的是行内元素可块级元素的区别，div默认是行内元素，行内元素默认会固定占用一行

          给内部div一个display:inline-block ，然后给.demo一个font-size:0 ，就一行了

          不推荐在html里让两个div并排来消除空白符，结构与样式分离，不要单纯为了调整样式去修改现有的的html结构

          头像
          zwwill_木羽
            6.3k2931

            答案也很简单：
            1、div是块状元素，不会在一行的，
            2、父元素设置了box-sizing: border-box;自元素不会继承
            3、设置了box-sizing: border-box;后，padding、border就会占用内容区，而不会增加宽度
            只需将代码稍作修改即可

            .demo{
    width: 100%;
    box-sizing: border-box;
    font-size: 0;
}
.demo div{
    width: 50%;
    border: 1px solid red;
    height: 90px;
    box-sizing: border-box;
    display: inline-block;
}

            另外怎样消除inline-block元素间间隙的方法请参阅此文https://segmentfault.com/a/1190000010989233
            jsfiddle demo

            查看全部 3 个回答
            推荐问题
            宣传栏