CSS3 box-sizing 属性
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助。
box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题。CSS中的盒模型(Box model)分为两派,一派是W3C的标准模型,一派是IE的传统模型。那它们之间有什么不同的呢?首先需要明确它们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;而不同的地方就在于两者的计算方法不一至:(下面引用一些公式向大家展示一下两者的不同之处)
box-sizing属性可以为三个值之一:
content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; color: white; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; color: white; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; } </style> </head> <body> <div class="content-box">content-box</div> <div class="padding-box">padding-box</div> <div class="border-box">border-box</div> </body> </html>
我是在火狐浏览器下运行的,所以加了-moz-;-moz-代表firefox浏览器私有属性
原文链接:https://www.qiquanji.com/post/6966.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知