css3属性关于“box-sizing”的笔记

最新推荐文章于 2024-09-19 17:42:53 发布

兔子敲代码

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/qq_38499671/article/details/109237754

版权

box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框，看这官方的定义，可能看不懂，不要急，看下面的例子：

我们先写2个盒子box和box1,box比box的css多了一个box-sizing:border-box的值，我们之间看浏览器渲染的结果，对比一下区别，如下图：

css代码：

.box{margin: 0 auto;width: 100px;height: 100px;line-height: 100px;text-align: center;padding: 10px;border: 3px dashed #111;box-sizing:border-box;}
.box1{margin: 0 auto;width: 100px;height: 100px;line-height: 100px;text-align: center;padding: 10px;border: 3px dashed #111;}

我们发现box的总宽度和总高度还是100*100，行高100px也导致“哈哈哈”向下移动了-这是顶部的填充导致的文字下移，这就是我们加入了box-sizing:border-box之后的效果！
继续看box1，发现其总宽度126px=盒子宽度100px+边框宽度6px+padding宽度20px，总高度也是这样...

总结起来，就是添加了box-sizing:border-box之后，盒子的总高度宽度始终不变，填充边框都在box里面了，传统的盒子模型被打破！

box-sizing: content-box|border-box|inherit;