css3属性box-sizing

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3属性box-sizing相关的知识,希望对你有一定的参考价值。

 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。包括border-box|content-box(默认)|padding-box

    先来看下代码,比较一下它们之间的区别:

<div  class="content-box"></div>
<div  class="padding-box"></div>
<div  class="border-box"></div>

css部分:

复制代码
  .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: yellow;
    }
复制代码

实现效果如下:

现在我们来看下区别:

  上面的三张图,第一张width=150px;第二张为110px;第三张为100px,都包括border的宽度10px在内。

  content-box:border和padding都计算入width之内,即width=100+20*2+10=150px;

  会发现一个很奇怪的问题,此时的width明明只有100px.为什么在浏览器屏幕上显示的变为了140px?

  其实是因为padding的作用,它的width包括padding,所以我们看到的比100px大,而在正常的非box-sizing里面,即使设置了padding值

它依然只能显示出100px.

  padding-box:border计算入width内,即屏幕上显示的width为:100px+5*2=110px;

  border-box:border和padding的值都不计算在width之内.即显示width=100px;

  ie8+浏览器支持content-box和border-box;ff则支持全部三个值。

这里,我们在js代码里面,看一下它的实际宽度,也是相对应的。

var  contentBox=document.getElementById("content-box");
var  paddingBox=document.getElementById("padding-box");
var  borderBox=document.getElementById("border-box");
alert(contentBox.offsetWidth);  --弹出150px
alert(paddingBox.offsetWidth);  --弹出110px
alert(borderBox.offsetWidth);   --弹出100px

 简单来说,box-sizing与我们平时的盒模型最大的区别就是,在浏览器屏幕上显示的宽度不一样。

具体的总结如下:

以div的宽度为例:

box-sizing:content-box(默认);div的实际宽度=div自身宽度+padding+border;2个都计算在内;

box-sizing:padding-box;div的实际宽度=div自身宽度+border;padding不计算在内;

box-sizing:border-box;div的实际宽度=div自身宽度,padding和border都不计算在内;

 

以上是关于css3属性box-sizing的主要内容,如果未能解决你的问题,请参考以下文章

css3 box-sizing属性

css3 box-sizing属性

CSS3 box-sizing属性

box-sizing是css3的新属性吗

css3——box-sizing属性

box-sizing