W3c盒子模型和IE盒子模型&box-sizing属性


1.盒子模型有两种:

W3c盒子模型和IE盒子模型

(1)W3c盒子模型

可以看到W3C盒子模型包括4部分:margin,border,padding,content,其中,content不包括其他部分

但是在IE盒子模型中,content包括了border和padding

IE盒子模型

可以看到W3C盒子模型,和IE盒子模型,content部分的宽度width和高度height是不一样的。

 

2.两个模型宽度和高度的计算(是一样的)

w3c中的盒子模型的宽:包括margin+border+padding+width;

    width:margin*2+border*2+padding*2+width;

    height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。

 

那应该选择哪中盒子模型呢?

  当然是“标准 W3C 盒子模型”了。

怎么样才算是选择了“标准 W3C 盒子模型”呢?

  很简单,就是在网页的顶部加上 DOCTYPE 声明。

栗子:

  下面关于css布局的描述,不正确的是?D

   a.块级元素实际占用的宽度与它的width属性有关

     b.块级元素实际占用的宽度与它的border属性有关

     c.块级元素实际占用的宽度与它的padding属性有关

     d.块级元素实际占用的宽度与它的background属性有关

解析: 默认w3c盒模型中,块级元素实际占的宽度为 width+padding+border 
在ie盒模型中,块级元素实际占的宽度为 width(width的宽度已经包含了content和padding和border)
无论如何,都与background没关系。应选D

  

3.box-sizing 属性

box-sizing属性值可以为这三个值中的一个:content-box(default),border-box,padding-box。

content-box,border和padding不计算入width之内,也就是说,整个界面的宽度要是content+padding+border

padding-box,padding计算入width内也就是说,整个界面的宽度要是content+padding

border-box,border和padding计算入width之内,其实就是怪异模式了~也就是说,整个界面的宽度要是content的width

 

ie8+浏览器支持content-box和border-box;

ff则支持全部三个值。

 

使用时:

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //火狐浏览器

box-sizing:100px; //其他浏览器

 

content-box:
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 (  Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box:
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 (  Element width = width )
此属性表现为怪异模式下的盒模型。

示例:

  • content-box:
    .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

    content-box

  • border-box:
    .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

    border-box

栗子:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing属性</title>
    <style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;//这是content的width
        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 #186645;
        background: red;                
    }
    .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"></div>
    <div class="padding-box"></div>
    <div class="border-box"></div>
</body>
</html>
复制代码

效果:在IE,chrome和360浏览器效果都是这样的

只有在火狐浏览器中是这样的

 

 参考文档:

http://www.jb51.net/css/12199.html

http://blog.csdn.net/zyuzixiao/article/details/18733463

http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

http://www.w3chtml.com/css3/properties/user-interface/box-sizing.html

转载自:https://www.cnblogs.com/GumpYan/p/5706863.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值