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

最新推荐文章于 2024-06-22 17:01:14 发布

aaa333qwe

最新推荐文章于 2024-06-22 17:01:14 发布

阅读量1.3k

点赞数

分类专栏： CSS学习目录

CSS学习目录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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; }
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

栗子：

<!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

aaa333qwe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3c盒子模型和IE盒子模型&box-sizing属性

1.盒子模型有两种：W3c盒子模型和IE盒子模型（1）W3c盒子模型可以看到W3C盒子模型包括4部分：margin，border，padding，content，其中，content不包括其他部分但是在IE盒子模型中，content包括了border和paddingIE盒子模型可以看到W3C盒子模型，和IE盒子模型，content部分的宽度width和高度height是不一样的。 2.两个模型宽度...
复制链接

扫一扫