html inline-table,实战笔记二（display：inline-table）

一、inline-table

inline-table的盒子

inline-table得到的是，外面是“内联盒子”，里面是“table盒子”。

得到的是一个可以和文字在一行中显示的表格。

Document

.inline-table {

display: inline-table; //

width: 128px;

margin-left: 10px;

border: 1px solid #cad5eb;

}

.inline-table > p {

display: table-cell;

}

和文字平起平坐的表格：

第1列

第2列

二、width：auto

表现如下：

1、收缩到最小。

当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断。于是第一列被无情地每个字都断掉,形成一柱擎天。这种行为在规范中被描述为“ preferred minimun width”或者“ minimum content width”。后来还有了一个更加好听的名字min-content。

Document

table {

width: 280px;

margin: 0 auto; //这里的auto

text-align: left;

}

就1列就1列就1列就1列就1列

当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；

当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；

2、充分利用可用空间。

比方说，

、

这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫作fill-available，大家了解即可。

3、收缩与包裹。

典型代表就是浮动、绝对定位、inline-block元素或table元素，英文称为 shrink-to-fit，直译为“收缩到合适”，有那么点儿意思，但不够形象，我一直把这种现象称为“包裹性”。CSS3中的fit- content指的就是这种宽度表现。

3、超出容器限制。

除非有明确的 width相关设置，否则上面3种情况尺寸都不会主动超过父级容器宽度的，但是存在一些特殊情况。例如，内容很长的连续的英文和数字，或者内联元素被设置了 white- space: nowrap，则表现为“恰似一江春水向东流,流到断崖也不回头”。

Document

.father {

width: 150px;

padding: 10px;

background-color: #cd0000;

white-space: nowrap;

}

.child {

display: inline-block;

padding: 5px;

background-color: #f0f3f9;

}

恰如一江春水向东流，流到断崖也不回头

子元素既保持了inline-block元素的收缩特性，又同时让内容宽度最大，直接无视父级容器的宽度限制。