Flash the Future

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模�倒是蛮有用，�会被内容撑大。

今天在瀚海上对于一个问题的回帖，整�一下，都是我的个人�解，�当之处一起探讨。

网页�表达的内容就是信�，比如你�呈现的文字�图片�多媒体等信�，结构就是这些内容的方�，表现就是CSS，行为就是DOM,JavaScript等。

所以通俗点说，HTML就是结构。

由于HTML的开放性，结构å?¯ä»¥æœ‰å¾ˆå¤šç§?，最终呈现在用户é?¢å‰?å?Œæ ·çš„内容，其HTML结构å?´å?¯ä»¥å¤šç§?多样，而好的HTML是“结构化â€?的，也就是有æ?¡ç?†çš„，基于语义的。比如<p>表示一个段è?½ï¼Œ<h3>表示一个三级标题，<address>表示一个地å?€ç­‰ç­‰ã€‚而以å‰?用table布局很大程度上破å??了这ç§?语义的è¦?求，充斥在整篇文档中的table,tr,td标签就ä¸?是结构化的，他们的出现是没有æ„?义的，纯粹是为了布局的需è¦?。类似的还有<font>，<b>标签等，这些都是没有结构æ„?义而纯粹为了样å¼?而存在的标签。

现在æ??倡的HTML写法是标签è¦?言之有物，ä¸?è¦?è¯?ä¸?è¾¾æ„?，也就是用什么和怎么用的问题。比如<b>就属于ä¸?该用的标签，因为它ä¸?表示任何结构，我们ä¸?知é?“它里é?¢æ˜¯ä»€ä¹ˆä¸œè¥¿ï¼Œå?ªçŸ¥é?“它表示“加粗â€?，但加粗是CSS也就是表现层é?¢çš„东西，这属于“言之无物â€?。而如果将一个本是标题的内容用<p>括起æ?¥ä¹Ÿæ˜¯é?žç»“构化的，这属于“è¯?ä¸?è¾¾æ„?â€?。

关于<div>（以�<span>），它是一个没有特定�义�有普适�义的标签，表示一个区域。因为HTML中具有特定�义的标签实在是太少了（所以W3C主张从HTML�XML过渡），我们�些情况下�有��使用<div>，<span>等标签和id，class等属性�组织一个特定的内容。所以我觉得<div><span>都是比较尴尬的标签，�能算是�语义的，�是由于HTML的局�，我们�得�大�的使用他们。

W3Cæ??倡结构ã€?表现ã€?行为三者分离，任何一个层é?¢çš„改å?˜éƒ½ä¸?应当ä¾?赖其他层é?¢ã€‚这是一ç§?很好的æ€?想，ä¸?过在目å‰?技术局é™?的情况下这还是一ç§?ç?†æƒ³çŠ¶æ€?，因为无论是HTML，CSS，DOM等规范还是æµ?览器的支æŒ?等都还ä¸?完善，至少是ä¸?足以支撑这ç§?æ€?想，我们所能å?šçš„å?ªæ˜¯å°½åŠ›å¦‚此了。

畅想一下未æ?¥è¿™ç§?ç?†æƒ³çš„三者分离的状况下å?šç½‘站，需求通过一系列沟通将转å?˜ä¸ºä¸€ä¸ªç»“构化文档（比如XML），å?Œæ—¶åˆ°è¾¾å‰?å?°å’Œå?Žå?°ï¼Œç„¶å?Žä¸¤è€…一起开å?‘，互ä¸?干扰。å‰?å?°ç¾Žå·¥è´Ÿè´£å‡ºè®¾è®¡å›¾å¹¶å’Œå®¢æˆ·æ²Ÿé€šï¼Œå®šç¨¿å?Žç„¶å?Žé€šè¿‡CSS和结构化文档整å?ˆï¼Œå?Žå?°ç¨‹åº?员则直接按需求å?šåŠŸèƒ½æ¨¡å?—，最å?Žå‰?å?°å?Žå?°æ— ç¼?æ•´å?ˆ……

CSS2.1:

支�counter�相关:

http://www.w3.org/TR/CSS21/syndata.html#counter

支�cursor的uri属性:

http://www.w3.org/TR/CSS21/ui.html#propdef-cursor

支�outline�相关:

http://www.w3.org/TR/CSS21/ui.html#propdef-outline

改善了quote:

http://www.w3.org/TR/CSS21/generate.html#propdef-quotes

改善了visibility，具体是collapse:

http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

CSS3:

支�的伪类

:only-child

http://www.w3.org/TR/css3-selectors/#only-child-pseudo

:disabled,:enabled

http://www.w3.org/TR/css3-selectors/#enableddisabled

:valid,:invalid

http://www.w3.org/TR/css3-ui/#pseudo-validity

:in-range,:out-of-range

http://www.w3.org/TR/css3-ui/#pseudo-validity

支��大多数cursor属性

http://www.w3.org/TR/css3-ui/#cursor0

支�outline-offset

http://www.w3.org/TR/css3-ui/#outline-offset0

支�columns布局

http://www.w3.org/TR/2001/WD-css3-multicol-20010118

支�overflow-x和overflow-y

http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-overflow-x

根�IEblog的消�，IE7中这些CSS hack将��适用，记一下：

Call to action: Please check your pages
Here is a list of common CSS hacks to look out for (please also consider their variations):

• html > body http://css-discuss.incutio.com/?page=ChildHack
• * html http://css-discuss.incutio.com/?page=StarHtmlHack
• head:first-child + body http://centricle.com/ref/css/filters/tests/owen/
• head + body http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
• body > element http://css-discuss.incutio.com/?page=ChildHack

We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments .

以å?Žå?¯ä»¥ç”¨æ?¡ä»¶æ³¨é‡Šæ?¥å†™é’ˆå¯¹ä½Žç‰ˆæœ¬IEçš„hack，也就是上é?¢æ??到的 conditional comments，比如这样：
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->


�自Juicy Studio的一篇文章Form Help without Popups
æ??高网站亲和力的一ç§?方法，关于表å?•å†…容的æ??示和帮助ä¸?用新窗å?£æ˜¾ç¤ºè€Œåœ¨æœ¬é¡µæ˜¾ç¤ºï¼Œå½“用户点击相应按钮时利用JavaScriptå’ŒCSS显示或éš?è—?æ??示。如果æµ?览器ç¦?用了JavaScript也å?¯ä»¥ä¿?è¯?用户能正常看到æ??示内容。

Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. This article illustrates a scripting technique to get around the problem without having to open a new window.

一篇好文：On having layout
介�了IE的hasLayout属性，为什么IE在渲染页�的时候总有很多诡异的bug呢，这篇文章告诉我们，罪�祸首就是IE页�元素的layout模型。
至于什么是layout，它是怎么影�IE的页�渲染的，仔细看看�。

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�使其�下推移足够的�离的，所以，任何人为指定的top-margnin都将被忽略。而在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是一个集�属性，缺�的值将�默认值，所以使用时�注�，它会覆盖掉原先定义的属性。

��Windows Vista beta的推出，IE7的beta 1也开始��web开�者进行测试，究竟IE7给我们带�什么呢？对于所谓安全性的修正以�风格�过大幅修改的界�我到�是很感冒，我关心的�是页�显示部分，毕竟作为一个�览器，渲染页��是主�任务。今天在IEBlog看到一个激动人心的post，声称在beta2之�，IE7至少已�实现了如下的bug修正和功能添加：

bug fiexd：

• Peekaboo bug
• Guillotine bug
• Duplicate Character bug
• Border Chaos
• No Scroll bug
• 3 Pixel Text Jog
• Magic Creeping Text bug
• Bottom Margin bug on Hover
• Losing the ability to highlight text under the top border
• IE/Win Line-height bug
• Double Float Margin Bug
• Quirky Percentages in IE
• Duplicate indent
• Moving viewport scrollbar outside HTML borders
• 1 px border style
• Disappearing List-background
• Fix width:auto

很多都是让人头疼的著å??çš„bug，他们的修正，å?¯ä»¥è¯´PositionIsEverythingå’ŒQuirksmode等站点功ä¸?å?¯æ²¡ï¼Œå°±æ˜¯é€šè¿‡å®ƒä»¬ï¼Œæˆ‘们看到了IE“ç?µå¼‚â€?的一é?¢ï¼Œä¹Ÿå­¦åˆ°äº†ä¸?少解决bug的方法 : )

features added:

• HTML 4.01 ABBR tag
• Improved (though not yet perfect) <object> fallback
• CSS 2.1 Selector support (child, adjacent, attribute, first-child
  etc.)
• CSS 2.1 Fixed positioning
• Alpha channel in PNG images
• Fix :hover on all elements
• Background-attachment: fixed on all elements not just body

我比较喜欢的是其中：对CSS2.1å?„ç§?选择符的支æŒ?，特别是属性选择符和孩å­?选择符等，它们真的很方便，如果没有这些选择符，å?Œæ ·çš„效果，需è¦?大段大段的jsæ‰?能实现；对:hover伪类的广泛支æŒ?，以å‰?å?ªèƒ½ç”¨äºŽa标签的，现在啥都å?¯ä»¥ç”¨äº†ï¼Œå—¯ï¼Œä¸?错；å?¦å¤–é€?明通é?“PNG的支æŒ?，这个好处ä¸?用细说了，我始终å?šä¿¡ï¼ŒIE7æ™®å?Šä¹‹å?Žï¼ŒPNG’s gonna rock the web :)

�外在IEBlog的这个post上也看到很多诚�的�语，想�IE开�组的�志们也�容易，特别是看了�个比较激进的comment之�：（大�）MS总是用那些早就应该实现而迟迟没有实现的功能当作���惠�拉拢和讨好web开�者……MS别指望IE7的这点�改进就�以消除我们对你的憎�……�真正讨得web开�者得欢心，MS�的远远�够……等等。��骂得蛮有��的，看看IE6这么长时间�的无作为就知�MS的风格了，�过我们也�喜的看到IE��地在这些方�有了改观，比如这个致力于��用户��以�和用户交�的IEBlog，比如最近MS和WaSP的�作，但愿这些现象并�是MS是���惠，但愿IE���给web开�者带�噩梦。

刚刚�看到WaSP上有了新blog：
Three cheers for transparency! Three cheers for openness! Three cheers for standards in IE7!