display: table-cell知识点总结

2018-08-21  本文已影响198人  阿尔卑斯的隆冬

1. 匿名表格元素创建

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

也就是说如下代码：

<div id="table-cell">content</div>

#table-cell {
    display: table-cell;
}

等价于

<div id="table">
    <div id="table-row">
        <div id="table-cell">content</div>
    </div>
</div>

#table {
    display: table;
    table-layout: auto;
}

#table-row {
    display: table-row;
}

#table-cell {
    display: table-cell;
}

只不过外层的table和table-row是由浏览器默认创建的，称为匿名元素；反之，如果有：

<div id="table">
    <p>paragraph1</p>
    <p>paragraph2</p>
</div>

#table {
    display: table;
}

则等价于：

<div id="table">
    <div id="table-row">
        <div id="table-cell">
            <p>paragraph1</p>
            <p>paragraph2</p>
        </div>
    </div>
</div>

#table {
    display: table;
}

#table-row {
    display: table-row;
}

#table-cell {
    display: table-cell;
}

这次，浏览器默认创建了table-row和table-cell两个匿名元素。

2. table-cell和table-row设置margin无效

对于设置为display: table-cell或display: table-row的元素，对其设置margin将不会产生任何作用。

3. table-row设置width无效

table-row作为table和table-cell的中间元素，对其设置width属性将不会产生任何作用。table-row元素的宽度由内部的table-cell或外部的table决定。

4. table、table-row、table-cell之间宽度相互作用关系

由于table可以设置为table-layout: auto或table-layout: fixed，而两者对于table、table-row和table-cell在不同情况下的宽度取值具有不同影响，所以对它们进行分类描述：

table-cell中文本最小宽度

5. 位于同一table-row下的所有table-cell高度相等

假设有如下代码：

<div class="table-cell" id="cell1">cell1</div>
<div class="table-cell" id="cell2">cell2</div>
<div class="table-cell" id="cell3">cell3</div>
<div class="table-cell" id="cell4">cell4</div>

.table-cell {
    display: table-cell;
}

#cell1 {
    height: 50px;
}

#cell2 {
    height: 60px;
}

#cell3 {
    height: 80px;
}

#cell4 {
    height: 100px;
}

由于cell1、cell2、cell3、cell4会被包含在浏览器默认创建的同一table-row下，则最终该table-row的高度会等于所有单元格中最高元素的高度（即100px），并统一所有单元格的高度等于该高度。

所有table-cell高度相等

6. table-layout: fixed令各table-cell宽度等分

当table显式设置宽度，设置table-layout为fixed且table-cell不设置宽度时，每行中的所有table-cell将平分table的宽度：

<div id="table">
    <div class="table-cell">cell1</div>
    <div class="table-cell">cell2</div>
    <div class="table-cell">cell3</div>
    <div class="table-cell">cell4</div>
</div>

#table {
    display: table;
    table-layout: fixed;
    width: 500px;
}

.table-cell {
    display: table-cell;
}

效果为：

各table-cell平分table的宽度

7. vertical-align在table-cell上的作用

vertical-align一般作用在内联元素上，主要用于内联元素间在垂直方向上的对齐。不过，vertical-align同样也可以作用于table-cell元素，目的是为了指定table-cell中的内容在垂直方向上相对于table-cell的对齐关系：

vertical-align控制table-cell内容垂直对齐

关于vertical-align的更多信息，可参考：mdn vertical-align.

8. display: table-cell在布局上的应用

应用一：元素垂直居中

使用table-cell搭配vertical-align可以十分简单地完成元素垂直居中：

<div id="box">
    <div id="content">content goes here...</div>
</div>

#box {
    display: table-cell;
    width: 200px;
    height: 100px;
    vertical-align: middle;
}
table-cell实现垂直居中

应用二：自适应两栏布局

使用table-cell完成“左侧宽度固定，右侧宽度自适应”的两栏布局：

<div id="container">
    <div id="left">content goes here...</div>
    <div id="right">content goes here...</div>
</div>

#left {
    float: left;
    width: 150px;
}

#right {
    display: table-cell;
    width: 9999px;
}

#container {
    overflow: auto;
}

应用三：等高布局

<div id=container>
    <div id="left">content goes here...</div>
    <div id="right">content goes here...</div>
</div>

#container {
    display: table-row;
}

#left,
#right {
    display: table-cell;
    width: 100px;
}

布局效果为：

table-cell实现等高布局

应用四：等宽布局

<div id="container">
    <div class="cell">content goes here...</div>
    <div class="cell">content goes here...</div>
    <div class="cell">content goes here...</div>
</div>

#container {
    display: table;
    table-layout: fixed;
    width: 450px;
}

.cell {
    display: table-cell;
}

布局效果为：

table-cell实现等宽布局
上一篇下一篇

猜你喜欢

热点阅读