当前位置:主页 > css > box-sizing属性的理解

box-sizing属性的理解

xi2年前 (2022-02-28)css2120

使用原因

盒模型布局中padding与border也是具有尺寸的,为避免其对页面布局产生影响,可使用box-sizing: border-box;属性设置盒模型,此时便可只用设置元素宽高即可。

属性详解

box-sizing的值有content-box、border-box、inherit。
content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框,此为默认值。
border-box:元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit:表示继承父元素的box-sizing属性。

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=6

返回列表

上一篇:css设置滚动条样式

没有最新的文章了...

“box-sizing属性的理解” 的相关文章

css设置滚动条样式

css伪类选择器可修改滚动条样式,仅限webkit内核浏览器。 ::-webkit-scrollbar {/*滚动条整体*/ width: 7px; height: 7px;...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。