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