web.Frontend

Chapter 13. User Interface Styles

CSS2定义了六种系统字体方案:
caption/icon/menu/message-box/small-caption/status-bar
这些值只能用于font属性，也就是说它们都是一系列值（字体字号等等）的集合。

系统颜色已经在CSS2.1和CSS3中去除，不建议使用。

cursor如果使用uri指定一个用户自定义的鼠标光标，则必须要一个备份的关键字属性，比如default等。

a.external {cursor: url(globe.cur), pointer;}

Firefox1.5已经支持cursor的uri属性了。

outline是独立出文档本身的，不占地方，好比一个absolute的元素，所以它的消失和出现都不会让页面reflow。outline可以不是矩形，inline元素如果折行，outline会融合。

说到outline就想起Firefox1.5刚出来时候的那个虚线框的问题了，当时我特意去翻了css规范里面关于outline的的说明，上面是这么写的：The outline may be drawn starting just outside the border edge。所以我当时认为这是Firefox1.5的bug，没想到刚看到这章，Meyer还特意把这句话拎出来提了一下，让读者注意规范的措词——规范用了一个关键字may，就是说可以这么画也可以不这么画，真是晕啊，咬文嚼字的功力了得……这么一看Firefox1.5对虚线框的处理就不能说是bug了，怎么也应该是规范允许范围内的自由发挥。有趣的是他还提到，到目前写书的时候为止，所幸所有浏览器还都是统一地按照规范的这个提议来画outline的，哪曾想Firefox居然中途改道了，也不知他们是无意还是有意。

outline不像border分上下左右，它是一刀切的，所有边都一样，因为不像border是矩形，outline可能是不规则的形状，所以也不好划分上下左右。

outline-style和border-style唯一的不同是outline没有hidden只有none，这比较好理解，因为outline是不占地方的，所以hidden还是none都一样。

outline-color和border有个很大的不同，它有一个特殊的属性invert，效果就是在outline覆盖范围内颜色反向，我想利用outline应该可以作出一些有趣的效果。如果浏览器不支持invert，那颜色将继承自其内文字的颜色。

作者还提到目前的CSS只允许在元素周围的地方画outline，如果以后CSS允许outline往里画，应该会更有趣。另外CSS没有说明如果两个不同元素的outline重叠的时候应该怎么处理。

最后说一句，IE包括IE7都不支持outline的自定义，Firefox也是1.5才刚刚开始支持

Chapter 12. Lists and Generated Content

只有display为list-item的元素才可以接受list-style一类的属性。list-style-type是会继承的，所以如果需要，则须给不同级别的list指定不同的list-style-type。list-style-image和list-style-type是不冲突的，list-style-type通常用来给list-style-image做备份，好比background-color对background-images的关系。不同的是list相关的属性是会继承的，所以如果有多层的list，需要注意将不需要image项目的list-style-image设成none。

(more…)

border-spacing，相当于原来的html属性cellspacing， 应用于table或table-inline，可取一个或两个值，取两个值时第一个是水平方向第二个是垂直方向。IE不支持。
在separated border模式下，row,rowgroup,col,colgroup的border将被忽略。IE不能应用border于这些元素之上。
关于空单元格empty cell，有empty-cell属性（应用于table-cell），可取值hide,show,inherit。IE始终hide。

collapse border模式下，相邻border的优先权决定：
1。hidden最大
2。none最小。
3。然后优先权先按照宽度定，宽者胜，之后按border style定，优先权按以下顺序递减：double, solid, dashed, dotted, ridge, outset, groove, inset.
4。如果除了颜色其他都一样，那么优先权按以下顺序递减：cell, row, row group, column, column group, table。如果这是还是是两个同级别的元素，那么由浏览器定。

table-layout为fixed width模式时要比aotumatic width模式快
fixed width模式下，每个column的宽度由第一行决定，后面行如果某个单元格再次定义宽度则会被忽略。
automatice width模式要复杂的多：
1。对于一个col中的每个cell，首先要计算最小宽度和最大宽度。
a。关于最小宽度：首先cell内容可以允许的最小宽度是内容最小宽度，文字可以换行，但是不可超出。如果这个cell的宽度小于最小内容宽度，那么cell的最小宽度就是内容宽度，如果大于，就是这个指定的width。
b。关于最大宽度：内部内容不自动换行时需要的宽度。
2。对于一个col，也要计算最小宽度和最大宽度。
a。col的最小宽度由最大的cell最小宽度指定，如果col本身设置了width且大于所有的cell最小宽度，那么这个width就是这个col的最小宽度。
b。col的最大宽度由最大的cell最大宽度指定，如果col本身设置了width且大于所有的cell最大宽度，那么这个width就是这个col的最大宽度。
3。如果一个cell跨越了多余一个col，那么这些col的最小宽度之和应该等于这个cell的最小宽度，同样这些col的最大宽度之和也应该等于这个cell的最大宽度。所有的宽度改变都应该平分到这个cell所跨度的所有col上。

这些都确定之后，开始下面的步骤：
1。如果计算出的table width不是auto，那么这个值将和所有column的width+border+cell spacing之和比较，两者取较大的作为table的最后宽度。
2。如果计算出的table width时auto，那么最后的table width就是所有column的width+border+cell spacing之和。

总之automatic width是相当滴复杂，大概了解一下即可，fixed width模式倒是蛮有用，不会被内容撑大。

Chapter 10. Floating and Positioning

关于float元素的表现，一共列了有九条原则，有好几条还非常绕口，不过多数都是显而易见的，平常使用中应该都可以发现这些特性了。
float元素的子元素如果也是float元素，那么父元素会自动扩展以包下所有的子float元素。这是CSS2.1引入的，而之前的版本没有对嵌套float元素的表现作出详细说明。
如果float元素和其他内容重叠——比如由于负值的margin——那么谁在上谁在下并不取决于源码中的出现顺序：如果是inline box，那么所有内容都覆盖在float元素之上，如果是block box，那么只有内容覆盖在float元素之上，其他如背景边框等则在float元素之下。
CSS1和CSS2中，是靠修改clear元素的top margin来使其向下推移足够的距离的，所以，任何人为指定的margin-top都将被忽略。而在CSS2.1中，引入了一个clearance的概念，他使得clear元素在渲染时不改变top margin的值，而只是增加一个额外的clearance让clear元素下移足够的距离而已，所以只要clear元素的top margin足够大，那么就可以使其和float元素底部产生一定距离。不过由于一般情况下都很难得到具体需要多少的top margin值，所以多数情况下还是设定float元素的bottom margin来产生所需空隙，这是因为floated box是包含margin在内的。

关于position
position设置为absolute时，无论原来是否block元素，都会产生一个block box。

关于containing block（实际应该是定位参考的意思，只不过规范中使用了containing box这个说法）
有一个关于初始containing block的概念，叫做根元素。在一个html文档中，一般浏览器把html元素当作根元素，当然也有一些浏览器把body当作根的，containing block的范围则是整个浏览器的显示区域。
如果一个非根元素的position被设为relative或者static，那么它的containing block则是它的一个最近的block级别或者table cell或者inline-block级别父元素的box。
如果一个非根元素的position被设为absolute，那么它的containing block则是最近的一个position为非static的父元素（可以是block也可以是inline可以是任何类型）。如果父元素是block级别的，那么containing box是这个box的padding边缘，也就是border之内的范围；如果父元素是inline级别，那么containing box则是这个inline box的内容边缘；如果没有父元素，则containing box为根元素。

Chapter 8. Padding, Borders, and Margins

top和bottom的margin，如果是用百分比表示，为了避免陷入无限循环，则该百分比是相对于宽度的。但对于positioned元素则又有不同，具体参见第十章。
对于inline nonreplaced元素的margin属性而言，不会改变该元素的line-height（能够改变line-height的只有line-height、font-size、vertical-align属性），border亦然。同样margin也可取负值。
目前CSS2.1中border还不可取百分比值。border的颜色可取transparent，不过IE/WIN尚不支持。取transparent时，border的效果和padding没什么区别，所以IE中可以用padding来模拟。

Chapter 9. Colors and Backgrounds

background-position如取关键字，则最好按照先水平后竖直的方向书写。如果只指明一个关键字，则另外一个缺省为center。如top表示top center；right表示center right等。
background-position如取百分比时，表示图片的该百分比指定的参考点和父元素的同样的百分比的参考点对齐。如果只指定一个百分比而不是两个，则另一个同样取缺省值50%。百分比是按照先水平后竖直的顺序书写的。一个值得注意的地方是负值的百分比，计算方法和正值相同，但具体效果就不像正值那么好预测了。
background-position如取数值，同百分比。CSS2.1可以使用混合的取值格式，如绝对数值和百分比混合，关键字和绝对数值混合等。
background-attachment如果被设为fixed，那么他们的位置是相对于整个可视范围而言的（也就是浏览器窗口，如果浏览器窗口没有改变大小，那么背景图片的位置也不会改变），而且所有的fixed背景图都是相对于同一个参考点，这有利于作出一些有意思的效果，比如这个页面。以前也见过这种页面，不过当时没想明白是怎么实现的也没有去深究。另外IE对非body元素的背景图像fixed的解释还有问题。
background是一个集合属性，缺省的值将取默认值，所以使用时要注意，它会覆盖掉原先定义的属性。

Chapter 7. Basic Visual Formatting

inline元素换行的时候，如果有border，两行的上下边框是并排的。上面是第二行的上边框，下面是第一行的上边框
letter-spacing 和 word-spacing 属性将被忽略，如果text-align被设为justified.

非replaced的inline元素的背景是覆盖到padding区域的。padding和border在上下方向不会影响到inline box的高度，也就不会影响包含这个inline元素的line-box的高度，maring只有左右方向有效果。CSS2.1在margin上更严格，规定margin-top和margin-bottom不能用于nonreplaced的inline元素，而不是简单的说浏览器可以忽略margin-top和margin-bottom。
这些属性会影响到replaced的inline元素的高度。

关于line-height,font-size和inline box,content area,linebox的关系
linebox是一行内容真正占据的空间，各个linebox是首尾（上下边缘）相接的。inline box是一行中各个不同元素占据的空间。linebox的顶端取最高的inline box的顶端，底端取最低的inline box的低端。所以linebox是能够包含本行各种各样的inline box的最小box。
如图所示，彩色的是各式各样的inline box，灰色的是linebox。

那么具体一个个的inlinebox是如何构成和定位的？
首先line-height定义了inline box的高度，然后font-size定义的是content area，前者减去后者的差值是leading，可正可负，上下各分布一半决定inline box的位置。
比如font-size定义成24px，line-height定义成18px,差值是-6，那么 inline box 的位置就在content area顶端往下数3px的位置开始，高18px。
如图。

另外看看下面一段代码：

<p style="font-size: 12px; line-height: 12px;">
This is text, <em>some of which is emphasized</em>, plus other text<br>
	
which is <strong style="font-size: 24px;">strongly emphasized</strong>
and which is<br>
larger than the surrounding text.
</p>

效果如下

所有的内容都有line-height:12px，也就是说每个inline box都是12px高了。但是为什么中间一行的linebox却比别的行高呢？这是vertical-align的原因，默认的vertical-align是基线对齐的，即默认值是baseline。因此虽然每个inline box高度一样，但是由于按baseline的相对位置不同，所以他们其实是参差不齐的。
具体各种vertical-align的规则这里有提过

nonreplaced 的inline元素的border是围绕着content area的，由font-size决定，和line-height无关。padding和margin亦然。
line-height 对 replaced元素的inline box 没有影响。但是有助于replaced元素的vertical-align计算。
比如这段css定义

p {font-size: 15px; line-height: 18px;}
img {vertical-align: 50%;}

会让p中img自baseline向上移动9px。
和nonreplaced元素不同，replaced元素的padding,margin,border会影响其inline box的高度。

Chapter 7. Basic Visual Formatting

margin可取负值，padding,border和width则不行。
背景是充满padding和border的，所以如果border有间隙，那么背景图会通过间隙透过来。
这点IE解释有问题，首先它把border算到了width里面，其次背景没有覆盖到border区域，只覆盖到了padding区域。

横向width是指内容宽度，而不是可视宽度，这个经常造成混乱。因为我们总习惯看到多宽就是多宽。

据说CSS3的box model中已经有提议可以让用户选择widh是内容宽度还是可视宽度，至于怎么实现就不得而知了，也许新增属性？

纵向的东西就是要注意一下margin层叠的问题，别的就没啥了。

p.s.
CSS Cheat Sheet不错的东西。现在有了pdf版，打印应该会更清楚一点了。

Chapter 6. Text Properties

text-decoration是一个集合属性，覆盖时所有内容被同时覆盖，例如有如下样式定义
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
则.stricken只有一个line-through的效果，而没有underline和overline的效果，这个规律和font等集合属性类似。
text-decoration不继承

white-space的取值nowrap,pre

还有就是pre-wrap 和 pre-line ，这两个似乎没有浏览器支持，可惜。
和pre不同的是，pre-wrap会自动换行。pre-line会将连续空格看作一个空格。

Chapter 6. Text Properties

关于line-height的理解
在一行中，inline元素会被渲染成一个inlinebox，它的高度就是font-size的大小（如果不考虑其他比如padding的影响）。line-height是行与行基线之间的最小高度，它和inline box的高度不同，可能比linebox的高度大，也可能比他小。一行中的所有inline元素都是按照基线来对齐的。line-height默认是normal，为font-size的1.2倍。

linebox的构建方式可以参考下图：

继承问题：
line-height的单位em，ex，以及百分比都是按照自身的font-size来算的。
body {font-size: 10px;}
div {line-height: 1.5em;} /* computes to ‘15px’ */
p {font-size: 18px;}

body {font-size: 10px;}
div {line-height: 1.5;} /* 18px*1.5=27px */
p {font-size: 18px;}

这个例子说明如果给line-height指定单位，则浏览器将首先计算line-height的绝对数值，然后这个结果被子元素继承。
而如果给line-height指定数值而不指定单位，则这个数值将作为一个比例值被子元素继承，从而根据它们各自的font-size计算出line-height的绝对数值。

vertical-align这个东西真是诡异，看得我头都大了……
其取值如下
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
vertical-align只用于inline元素和replaced元素（比如img和input等）以及表格单元，应用于表格单元时只有这几个值可以被识别：baseline, top, middle 和 bottom
vertical-align不继承。
baseline:让该元素的baseline和父元素的baseline对齐。
sub:让该元素的baseline（对于replaced元素则是底部）低于linebox的baseline。
super:让该元素的baseline（对于replaced元素则是底部）高于linebox的baseline。
bottom:让该元素的inlinebox底部和linebox的底部对齐。
text-bottom:让该元素的inlinebox底部和默认textbox的底部对齐，对于默认textbox比较难以理解，它的大小是从父元素的font-size中计算来的。
top和text-top类似
middle:让该元素box的中线对齐父元素的的baseline之上0.5ex的那条线，不过要当心不同浏览器对ex的计算方法不同。
如果取百分数，则将该元素的baseline（对于replaced元素则是底部）相对于父元素的baseline上移或者下移其自身line-height的该百分比率。正值上移，负值下移。
如果取一个具体数值（有单位），则将该元素从它没有应用align时候的位置上移或下移相应的距离，同样是正值上移，负值下移。
vertical-align会影响所在linebox的高度，这是显而易见的。

关于bottom和top的相关对齐方式IE和FF似乎有着不同的理解，个人认为IE理解地更合理也更符合标准一些。不过标准中对于linebox的baseline没有明确的定义，所以细究起来也说不清谁对谁错。总之垂直对齐这个属性还值得好好研究，不同大小的inline元素连成一排或者多排，各自应用不同的垂直对齐方式，究竟应该出现什么样的情况？在不同浏览器中的实际情况又如何？待试验。个人觉得今后实际使用中还是多用绝对数值定位比较方便也比较容易控制。

Chapter 5. Fonts

Serif fonts : Times, Georgia, and New Century Schoolbook.
不等宽，边角和笔画结尾处有衬线修饰

Sans-serif fonts : Helvetica, Geneva, Verdana, Arial, and Univers.
不等宽，边角和笔画结尾没有修饰

Monospace fonts : Courier, Courier New, and Andale Mono
等宽字体，可以有修饰也可以没有

Cursive fonts : Zapf Chancery, Author, and Comic Sans.
花体字

Fantasy fonts : Western, Woodblock, and Klingon.
其他类

关于font-family的写法需要注意
普通字体集不用引号扩起，比如serif等

注意
font-variant: small-caps;的用法，原来的小写字母变成小号大写。
而text-transform: uppercase | lowercase | capitalize | none | inherit 则不同。
其中capitalize是每个单词首字母大写

font这个集合属性的写法：
[[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box |small-caption | status-bar | inherit
前三个属性可选，顺序可变。font-size和font-family不可缺。
line-height是text的属性，不过可以写在font中，需要一个斜杠（/）接在font-size后面，顺序不可变。
font属性的所有省略属性会被当成默认值normal而并非inherit，此处需要特别注意。
后面的caption,icon等是让font使用系统的样式，如：
font: caption;表示使用系统的caption control样式，比如button的样式。

@font-face将在CSS2.1中去除。它有一个用处是可以使用远程字体。用法如下，待测试：
@font-face {font-family: “Scarborough Fair”; src: url(http://www.example.com/fonts/ps/scarborough.ps);}