盒模型.png
前言：本章主要讲CSS盒模型，CSS盒模型是CSS中most import 的一个概念，如果我们想学好CSS，那么CSS盒模型绝没跑在。这篇文章中，我们将深入地探讨CSS盒模型。
<h4>1.盒模型包括哪些属性?</h4>
盒模型 (2).png
以上图为例，阐述盒模型属性：
<li>content属性：规定内容区域，在标准盒模型中，宽高有width和height决定。如图内容区域为”300*300“。
<li>padding：内边距，也称”补白“，定义元素边框与元素内容之间的空白区域。
1.接受长度值或百分比值，但不允许使用负值
2.会受到框中填充的背景颜色影响
3.padding-top,padding-right,padding-bottom,padding-left
<li>border:规定元素的边界.
常见的border的细分属性有，border-width、border-style、border-color、border-top、border-right、border-bottom和border-left，可简写为border
<li>margin:规定元素的外边距（元素边框的空白区域）。
常见的margin的细分属性有margin-top、margin-right、margin-bottom、
margin-left
<h4>2.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中</h4>
<li>作用：水平居中；
<li>作用在块级元素上；
<li>能够使inline元素和line-block元素水平居中。
<h4>3.如果遇到一个属性想知道兼容性，在哪查看?</h4>
<a href="http://caniuse.com/">caniuse</a>
</br>
<h4>4.IE 盒模型和W3C盒模型有什么区别?</h4>
<li>IE浏览器：ie678怪异模式（不添加 doctype）使用 ie 盒模型，”宽度=边框+padding+内容宽度“
<li>chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度
</br>
<h4>5.以下代码的作用？兼容性？</h4>
代码兼容性.png
含义：width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的 盒模型 。
作用：使width与height包括(padding)与边框(border)，便于计算模型的大小。
</br>
caniuse使用.png
<h4>6.代码</h4>
<a href="http://js.jirengu.com/bavarulova/1/edit">代码作用</a>
感谢观众：
苏菲玛索.jpg
本教程版权归饥人谷peter和饥人谷所有，转载须说明来源
网友评论