css知识填坑(二)——块级元素

一.块级元素

1.水平格式化

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

水平属性
水平格式化的七大属性：
margin-left+ border-left+ padding-left +width+ padding-right+ border-right margin-right =元素框的宽度=父元素的width值

margin，width——可设置为auto
padding，border——必须设置为特定的值,不设置则默认为0

使用auto
其中一个取auto——如果设置margin，width中某个值为auto，那么设置为auto的属性会确定所需的长度，从而使元素框宽度等于父元素的width。

都为特定值——如果margin和width均指定为特定值，则这些格式化属于过分受限，此时总会把margin-left强制为auto。

不止一个auto
两个取auto，width和一个margin为auto,另一个margin取特定值——设置为auto的margin取0

两个取auto，两个margin取auto,width取特定值——居中

三个均取auto——margin取0,width设置所需值，使得元素完全填充包含块。

负外边距
七个属性中，只有外边距可取负值，但要记住七个属性的总和要等于父元素的width。

在width取为auto时，通过指定一个负外边距可以得到一个更宽的子元素。

当三个属性均取特定值，且其总和超过父元素width，由于水平属性过分受限时由一个规则，要求重置右外边距，也会得到一个负右外边距。

百分数

替换元素
非替换元素的所有规则同样适用于替换元素，只有一个例外：如果width取值为auto，元素的宽度则为内容的固有宽度。

如果一个替换元素的width属性不同于其固有宽度，那么height值也会成比例变化，除非height自己也显示的设置为一个特定的值。反之亦然。

2.垂直格式化

一个元素的默认高度由其内容决定

垂直属性
水平格式化的七大属性：
margin-top+ border-top+ padding-top +height+ padding-bottom+ border-bottom+ margin-bottom =元素框的高度=父元素的height值

margin，width——可设置为auto
padding，border——必须设置为特定的值,不设置则默认为0

不同于水平格式化，如果正常流中一个块元素的margin-top或margin-bottom设置为auto，他会自定计算为0（也就是说，不能很容易的将正常流元素在其包含块中垂直居中）

百分数高度
如果一个块级正常流元素的height值设置为一个百分数，这个值则是包含块height的一个百分数。

如果没有显示声明包含快的height，百分数高度会重置auto

auto高度
如果块级正常流元素设置为height:auto，显示时其高度将恰好足以包含其内联内容的行盒。

如果块级正常流元素设置为height:auto，而且只有块级子元素，其高度将是不包含子元素margin值的高度。
如果块级元素有border或padding，则其高度为包含子元素margin值的高度。（垂直外边距的合并）

合并垂直外边距
垂直相邻外边距会发生合并，并且这种合并行为值应用于外边距。如果元素有内边距或边框，它们绝对不会合并。

垂直相邻外边距都大于等于0，外边距会取较大的一个

垂直相邻外边距都为负数，取绝对值大的那个。

一正一负，则取正数减负数的绝对值的绝对值。