admin管理员组文章数量:1567915
HTML代码:
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
CSS代码:
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
height: 300px;
margin: 100px auto;
}
li {
float: left;
width: 288px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
list-style: none;
border: 1px solid red;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: bold;
}
浏览器未缩放情况下,显示如下:
将浏览器窗口缩放到75%
检查发现此时 li 的 border 变为1.067px
浏览器缩放到50%,border 变为 1.6px
导致这种情况出现的原因是:当初始边框为1px时,浏览器窗口缩小导致边框小于1px,但是浏览器窗口能显示的最小边框为1px。此时浏览器会将原本的边框1px按比例变大,此时边框实际已经不是1px了,超出了父盒子的宽度,所以最后一个 li 掉入第二行
如:浏览器缩放到50%时,边框也会变小,浏览器检测到边框小于1px,便将边框变为1.6px,再将已经变大后的边框缩小。(这样可以保证不管浏览器如何缩放,也不会出现边框看不到的情况。
解决办法:给 li 设置 box-sizing : border-box
li {
box-sizing:border-box;
width:290px;
}
border-box 的意思是 li 包括内容+边框的总宽度为290px。即使浏览器缩小导致边框变大,li 的总宽度都为290px;
box-sizing的默认值是content-box,之前未设置box-sizing: border-box时, width:288px,这个288px是内容的宽度,li 的总宽度为288px+左右边框和 2px = 290px。如果浏览器缩小导致边框变大,li 的总宽度也会大于290px,当4个 li 的宽度总和超过父盒子的宽度时,最后一个 li 就会掉出第一行
版权声明:本文标题:CSS-浏览器缩放使边框大小改变,导致布局改变的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725797634a1043172.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论