CSS权威指南第四弹：基本视觉格式化

1.基本框

假设每个元素都会生成一个或多个矩形框，成为元素框
各元素中心有个内容区，内容区周围有内边距边框和外边距
包含块
每个元素都相对于其包含块摆放，包含块是一个元素的“布局上下文”由最近的块级祖先框

2.块级元素

水平格式化
关键在于width影响的是内容区的宽度，而不是整个可见的元素框。

p{width:200px;padding:10px;margin:20px;}
//可见元素框的宽度是220px=200px + padding-left:10px+padding-right:10px
//整个元素框的宽度是260px=200px+20px+10px+10px+20px

规则：正常流中块级元素框的水平部分总和等于父元素的width

水平属性
1.7大属性：margin-left、 border-left 、padding-left、 width 、padding-right、 border-right、 margin-right
2.元素框与其父元素的width相同
3.width必须为auto或某种类型的非负值

使用auto
1.如果width margin-left margin-right 三个值都是固定值，margin-right会强制置为auto
2.如果width是auto其他两个值固定，width的宽将设置为所需的某个值，从而达到父元素的内容宽度
3.如果margin左右设置为auto，其两个值置为相等的长度，因此该元素会在父元素居中
4.将某个外边距及width设置为auto。设置为auto的外边距会减为0，width会设置为所需的值，使元素完全填充其包含块
5.如果三个属性都设置为auto，两个外边距会设置为0。
注意：水平外边距不会合并，父元素的内边距、边距和外边距可能影响其子元素。例如父元素内边距30px，子元素margin20px，则偏移50px

负外边距
由于7个水平属性总和要等于父元素的width，只要属性都是>=0的，元素就不会大于其父元素的内容区。

div{width:400px}
p.wide{margin-left:10px;width:auto;margin-right:-50px}
//10+0+0+440+0+0-50=400
//width的值为440px比父元素还宽，这样是合法的
//内边距、边框、内容宽度不可以为负数，只有外边距可以小