盒模型基础问题
2016-05-11 本文已影响44人
羞涩的涩
盒模型包括哪些属性
- margin 外边距，有四个方向
- top 上
- right 右
- bottom 下
- left 左
- padding 内边距，有四个方向
- top 上
- right 右
- bottom 下
- left 左
- border 边框，有四个方向
- top 上
- right 右
- bottom 下
- left 左
- content 内容
盒模型的宽带=左外边距+左边框宽度+左内边距+内容+右内边距+右边框宽度+右外边距
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是让元素内容水平居中，主要作用于块级元素、表单格元素里的行内元素组成的内容（对块级元素本身不起作用）.
能够让块级元素内所有的由行内元素（a、span、img、input....）组成的内容水平居中。
如果遇到一个属性想知道兼容性，在哪查看?
在这个链接http://caniuse.com/ 框内查询其兼容性。
IE 盒模型和W3C盒模型有什么区别?
盒模型的计算方法有两种
- IE盒模型
- W3C盒模型
它们的区别在于对width的计算。如下图:
我是图
从图上可以看出W3C的盒模型里width宽度只包含了内容，而IE盒模型的宽度包括了padding和border宽度。这就造成了我们计算空间大小时在不同的浏览器下会造成偏差。
所以我们要使用<!DOCTYPE html>
声明避免进入IE盒模型。
参考博客:
http://blog.csdn.net/sunhengzhe/article/details/46679595
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
