今天的任务：

今天遇到个问题：父级width100%，padding60px，子级按钮width100%会无效父级的padding-right。之前用bootstrop直接对按钮添加btn-block就能自适应到父级宽度，这是因为在没有设置样式的情况下，浏览器渲染是从左到右渲染的，这样margin-left是可以有的，而margin-right就不一定了，因为只要子元素没有100%铺满，右边剩下的部分margin-right就会自动铺满，此时设置margin-right是无效的。

所以就要使用box-sizing这个属性：

content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

任务14要求用到模块化，网上说得最多的一种“模块化”，就是像header、footer这样的以大区域划分。

“样式的三层架构”——公共规则层、公共模块层、项目层，更容易理解和应用，

以及样式选择器的优先级：

• 通配选择符的权值 0,0,0,0
• 标签的权值为 0,0,0,1
• 类的权值为 0,0,1,0
• 属性选择的权值为  0,0,1,0
• 伪类选择的权值为 0,0,1,0
• 伪对象选择的权值为 0,0,0,1
• ID的权值为 0,1,0,0
• 内联样式的权值为 1,0,0,0
• important的权值为最高 1,0,0,0,0

选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。需要注意如果使用错误就很容易就会导致CSS的重复定义，代码冗余。

明天继续完成任务14