1.盒模型简介
<li>W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)。
以下是几个基本属性:
1.内容:content
2.填充(内边距):padding
3.边框:border
4.边界(外边距):margin
<li>盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式。
无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。
W3C标准盒子模型:
外盒模型:
元素空间宽度 = content width + padding + border + margin的宽度
元素空间高度 = content width + padding + border + margin的高度
内盒模型:
元素宽度 = content height + padding + border的宽度
元素高度 = content height + padding + border的高度
** IE盒子模型:**
外盒模型:
元素空间宽度 = content width + margin的宽度
元素空间高度 = content height + margin的高度
内盒模型:
元素宽度 = content width
元素高度 = content height
2.以下代码的作用?兼容性?
}:```
css3属性box-sizing:
box-sizing有两个值一个是content-box,另一个是border-box。
当设置为box-sizing:content-box时,将采用**标准模式**解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用**怪异模式**解析计算;
兼容性:
![](http://upload-images.jianshu.io/upload_images/2399926-3dbb5c12698db84d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
######所有的盒模型,只要没有添加doctype,都处于怪异模式,但此时,只有ie678使用ie盒模型,其他的虽然处于怪异模式,但仍旧使用标准模型,其实与普通模式效果相同,怪异模式是在ie6时代为了兼容ie5以及以前版本的浏览器保留的 现在实际使用中都使用标准模式 添加doctype。
***
##3.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
<li>text-align:center;是使标签的内容居中,针对于行内元素,相对于其父容器居中。
<li>margin:0 auto;是使自身在浏览器内居中,需要配合宽度使用,针对块级元素使用,且此时float:left和right会失效。
***
**本教程归本人和饥人谷所有,转载需说明来源。**