废弃版
css1 - Formatting model
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes. (Elements that have a 'display' value of 'none' are not formatted and will therefore not result in a box.) All boxes have a core content area with optional surrounding padding, border and margin areas.
1.每一个渲染好的元素(element ),将会存在一个或多个矩形盒子当中(rectangular boxes)
2.所有的盒子由content,padding,border,margin组成
The size of the margin, border and padding are set with the margin (5.5.1-5.5.5), padding (5.5.6-5.5.10), and border (5.5.11-5.5.22) properties respectively.
The padding area uses the same background as the element itself (set with the background properties (5.3.2-5.3.7)).
The color and style for the border is set with the border properties.
The margins are always transparent, so the parent element will shine through.
The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas.
From the formatter's point of view there are two main types of elements: block-level and inline.
3.padding,margin,border有自己的属性
4.padding区域的背景色(background)与元素相同
5.边框的属性与样式由自己的属性设置
6.margin总是透明的,会被父级穿透
7.size width = element width(content) + padding + border + margin
8.块级与行内
1.Block-level elements - 块级元素
Elements with a 'display' value of 'block' or 'list-item' are block-level elements. Also, floating elements (elements with a 'float' value other than 'none') are considered to be block-level elements.
1.块级元素有三种
- display=block
- display=list-item
- display!=none float
The following example shows how margins and padding format a 'UL' element with two children. To simplify the diagram there are no borders. Also, the single-letter "constants" in this example are not legal CSS1 syntax, but is a convenient way to tie the style sheet values to the figure.
下处使用ul与两个子元素来描述margin与padding是如何工作的,为了简化,没有border,注意,单个字母的常量是伪代码
..
- 1st element of list
- 2nd element of list
_______________________________________________________
| |
| A UL margin (transparent) |
| _______________________________________________ |
| D | | B |
| | E UL padding (red) | |
| | _______________________________________ | |
| | H | | F | |
| | | a LI margin (transparent, | | |
| | | so red shines through) | | |
| | | _______________________________ | | |
| | | d | | b | | |
| | | | e LI padding (blue) | | | |
| | | | | | | |
| | | | h 1st element of list f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | max(a, c) | | | <- note the max
| | | _______________________________ | | |
| | | | | | | |
| | | d | e LI padding (blue) | | | |
| | | | | | | |
| | | | h 2nd element of list f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | c LI margin (transparent, | | |
| | | so red shines through) | | |
| | |_______________________________________| | |
| | | |
| | G | |
| |_______________________________________________| |
| |
| C |
|_______________________________________________________|
以下为我修改过的代码
- 1st element of list
- 2nd element of list
虚框内为box,虚框部分为margin,被父类穿透(transparent, so red shines through)
Technically, padding and margin properties are not inherited. But, as the example shows, the placement of an element is relative to ancestors and siblings, so these elements' padding and margin properties have an effect on their children.
If there had been borders in the above example they would have appeared between the padding and the margins.
2.padding与margin不存在继承,但会对子元素产生影响
3.边框出现在padding与margin之间
The following diagram introduces some useful terminology:
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
The left outer edge is the edge of an element with its padding, border and margin taken into account.
The left inner edge is the edge of the content only, inside any padding, border or margin.
Ditto for right.
The top is the top of the element including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements. The inner top is the top of the content, inside any padding, border or margin.
The bottom is the bottom of the element, outside any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements.
The inner bottom is the bottom of the element, inside any padding, border and margin.
4.左外边缘(left outer edge)是元素包含margin,border,padding的边缘,右侧同理
5.左内边缘(left inner edge)仅包括内容(content),右侧同理
6.顶部(top)是元素包含margin,border,padding的边缘,不同于左右边缘,他只在float或行内元素中才会被定义,底部同理
7.顶内边缘(inner top),参考左内边缘,底部同理
The width of an element is the width of the content, i.e., the distance between left inner edge and right inner edge. The height is the height of the content, i.e., the distance from inner top to inner bottom.
8.元素宽度/盖度 ==》左右/上下内边缘的距离
1.1Vertical formatting - 垂直格式
The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes.
Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values.
In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects.
In the example above, the margins between the two 'LI' elements are collapsed by using the maximum of the first LI element's 'margin-bottom' and the second LI element's 'margin-top'.
Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements would have been collapsed.
1.非浮动模式下,边框距离(margin width)指到其他盒子的最小距离
2.在垂直方向,当两个margin之间没有padding/content/border时将会进行合并
上诉描述有两种情况
- 兄弟元素的合并
- 父与第一子元素的合并
In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.
If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
3.margin可以为负,相邻边界也可以为负
1.2 Horizontal formatting - 水平格式
The horizontal position and size of a non-floating, block-level element is determined by seven properties: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these seven is always equal to the 'width' of the parent element.
By default, the 'width' of an element is 'auto'. If the element is not a replaced element, this means that the 'width' is calculated by the UA so that the sum of the seven properties mentioned above is equal to the parent width. If the element is a replaced element, a value of 'auto' for 'width' is automatically replaced by the element's intrinsic width.
Three of the seven properties can be set to 'auto': 'margin-left', 'width' and 'margin-right'. For replaced elements, a value of 'auto' on 'width' is replaced by the intrinsic width, so for them there can only be two 'auto' values.
The 'width' has a non-negative UA-defined minimum value (which may vary from element to element and even depend on other properties). If 'width' goes below this limit, either because it was set explicitly, or because it was 'auto' and the rules below would make it too small, the value will be replaced with the minimum value instead.
If exactly one of 'margin-left', 'width' or 'margin-right' is 'auto', the UA will assign that property a value that will make the sum of the seven equal to the parent's width.
If none of the properties are 'auto', the value of 'margin-right' will be assigned 'auto'.
If more than one of the three is 'auto', and one of them is 'width', then the others ('margin-left' and/or 'margin-right') will be set to zero and 'width' will get the value needed to make the sum of the seven equal to the parent's width.
Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent.
If 'auto' is set as the value for one of the seven properties in an element that is inline or floating, it will be treated as if it were set to zero.
Unlike vertical margins, horizontal margins are not collapsed.
盒子内的margin+border+padding+width == 父级元素的width
此后详细的描述了七个元素与父类元素的计算关系
function excBoxWith(el,ml,width,mr){
//*如果元素为内联或浮动,auto转换为0,无须计算
if(elIsInnerOrFloat()){
[ml,mr,width == 'auto'] = 0;
return;
}
//1.padding/border不可为负,不包含auto等(只有margin,width三类属性可以为auto)
//2.width默认auto且具有最小值
fixParams();
if(width == 'auto'){
//3.如果width为auto,则其他为auto的属性转换为0
if(mr|ml == 'auto'){
mr|ml = 0
}
}
//4.如果三类属性都不为auto,margin-right转换为auto
if(noAuto()){
mr = 'auto'
}
//保证公式->与父级元素的关系
var autoWidth = getAutoWidth($parent);
if(mr == ml == 'auto'){
//5.如果mr == ml 平分
mr = ml = autoWidth/2
}else{
//6.仅为独自的auto,获取剩下的宽度
[mr|ml|width == 'auto'] = autoWidth
}
}
1.非块级元素的水平位置与大小由七个元素组成,他们的和为父级元素的width
2.默认width=auto,他表示,如果元素为非替换元素,将由UA进行计算,以保证上面的公式可以成立,如果为替换元素,将会转换为元素的内部宽度
3.只有width,margin-left,margin-right可以为auto,当他们都为auto时,width会转换为内部宽度,即同时只能有两个auto有效果
4.宽度具有非负最小值,
当有一条auto时,UA自行计算,保证width的准确
5.如果都不是auto,margin-right将自动为auto
6.如果width为auto,其他auto属性为0
7.当且仅当左右margin均为auto,平分计算宽度,使内容区水平居中
8.如果元素为内敛或者浮动,auto转换为0
9.水平没有合并
1.3 List-item elements -- 列表项元素
Elements with a 'display' property value of 'list-item' are formatted as block-level elements, but preceded by a list-item marker. The type of marker is determined by the 'list-style' property.
display == list-item，将会转换为块级元素,但他只是列表项标记,其具体样式由list-style决定
The marker is placed according to the value of the 'list-style' property:
- first list item comes first
- second list item comes second
- first list item comes first
- second list item comes second
The above example may be formatted as:
* first list item
comes first
* second list item
comes second
* first list
item comes first
* second list
item comes second
In right-to-left text, the markers would have been on the right side of the box.
吐槽
outside/inside,是否占用li的宽度,一般直接none,然后当块级使用
1.4 Floating elements -- 浮动元素
Using the 'float' property, an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element.
For example, by setting the 'float' property of an image to 'left', the image is moved to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.
The margins, borders and padding of the element itself will be honored, and the margins never collapse with the margins of adjacent elements.
使用float属性,将会是元素脱离正常元素流(文档流),而后将其格式化为块级元素
例如将一个图片设置为float=left,该图片就会向左移动直到另一个块级元素的border/padding/margin.
元素具有margin,border,padding属性,并且不存在合并现象(margin)
A floating element is positioned subject to the following constraints (see section 4.1 for an explanation of the terms):
- The left outer edge of a left-floating element may not be to the left of the left inner edge of its parent element. Analogously for right floating elements.
- The left outer edge of a left floating element must be to the right of the right outer edge of every earlier (in the HTML source) left-floating element or the top of the former must be lower than the bottom of the latter. Analogously for right floating elements.
- The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element that is to the right of it. Analogously for right-floating elements.
- A floating element's top may not be higher than the inner top of its parent.
- A floating element's top may not be higher than the top of any earlier floating or block-level element.
- A floating element's top may not be higher than the top of any line-box (see section 4.4) with content that precedes the floating element in the HTML source.
- A floating element must be placed as high as possible.
- A left-floating element must be put as far to the left as possible, a right-floating element as far to the right as possible. A higher position is preferred over one that is further to the left/right.
浮动具有以下约束
- 左浮动的盒子的左边界不会超出容器的左内边界，右浮动同理
即浮动只存在父级元素的content区域内
- 左浮动盒子只会出现在前一个左浮动盒子的右边或下边,右浮动同理
比如瀑布,如果每个节点高度不统一还需要尽量节约空间,则无法通过float实现(垂直方向的空间,参照如上规则)
- 左浮动盒子的右外边缘不在其旁边的任何右浮动框的左外边缘的右边，右浮动同理
正常情况下块级元素不会交叉(层叠),即如果父级宽度不能同时满足左右浮动的距离,自动换行
当前行(包含其他float)无法容纳改元素时,自动换行
浮动盒子的顶部不能超出容器的顶部边界
浮动盒子的顶部不会超出前一个块级元素(block)或者是浮动元素的顶部
浮动盒子的顶部不会超出line-box元素顶部
图片环绕规则
- 先更高在更左/右
Some sample text that has no other...
The above example could be formatted as:
___________________________________
|
| max(BODY margin, P margin)
| ______________________________
| | | Some sample text
| B | P | IMG margins that has no other
| O | | _____ purpose than to
| D | m | | | show how floating
| Y | a | | IMG | elements are moved
| | r | | | to the side of the
| m | g | |_____| parent element
| a | i | while honoring
| r | n | margins, borders
| g | | and padding. Note
| i | |how adjacent vertical margins
| n | |are collapsed between non-
| | |floating block-level elements.
Note that the margin of the 'P' element encloses the floating 'IMG' element.
There are two situations when floating elements can overlap with the margin, border and padding areas of other elements:
when the floating element has a negative margin:
negative margins on floating elements are honored as on other block-level elements.
when the floating element is wider or higher than the element it is inside
出现以下情况时,浮动元素的margin,padding,border可能会与其他元素重叠
- 浮动元素有负margin,且与其他元素相同
- 浮动元素比元素本身更宽或更高
不清不楚的描述
吐槽
就浮动而言,早期的目的就是单纯的图片文字环绕,参考word
2 Inline elements -- 行内元素
Elements that are not formatted as block-level elements are inline elements. An inline element can share line space with other elements. Consider this example:
未被格式化的块级元素就是行内元素
行内元素可与其他元素共享行空间
Several emphasized words appear.
The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline elements. If the 'P' element is wide enough to format the whole element on one line, there will be two inline elements on the line:
p是块级元素,em strong是行内元素,如果p足够宽,他讲进行如下显示
Several emphasized words appear
If there is not enough room on one line an inline element will be split into several boxes:
如果宽度不够,行内元素会被切割成多个盒子
Several emphasized words appear here.
他可能如下显示
Several emphasized
words appear here.
If the inline element has margins, borders, padding or text decorations attached, these will have no effect where the element is broken:
即使行内元素有margin,border,padding或者文本装饰,他们在断开的元素之间不起作用
吐槽
单词是隐藏的行内元素,文本的显示遵守大多数写作的风格习惯,具体规范可参考word
代表问题有数字,单词如何换行,标点符号显示位置等
吐槽2
富文本都是天坑
3 Replaced elements -- 替换元素
A replaced element is an element which is replaced by content pointed to from the element. E.g., in HTML, the 'IMG' element is replaced by the image pointed to by the 'SRC' attribute. One can assume that replaced elements come with their own intrinsic dimensions. If the value of the 'width' property is 'auto', the intrinsic width is used as the width of the element. If a value other than 'auto' is specified in the style sheet, this value is used and the replaced element is resized accordingly (the resize method will depend on the media type). The 'height' property is used in the same manner.
Replaced elements can be either block-level or inline.
当替换元素的 width/height==auto 时,会转换为内容宽度
参考img,input,select,object,content属性添加的内容
4 The height of lines -- 行高
All elements have a 'line-height' property that, in principle, gives the total height of a line of text.
Space is added above and below the text of the line to arrive at that line height.
For example, if the text is 12pt high and 'line-height' is set to '14pt', an extra space of 2pt is added, namely 1pt above and 1pt below the line. Empty elements influence these calculations just like elements with content.
所有的元素都有line-height,用来描述一行文本的高度,如果高度不足,他会在每行上下方添加空格,以达到指定的高度
比如在hight = 12 line-height = 14 时,会在当前行(非content)上下放增加2px的空格,以保证格式的完整
The difference between the font size and the 'line-height' is called the leading. Half the leading is called the half-leading. After formatting, each line will form a rectangular line-box.
font-szie 与 line-height 的差被称为行距(leading,每行文字与相邻行文字之间的距离,印染上称为铅条,数值上为fs与lh的差)
渲染后,每行内容将会存在一个矩形行盒子中
leading参考
If a line of text contains sections with different 'line-height' values (because there are inline elements on the line), then each of those sections has its own half-leading above and below.
The height of the line-box is from the top of the highest section to the bottom of the lowest one. Note that the top and bottom do not necessarily correspond to the tallest element, since elements can be positioned vertically with the 'vertical-align' property. To form a paragraph, each line-box is stacked immediately below the previous line.
如果一行有不同的line-height(由行内元素产生)，则每个行内元素都会产生自己的上下half-leading
Note that any padding, border or margin above and below non-replaced inline elements does not influence the height of the line. In other words: if the 'line-height' is too small for the chosen padding or border, it will overlap with text on other lines.
1.非替换行内元素的 padding, border or margin 对height无影响
2.如果行高太小,会与其他行文本重叠
Replaced elements (e.g. images) on the line can make the line-box bigger, if the top of the replaced element (i.e., including all of its padding, border and margin) is above the tallest text section, or if the bottom is below the lowest.
3.替换元素的内容可使行宽变大
图文混排 -- 基线问题
In the normal case, when there is only one value of 'line-height' throughout a paragraph, and no tall images, the definition above will ensure that baselines of successive lines are exactly 'line-height' apart. This is important when columns of text in different fonts have to be aligned, for example in a table.
Note that this doesn't preclude the text on two adjacent lines from overlapping each other. The 'line-height' may be smaller than the height of the text, in which case the leading will be negative. This is useful if you know that the text will contain no descenders (e.g., because it only contains uppercase), so the lines can be put closer together.
行高可能小于字体大小（参考2）
5. The canvas -- 画布
略
6.'BR' elements
The current CSS1 properties and values cannot describe the behavior of the 'BR' element. In HTML, the 'BR' element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat 'BR' specially.
在html中br被描述为换行,实际也确实如此,但是css1中缺无法用属性来描述这种行为,这根本就不是一个box,所以特殊处理