CSS权威指南读书笔记-基本视觉格式化

基本框：

假设每个元素都会生成一个或多个矩形框，成为元素框
各元素中心有个内容区，内容区周围有内边距边框和外边距

包含块：

每个元素都相对于其包含块摆放，包含块是一个元素的“布局上下文”由最近的块级祖先框

块级元素

水平格式化

关键在于width影响的是内容区的宽度，而不是整个可见的元素框。
如p{width:200px;padding:10px;margin:20px;}
可见元素框的宽度是220px=200px + padding-left:10px+padding-right:10px
整个元素框的宽度是260px=200px+20px+10px+10px+20px

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

水平属性7大属性

margin-left border-left padding-left width padding-right border-right margin-right
元素框与其父元素的width相同
width必须为auto或某种类型的非负值

使用auto

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

负外边距

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

div{width:400px}
p.wide{margin-left:10px;width:auto;margin-right:-50px}
width的值为440px比父元素还宽，这样是合法的

百分数

width内边距和外边距设置为百分数，会应用相同的基本规则

替换元素

• 如果width是auto元素的宽度将是元素的固有宽度，
• 如果一个元素的宽度不同于其固有元素，height的值也会成比例变化，反过来设置的height，width也会成比例的变化。

垂直格式化

• 默认情况下如果设置高度大于内容高度会在下方添加空白，如果设置高度小于内容区域，浏览器会增加滚动条；如果元素内容的高度大于元素框的高度，用户代理的具体行为将取决于overflow属性的值。

垂直属性7个

同水平格式化属性，这7个属性必须等于元素包含块的height。往往是父元素的height值
依然是三个值可以是auto height margin-top margin-bottom

• 如果上下边距置为auto，不能使元素垂直居中，margin-top及bottom会置为0，使元素没有外边距
• 如果没有显式声明包含块的height，百分数高度会重置为auto
  如
  <div> {height:auto}
  <p height="50%">xxxxxx</ p>
  </div>
  这种情况下p元素百分数高度会置为auto
• auto高度，在段落上设置一个边框，并认为没有内边距，下边框正好在文本最后一行的下面，上边框正好在文本第一行的上面
• 如果块级正常流元素的高度为auto，而且只有块级子元素，其默认高度是讲从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离，因此子元素的外边距将会超出包含这个子元素的元素；不过如果块级元素有上或下内边距，或者有上或下边框，其高度将则是从最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

合并垂直外边距

垂直相邻外边距的合并，这种行为只应用于外边距，如果元素有内边距和边框，他们绝对不会合并
li{margin-top:10px；margin-bottom:15px}
这种情况下，相邻列表元素之间的距离是15px，而不是25px，因为相邻外边距会沿竖轴合并，如果相邻有多个外边距，也会出现合并

• 对于负外边距，如果两个都为负，则合并为绝对值大的那个，如果一个为正一个为负，则是相加得到的结果。

列表项

行内元素

• 非替换元素的内边距边框和外边距对行内元素或其生成的框没有垂直效果，他们不会影响元素行内框的高度。
• 替换元素的外边距和边框确实会影响该元素行内框的高度，也可能影响包含该元素的行框高度

行内替换元素

行内替换元素有固定的宽度和高，他不会改变行中任何元素的line-height值，包括替换元素本身，只会让行框的高度恰好能包含替换元素，会使用替换元素整体，包含内边距框和外边距来定义元素的行内框。

• *** virtual-align会根据line-height 设置偏移，因此对于替换元素，完成百分比的垂直对齐，会根据line-height计算。***
• 替换元素没有自己的基线，其行内框的地段与基线对齐，实际上是外边距边界与基线对齐

改变元素显示display

display:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|……

***这种改变只是显式的改变元素的显示角色而不是本质，因此不能把一个段落真正的改变为行内元素，因此行内元素比如<a display="block">即使改变显示为块级元素，其仍然是行内元素，不能包含块级元素，比如<a style="display:block"></a><p>错误的包含关系</p></a>

行内块元素 display：inline-block

行内块元素作为一个行内框与其他元素的内容相关，他就像图像一样放在一个文本行中，实际上行内块元素会作为替换元素放在行中
行内块元素的地点默认位于文本行的基线上，内部没有行分割符

• 如果行内框元素的width未定义，或显式的声明为auto，元素框会收缩以适应内容，元素框的宽度刚好包含该内容，而没有多余空间。不过行内框可能会跨多个行文本，而行内块元素不能。

run-in元素

改变元素的display的值实际上是改变元素的生成框，如display:blcok 是生成块级框，而display:inline是生成行内框

• 如果一个元素生成run-in框，而该框后面是一个块级框，那么run-in元素将成为块级元素开始处的一个行内框。
  run-in框格式化为另一个元素中的行内框，但其仍然从文档的父元素继承属性，而不是说他们放在哪个元素就从哪个元素中继承属性
• 只有当run-in框后面是一个块级框的时候run-in才能起作用，如果不是这样，run-in框本身将成为块级元素