CSS-浏览器缩放使边框大小改变，导致布局改变的问题

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-浏览器缩放使边框大小改变，导致布局改变的问题相关推荐

字体大小浏览器缩放文本的大小
字体大小 font-size 属性设置文本的大小. 能否管理文字的大小,在网页设计中是非常重要的.但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落. 请务必使用正确的HTML标签 ...
css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
使用white-space: nowrap；时导致布局改变
当使用white-space: nowrap;导致布局变大时, 只需要在其父元素上设置样式"min-width:0;" 若是大屏项目,分为左中右,需在左(或中或右)的根元素上设置& ...
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-size字体大小
font-size字体大小微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础语法有能力管理文 ...
CSS边框样式border设置1px（小于或等于3px）之后，缩放浏览器窗口，导致布局出现问题
项目场景: 在css里面对盒子加边框时,调整像素值为1px,运行到浏览,缩放页面,会造成页面排版出现问题问题描述: 窗口大小是100% 窗口缩放在这里我是对dl设置了一个1px的边框,按照我写的代 ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
html页面整体缩小,浏览器缩放原理以及窗口、html页面大小
在这篇文章里,将会解释视窗(viewports)和各种重要元素(例如元素)的宽度是如何工作的,同样也会解释浏览器窗口(window)和屏幕(screen)的宽度问题. 概念:设备的pixels和CSS ...
HTML 如何让图片自动改变大小,CSS如何设置图片的大小
原标题:CSS如何设置图片的大小图片是的基本构成元素,通过img元素的属性值可以调整图片在浏览器中的显示效果,如图片的边框.大小以及为图片设置透明效果等各种样式. 通过img元素的属性值可以调整图片 ...
HTML5 CSS控制Table内外边框、颜色、大小示例
联系人:石虎 QQ:1224614774 昵称: 嗡嘛呢叭咪哄 QQ群:807236138 群称: iOS 技术交流学习群 ...

CSS-浏览器缩放使边框大小改变，导致布局改变的问题

解决办法：给 li 设置 box-sizing : border-box

CSS-浏览器缩放使边框大小改变，导致布局改变的问题相关推荐

最新文章

热门文章