盒模型

一、盒模型包括哪些属性

1.内容(content)；
2.内边距(padding)；
3.边框(border)；
4.外边距(margin)；

盒模型示例

二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

1.作用：能让文本，图片和行内元素水平居中；

代码

示例

三、如果遇到一个属性想知道兼容性，在哪查看？

网站：http://caniuse.com/

四、IE 盒模型和W3C盒模型有什么区别?

1.标准W3C盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分；

标准W3C盒模型

• W3C盒模型的宽包括：content,padding,border,margin;
• 例:margin:20px;padding:10px;border:5px;width:100px;height:100px;
• 那么这个标准盒模型占用的宽就是：20×2+10×2+5×2+100=170px;
• 标准盒模型占用的高度就是：20×2+10×2+5×2+100=170px;
• 盒模型实际的宽度就是内容的宽度：content=100px；

2.IE 盒子模型的范围包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding；

IE盒模型

• IE盒模型的宽也包括：content,padding,border,margin;
• 例:margin:20px;padding:10px;border:5px;width:100px;height:100px;
• 那么这个标准盒模型占用的宽就是：20×2+10×2+5×2+100=170px;
• 标准盒模型占用的高度就是：20×2+10×2+5×2+100=170px;
• 盒模型实际的宽度就是：content+border+padding即100+5×2+10×2=130px；

3.避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可。

五、以下代码的作用？兼容性？

Paste_Image.png

1.作用：盒模型的宽度即为盒模型内容的宽度，盒模型的内边距和边框都不会增加盒模型宽度；那么块级元素实际所占文档流的宽度就为盒模型的content即实际内容宽+margin外边距；高度为content的实际高度+margin外边距；

兼容性

本教程归本人和饥人谷所有，转载需说明来源！