盒模型
2016-08-07 本文已影响55人
咩咩咩1024
一、盒模型包括哪些属性
1.内容(content)；
2.内边距(padding)；
3.边框(border)；
4.外边距(margin)；
盒模型示例
二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
1.作用：能让文本，图片和行内元素水平居中；
代码
示例
三、如果遇到一个属性想知道兼容性，在哪查看？
四、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盒模型的方法是使用<!DOCTYPE html>声明，告诉IE采用W3C盒子模型即可。
五、以下代码的作用？兼容性？
Paste_Image.png
1.作用：盒模型的宽度即为盒模型内容的宽度，盒模型的内边距和边框都不会增加盒模型宽度；那么块级元素实际所占文档流的宽度就为盒模型的content即实际内容宽+margin外边距；高度为content的实际高度+margin外边距；
兼容性
