CSS1精要2(draft1)

 CSS1精要2

三.Box模型
边缘(margin),边框(border),补白(padding),内容(content), box的大小是元素的宽度+补白(padding)+边缘(margin)
1.块元素:
display属性是block或list-item的元素都是块级元素, floating元素(float不是'none')的也是块级元素.
补白和边缘属性不允许继承.
左外边界(left outer edge)将补白,边框和边缘都算在内, 左内边界(left inner edge)只算内容.
顶部(top)是元素顶部包括补白，边框和边缘.
top和left outer edge是针对inline和floating元素定义的,对于non-floating块级元素无此定义
元素的宽度(width)是指其内容的宽度,也就是从左内边界到右内边界; 同样高度也只是内容的高度从内顶部到内底部;

1.1垂直格式化
非浮动块级(non-floating block-level)元素边缘的宽度指周围box的边界的最小值.
两个或更多周围的边缘取最大的边缘值.
对于负值的边缘, 邻近的负值边缘的绝对值的最大值减去最大的正的邻近的边缘作为box边缘.如果没有正的边缘,则取邻近的负值边缘的绝对值的最大值.

1.2水平格式化
非浮动块级元素的水平位置和大小有7个属性决定: margin-left,border-left,padding-left,width,padding-right,border-right,margin-right
这7个属性值的和等于父元素的宽度(width)

宽度的默认值是‘auto‘，如果一个元素是不是一个replaced元素,  则宽度通过计算上述7个属性的和(也就等于父元素的宽度).如果元素是一个replace元素,则宽度的auto值自动被元素的实际的宽度取代.

margin-left,width和margin-right这3个可设置成auto.对于replaced元素,宽度的auto被实际宽度取代,因此只有margin-left和margin-right可以设置成auto.

UA定义的宽度的最小值是非负的(各个元素可能不同).如果宽度小于这个限制(或者通过显式指定，或者是auto且规则使得计算的宽度小于这个最小值), 则最小值将作为宽度.

如果margin-left或margin-right显式指定为'auto', UA将通过设置一个合适的值使得7个属性的和等于父元素的宽度.

如果没有一个属性设置成'auto'， 则margin-right的值被设置成'auto'.

如果3个属性中超过1个属性设置成'auto',且width也是其中之一, 则其他属性(如margin-left，margin-right)将被设置成0，且宽度将被设置成合适的值使得7个属性的和等于父元素的宽度.

否则,如果margin-left和margin-right都设置成'auto', 则他们将设置成相等的值, 这将元素定位在父元素的中心.

如果inline或floating元素的7个属性中之一设置成'auto',　它将当作0处理.

不像垂直margin，水平的margin不会重叠.

1.3list-item元素
元素display设置成'list-item'就被格式化成块级元素.根据list-style属性决定是否有list-item标记(marker);对于从右到左的文本,标记位于box的右侧.

1.4floating元素
有float属性的元素可以定位在普通flow元素的外部同时格式化成一个块级元素.例如: 设置图片的float属性成'left'，图片移动到左边直到另一个块级元素边缘,补白或者边框.不同的flow将回绕在右侧.元素自身的边缘,边框和补白将被保留, 边缘决不会和临近的元素重叠.
浮动元素的定位遵循以下限制:
1.左浮动(left-floating)元素的左外边界不等于父元素的左内边界, 对于右浮动类型地.
2.左浮动元素的左外边界必须在每个更早(以HTML脚本)出现的左浮动元素的右外边界的右侧.早出现的元素的顶部必须比后出现的元素的底部低.对于右浮动元素类似的.
3.左浮动元素的右外边界不可以达到任意位于UA右边的右浮动元素的左外边界的右侧.
4.浮动元素的顶不可高过父元素的内顶部;
5.浮动元素的顶不可高过更早出现的浮动或者块级元素的顶;
6.浮动元素的顶不可高过网页中比其先出现的inline-box的顶;
7.浮动元素必须尽可能靠上布局;
8.左浮动元素必须尽可能地靠左布局; 右浮动元素必须尽可能地靠右布局.最好优先先布局于其左或右的元素.

2行内(inline)元素