Eli*_*iot 78 css tablelayout css-tables
鉴于以下HTML和CSS,我在浏览器中看不到任何内容(Chrome和IE在撰写本文时最新).一切都崩溃到0x0像素.为什么？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section { display: table; height: 100%; background-color: grey; }
#colLeft { display: table-column; height: 100%; background-color: green; }
#colRight { display: table-column; height: 100%; background-color: red; }
#row1 { display: table-row; height: 100%; }
#row2 { display: table-row; height: 100%; }
#row3 { display: table-row; height: 100%; }
#cell1 { display: table-cell; height: 100%; }
#cell2 { display: table-cell; height: 100%; }
#cell3 { display: table-cell; height: 100%; }
</style>
</head>
<body>
<section>
<div id="colLeft">
<div id="row1">
<div id="cell1">
AAA
</div>
</div>
<div id="row2">
<div id="cell2">
BBB
</div>
</div>
</div>
<div id="colRight">
<div id="row3">
<div id="cell3">
CCC
</div>
</div>
</div>
</section>
</body>
</html>
Too*_*eve 107
CSS表模型基于HTML表模型 http://www.w3.org/TR/CSS21/tables.html
表格分为ROWS,每行包含一个或多个单元格.细胞是ROWS的孩子,他们绝不是专栏的孩子.
"display:table-column"不提供制作柱状布局的机制(例如,具有多列的报纸页面,其中内容可以从一列流向下一列).
相反,"table-column"仅设置适用于表行内相应单元格的属性.例如,可以描述"每行中第一个单元的背景颜色是绿色".
表本身的结构与HTML中的结构相同.
在HTML中(观察"td"在"tr"内,不在"col"内):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
使用CSS表属性的相应HTML(请注意,"column"div不包含任何内容 - 标准不允许直接在列中使用内容):
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
}<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>可选:"行"和"列"都可以通过为每个行和单元格分配多个类来设置样式,如下所示.这种方法在指定要设置样式的各种单元格或单个单元格时提供了最大的灵活性:
//Useful css declarations, depending on what you want to affect, include:
/* all cells (that have "class=mycell") */
.mycell {
}
/* class row1, wherever it is used */
.row1 {
}
/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}
/* cell1 of row1 */
.row1 .cell1 {
}
/* cell1 of all rows */
.cell1 {
}
/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}
/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}
/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}
/* cell1 of all rows of a mytable */
.mytable .cell1 {
}<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>在今天<div>用于多种用途的灵活设计中,明智的做法是在每个div上放置一些类,以帮助引用它.在这里,曾经<tr>在HTML中成为class myrow,并<td>成为class mycell.这个约定使得上面的CSS选择器变得有用.
性能注意:在每个单元格上放置类名,并使用上面的多类选择器,比使用以*(例如.row1 *甚至是)结尾的选择器更好的性能.row1 > *.原因是选择器最后匹配,所以当寻找匹配元素时,.row1 *首先*匹配所有元素,然后检查每个元素的所有祖先,以查找是否有任何祖先class row1.在慢速设备上的复杂文档中,这可能会很慢..row1 > *更好,因为只检查直系亲本.但是通过直接消除大多数元素仍然要好得多.row1 .cell1.(.row1 > .cell1是一种更紧密的规范,但它是使最大的不同搜索的第一步,所以它通常是不值得的混乱,以及额外的思考过程,它是否会永远是个孩子直接加入的,子选择器>.)
取消重新表现的关键点是选择器中的最后一项应尽可能具体,绝不应该*.