CSS3:box-sizing: border-box;的作用

CSS3:box-sizing: border-box;的作用

作者: admin

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

content-box是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
 
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
 
border-box和content-box最直观的区别和解释
 

语法:

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

取值说明:

 
1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。
 
2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。
 
为了更能形像看出box-sizing中content-box和border-box两者的区别,我们先简单来看一人示例图,如下所示:
 
 

兼容浏览器

 
 
box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀:
 
Element {
     -moz-box-sizing: content-box;  
     -webkit-box-sizing: content-box; 
     -o-box-sizing: content-box; 
     -ms-box-sizing: content-box; 
     box-sizing: content-box; 
}
        
  
Element {
     -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
}
分享到:
打赏
未经允许不得转载:

作者: admin, 转载或复制请以 超链接形式 并注明出处 轻尘云网络
原文地址: 《CSS3:box-sizing: border-box;的作用》 发布于2020-2-8

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

CSS3:box-sizing: border-box;的作用

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap