任务9-1

回答

1. 盒模型包括哪些属性？1

• content：内容区域；
• padding：内边距；
• border：边框；

• margin：外边距，透明存在的。
  普通文档流中的块框的垂直外边距会叠加，叠加时，选取较大值。

  
  
  

  CSS盒模型

2. text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中？居中
   作用在块级元素上，可以使元素内的文本、图片、行内元素水平居中

.one {
    text-align: center;
    border: solid 1px red;
  }
  p{
    border: 1px solid;
  }
  a{
    text-decoration: none;
  }```
效果：图中的段落没居中，但是段落中的文本居中显示。
![task9-2.](http://upload-images.jianshu.io/upload_images/2150964-ef6c99b3533412f9.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果要让其中的行内元素不受控制，`display: block`或者在其外部加一个块级元素，另设置对齐方式
```
    

        很长的一段文字很长很长的，没了!
        
这样挺好我继承了父元素
        
我要做自己我自己设置了对齐方式，不再继承
    
```

3.  如果遇到一个属性想知道兼容性，在哪查看？
[can I use](http://caniuse.com/)，

4. IE盒模型和W3C盒模型有什么区别？
   * W3C盒模型：总宽度=margin-left + border-left + padding-left + width +padding-right +borer-right + margin-right.
   * IE盒模型：总宽度=margin-left + width +margin-right.（padding和border的值算在width里）[more](http://www.osmn00.com/translation/213.html)
（给生活加点“料”：CSS3的box-sizing属性算法和IE盒模型是一样的？纠结了好一会，不是说IE盒模型不标准吗？就上网查“IE盒模型和W3C盒模型哪个好”结果看到了这个段子：
>IE：我觉得盒模型应该是这样的，blahblah。
W3C：明显应该是这样的才对，blahblah。
结果是 IE 在怪异模式下用了「不标准」的盒模型，标准模式下用了「标准」的盒模型。围观群众：听说 IE 的盒模型不标准。
……多年过去……
W3C：感觉还是 IE 的那个模型比较好。但我们已经回不去了……算了加个属性支持一下 IE 那种模式吧。
box-sizing
 这货就是用来擦屁股的，我从来没见过有人用 border-box
 的……

       希望创建W3C盒模型的那个人不要太自责，人民大众和他在一起！）

5.  以下代码的作用？兼容性？
`*{box-sizing: border-box;}`
   * 作用：元素的**内边距（padding）**和**边框（border）**不会增加它的**宽度**，width=border-left + padding-left + content +padding-right + border-right.
如果padding、border值增加，会减少相等的content的值，而width不改变。**（注意：当width一定时，总的宽度会随margin的改变而改变。）**
例如 

.one {
width: 500px;
margin: 20px auto;
background-color: green;
}
.two {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
background-color: red;
}```
上面代码，第二个元素的宽度的值要比第一个元素大，因为第二个的padding和border都有值。如果两个元素都加了box-sizing:border-box;属性，结果如下

 .simple {
    width: 500px;
    margin: 20px auto;
    box-sizing: border-box;
    background-color: green;
  }
  .fancy {
    width: 500px;
    margin: 20px auto;
    padding: 50px;
    border-width: 10px;
    box-sizing: border-box;
    background-color: red;
  }```
此时，两个元素的宽度相同。
  * 兼容性：
![task9-1](http://upload-images.jianshu.io/upload_images/2150964-cf41f1b7e61d95a5.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)