加上边框后两个块的宽度和不能是100%原因






    <div style="float: left; width: 20%; height: 600px ;border:1px solid black;">

    </div>

    <div style="float: left; width: 78%; height: 600px ;border:1px solid black;">


    </div>

本代码中两个块分别占了整个浏览器宽度的20% 78%如果将两个之和调成100%会发生什么呢

在这里插入图片描述

会看到另一个块被挤到了下面

浏览器长度占不下这是因为 实际长度 = 边框长度+块长度 所以如果变成100%就会导致真实长度超出浏览器宽度所以就会被挤到到下面
我们可以加上这个属性box-sizing:border-box 固定死div的宽度 在加边框的时候会压缩内容与内边款之间的距离不会导致宽度变长

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值