css盒模型基础

1.盒模型简介

<li>W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）。

以下是几个基本属性：
1.内容：content
2.填充（内边距）：padding
3.边框：border
4.边界（外边距）：margin

盒模型

<li>盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

w3c标准盒模型
W3C标准盒子模型：

外盒模型:
元素空间宽度 = content width + padding + border + margin的宽度
元素空间高度 = content width + padding + border + margin的高度
内盒模型:
元素宽度 = content height + padding + border的宽度
元素高度 = content height + padding + border的高度

IE盒模型

** 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时，将采用**怪异模式**解析计算；
兼容性：
![](https://img.haomeiwen.com/i2399926/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会失效。
***
**本教程归本人和饥人谷所有，转载需说明来源。**