box-sizing
语法:
box-sizing:
content-box
|border-box
|inherit
;与上面不同的是,当你设置
box-sizing:border-box
以后,这就能达到你想要的目的。例如,上面我们想要一个宽度为200px
的盒子,那么我们直接设置宽度为200px
。是不是看起来清晰多了。当再设置它的左右边框和左右补白后,它的内容区会自动调整。这可能更直接和一目了然。CSS
代码如下:
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
![](https://i-blog.csdnimg.cn/blog_migrate/fa4484c0ee5b86ca966811319e130926.webp?x-image-process=image/format,png)
实际上,这更被设计者和开发者推崇
一些开发人员觉得
box-sizing
使用起来十分方便,所以他们主张通过通用选择器将这个属性应用于每个元素但这样的观点未免有些偏激,而且还会导致不必要的困难,所以更好的方法是只在实际需要时才使用这个属性
*{
margin:0;
padding:0;
box-sizing:border-box;
}
- 写上
box-sizing: border-box
; ,设置padding
值 也不用担心没有减小宽度值而变形
作者:poetries
链接:https://www.jianshu.com/p/e2eb0d8c9de6
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。