元素大小超出包裹元素,可能出现的原因以及对应的解决方案

今天整里完flex,突然想到了以前遇见的一个问题,挺有意思的的,今天整里出来

以前写小程序的时候遇到过一种情况,就是当我在一个页面中,给一个按钮设置宽度100%的时候,按钮的宽度总是会超出父元素的包裹框(子元素为了美观,设置了padding)

当时想的是,手动计算宽度,后来上网看了原因

是因为当我们给子元素设置padding的时候,我们的元素的实际跨度其实是元素的真实的宽,加上去我们padding的宽度2*

css3引入了一个box-sizing:border-box。可以解决出现的这种问题

box-sizing三个属性值

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

inherit:规定应从父元素继承 box-sizing 属性的值。

希望能帮到各位!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章