带border的百分比布局

最新推荐文章于 2021-06-17 14:13:04 发布

weixin_33747129

最新推荐文章于 2021-06-17 14:13:04 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/daladida/blog/741058

本文介绍了如何通过设置CSS的box-sizing属性值为border-box来解决百分比布局下边框宽度变化的问题，确保了在不同屏幕尺寸下元素的宽度保持一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

解决方案当然应该是：在之前的计算中我们应该考虑到边框（border），但是我们怎么去做呢？结论是，我们不能用百分比去设置border边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给border的空间也会是一个变化的值，也就是说当页面宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！

解决方案设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢？

.column{ 
    width: 16%; 
    margin: 2% 2%; 
    float: left; 
    background:#03a8d2; 
    border: 2px solid black; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

转载于:https://my.oschina.net/daladida/blog/741058