仓酷云

标题: 来谈谈：CSS结构带来的伟大影响:CSS display属性值 [打印本页]
作者: 山那边是海    时间: 2015-1-16 00:07
标题: 来谈谈：CSS结构带来的伟大影响:CSS display属性值
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
应原书编纂请求，先在文章顶部给出链接：《EverythingYouKnowAboutCSSIsWrong》http://www.sitepoint.com/books/csswrong1/
这本书是10月刊行的旧书，为了不版权纠葛，如要转载本文请保存以上链接，并遵守该CC2.5协定。
从digital-web的首页上看到一个题目党《EverythingYouKnowAboutCSSIsWrong》，被雷过以后细心看了下原文，发明了一种新的CSS结构思绪（实在就是具体先容了display:table属性）。在IE6还是霸道的时期谈这类手艺为时过早，全当是实习英文翻译贴出来给人人分享下，接待人人指导不敷的地方。
—————————以下是中文翻译——————————–
当IE8公布时，它将撑持良多新的CSSdisplay属性值，包含与表格相干的属性值：table、table-row和table-cell，它也是最初一款撑持这些属性值的支流扫瞄器。它标记着庞大CSS结构手艺的停止，同时也给了HTML表格结构致命一击。终极，利用CSS结构来制造出相似于table结构的栅格将会变得非常敏捷和复杂。
网页元素使用上那些与表格相干的display属性值后，可以仿照出与表格不异的特征。我将会在该文中给人人演示这类办法给CSS结构带来的伟大影响。
利用CSS表格
CSS表格可以办理一切那些我们在利用相对定位和浮动定位举行多列结构时所碰到的成绩。比方，“display:table;”的CSS声明可以让一个HTML元素和它的子节点像table元素一样。利用基于表格的CSS结构，使我们可以轻松界说一个单位格的界限、背景等款式，而不会发生由于利用了table那样的制表标签所招致的语义化成绩。
在深切懂得这类办法之前，让我们先来写份HTML文档实例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en-US">
<head>
?HTMLheadcontent…
</head>
<body>
<divid="wrapper">
<divid="header"></div>
<divid="main">
<divid="nav">
?navigationcolumncontent…
</div>
<divid="extras">
?newsheadlinescolumncontent…
</div>
<divid="content">
?mainarticlecontent…
</div>
</div>
</div>
</body>
</html>
这份HTML源代码满意了内容出现方面的请求。先是导航栏，然后是附加栏，最初是内容栏。
我们一样必要将以下CSS款式使用上往：
#main{
display:table;
border-collapse:collapse;
}

#nav{
display:table-cell;
width:180px;
background-color:#e7dbcd;
}

#extras{
display:table-cell;
width:180px;
padding-left:10px;
border-right:1pxdotted#d7ad7b;
}

#content{
display:table-cell;
width:380px;
padding-left:10px;
}
这类基于表格的新CSS结构体例可以准确的在IE8、Firefox、Safari和Opera（译者注：包含FF2/FF3/Google都经由过程了测试）中显现出来。上面这张图片是它在IE8中的模样：
我们轻松完成了三栏等高结构，而无需利用假造背景图片之类的技能，更不必忧虑定位和扫除浮动的成绩！


它是如何完成的？
你能够给HTML元素指定与表格相干的display属性值，使得它们像表格元素那样衬着。以下是这些可用的display属性值：

等等……岂非用table结构不是错的吗？
大概你会对我们下面给出的结构实例有点不爽——究竟，正如我本人也是一位WEB尺度化的反对者，我们不都一向保持不该该利用table来举行结构吗？
table元素在HTML傍边是一个包括语义的标签：它形貌甚么是数据。因而，你只能用它来标志那些必要制表的数据，比方一张财政信息表。假如数据可以以电子表格的情势保留在你的电脑中，那它在HTML文档中极可能必要用到table标签举行标志。
从另外一方面来看，display的table属性值只是声了然某些元素在扫瞄器中的款式——它不包括语义。假如利用table元从来举行结构，它将会告知客户端：这些数据是制表的。利用一些display属性被设置为table和table-cell之类的div标签，除告知客户端以某种特定的款式来衬着它们之外，不会告知客户端任何语义，只需客户端可以撑持这些属性值。
固然，我们一样还要注重，当我们真的必要制表数据的时分不要利用一年夜堆被声明为display:table;的div元素。
我们下面的谁人例子是一个复杂的单行三列结构，无需费经心思，我们就可以够利用这类手艺轻松完成庞大的栅格结构。
匿名表格元素
CSS表格除包括table结构的一般划定规矩以外，同时另有着CSStable结构的超强特征：短少的表格元素会被扫瞄器以匿名体例创立。CSS2.1标准中写道：
CSS2.1表格模子中的元素，大概不会全体包括在除HTML以外的文档言语中。这时候，那些“丧失”的元素会被摹拟出来，从而使得表格模子可以一般事情。一切的表格元素将会主动在本身四周天生所需的匿名table工具，使其切合table/inline-table、table-row、table-cell的三层嵌套干系。
这段话的意义是，假如我们为元素利用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，扫瞄器会默许创立出一个表格行，就仿佛文档中真的存在一个被声明的表格行一样。
让我们用个复杂的例子来研讨下它的这一特征：以下是三栏栅格结构。我们将会用三份分歧的HTML样例，而它们将体现出不异的视觉效果。
起首，以下是可以天生三列结构样例的个中一份：
<divclass="container">
<divclass="row">
<divclass="cell">CELLA</div>
<divclass="cell">CELLB</div>
<divclass="cell">CELLC</div>
</div>
</div>
这份嵌套的div元素看起来不是那末让人镇静，稍等一会，我们如今来做点甚么。它的CSS款式也十分复杂：
.container{
display:table;
}

.row{
display:table-row;
}

.cell{
display:table-cell;
width:100px;
height:100px;
border:1pxsolidblue;
padding:1em;
}
以上CSS给类名为container的元素界说了“display:table;”属性，类名为row的元素界说了“display:table-row;”，类名为cell的元素界说了“display:table-cell;”，一样还给它界说了边框、高度和宽度值。
以上HTML文档明白地为三个单位格界说了包括它的表格和表格行，利用到了一切我们创立的CSS类名。但是，我们能够削减这些标签，移除一行div元素尝尝：
<divclass="row">
<divclass="cell">CELLA</div>
<divclass="cell">CELLB</div>
<divclass="cell">CELLC</div>
</div>
即便下面的代码漏掉了声明表格的那一行，扫瞄器仍将创立一个匿名的表格行。我们还能够移除更多的代码：
<divclass="cell">CELLA</div>
<divclass="cell">CELLB</div>
<divclass="cell">CELLC</div>
以上代码漏掉了声明表格和表格行的代码，扫瞄器一样会创立出这些匿名的盒工具。即便短少这些标签元素，终极的效果仍旧是一样的。



创立匿名表格元素的划定规矩
这些匿名的盒工具不是用把戏变出来的，它们也不会主动往你的HTML源码中增加新的标签。为了完整发扬出匿名表格元素的上风，你最好可以对创立它们的划定规矩有所懂得。假如结构中挪用了匿名元素，扫瞄器将会依据必要创立一个匿名的盒工具并将它的CSSdisplay属性设置为table、table-row或table-cell中的一个。
假如某个元素已被设置为“display:table-cell;”，而它的父节点（包括它的容器）没有被设置为“display:table-row;”属性，那末扫瞄器将会创立一个被设置为“display:table-row;”的匿名盒工具来嵌套它。而且与之相邻的属性为“display:table-cell;”的兄弟节点也城市被这个匿名盒工具所包括，直到碰着一个没有被设置为“display:table-cell;”的元素而停止这一行。以下是相干的代码样例：
<divclass="cell">CELLA</div>
<divclass="cell">CELLB</div>
<divclass="cell">CELLC</div>
<div>Notacell</div>
下面的三个类名为“cell”的div元素均被设置为“display:table-cell;”，它们将会像一个单行表格的三个单位格一样并列排布。最初一个div元素则不会被包括在这一表格行傍边，由于它没有被设置成“display:table-cell;”。
假如某个元素被设置为“display:table-row;”，而它的父节点没有被设置为“display:table;”（大概“display:table-row-group;”），扫瞄器将会创立一个被设置为“display:table;”的匿名盒工具来嵌套它，与之相邻的属性为“display:table-row;”的兄弟节点也城市被包括个中。一样，假如某个元素被设置为“display:table-row;”，但它的外部却短少“display:table-cell;”的元素，那末一个匿名的table-cell将会被创立，用来包括该table-row中的一切元素。
请看以下代码：
<divclass="row">ROWA</div>
<divclass="row">ROWB</div>
<div>Notarow</div>
下面两排类名为“row”的div元素被设置了“display:table-row;”属性，它们将会像单列表格中的两行一样顺次分列。最初一个div元素则不会包括在这个匿名的table中。
以此类推，假如某个元素的display属性值被设置为与表格相干的值，如table-row-group、table-header-group、table-footer-group、table-column、table-column-group和table-caption，但同时又没有一个被设置为“display:table;”的父元素，那末一个匿名的盒工具将会被创立用来包括该元素和它的某些兄弟节点。
其他有效的表格属性
当利用CSS表格时，由于这些元素服从table结构的一般划定规矩，以是你还能够给它们使用别的表格相干的CSS属性。上面是一些派得上用处的属性：
table-layout
将table-layout属性设置为fixed可让扫瞄器依照流动算法来衬着单位格的宽度。这在流动宽度结构中十分有效，比方我们最下面的那段结构代码。
Border-collapse
和一般的HTML表格一样，你可使用border-collapse属性来界说你的table结构元素之间利用何种情势的边框，是共用边框（赋值为collapse）仍是利用各自自力的边框（赋值为separate）。
Border-spacing
假如你声了然“border-collapse:separate;”，那末你就能够利用border-spacing属性来界说相邻两个单位格边框间的间隔。
制造完善的栅格
制造等高栅格关于传统CSS结构手艺来讲已成为一个困难，但是利用符合的CSS表格则很简单完成。比方，假如我们想制造一个包括图片和题目的影象图库栅格（以下图），利用CSS表格很快就可以弄定。
以下是我们这个影象图库的代码：
<divclass="grid">
<divclass="row">
<divclass="image">

<divclass="image">

<p>
Thisrobinhasbeenvisitingourgardenoverthesummer.
Heisveryfriendlyanddoesntseemtobetooworriedaboutsharingthegardenwithus.
</p>
</div>
</div>
</div>
每张图片被一个img标签援用，它的题目包括在P元素中，它们均被包括在一个类名为“image”的div元素中。统一行的div被一个类名为“row”的div元素包括，全部影象图库被一个类名为“grid”的div元素包括。
完成这个结构的CSS代码非常复杂：
.grid{
display:table;
border-spacing:4px;
}
.row{
display:table-row;
}
.image{
display:table-cell;
width:240px;
background-color:#000;
border:8pxsolid#000;
vertical-align:top;
text-align:center;
}
.imagep{
color:#fff;
font-size:85%;
text-align:left;
padding-top:8px;
}
以上CSS代码简明易懂，大概你还注重到了我们是如何经由过程border-spacing属性来把持单位格图象之间的间隔的。制造一张栅格结构变得再复杂不外了，同时我们还能够制止那些利用float元素完成等高结构所带来的贫苦。
将实际使用于实战
本文展现了CSSdisplay属性中表格相干属性值的基本用法，开辟者不休勉力经由过程CSS来完成牢靠的基本栅格结构，而这类办法终极会使其变得更复杂。我们已对CSS表格结构做了一个简明易懂的先容，研讨了display属性中各类表格相干的属性值，找出了匿名表格元素的实质，别的还发明了一些别的有效的CSS表格属性。
接上去的一步就看你了，你已懂得到利用CSS表格制造栅格结构的潜力，带着猎奇心往本人实验下吧！使用从本文学到的常识，你能够入手下手理论你本人的CSS表格结构并创造一些新的手艺。

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
作者: 蒙在股里    时间: 2015-1-18 05:15
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者: 兰色精灵    时间: 2015-1-24 12:16
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 爱飞    时间: 2015-2-1 13:37
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
作者: 若相依    时间: 2015-2-7 07:47
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 活着的死人    时间: 2015-2-21 06:17
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
作者: 分手快乐    时间: 2015-3-6 19:58
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 莫相离    时间: 2015-3-13 08:52
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 透明    时间: 2015-3-20 18:26
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2