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

一、inline-table

《css世界》代码：
https://demo.cssworld.cn/3/1-2.php

inline-table的盒子

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

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

    
    
    


    和文字平起平坐的表格：

    
第1列
    
第2列

二、width：auto

《css世界》代码：
https://demo.cssworld.cn/3/2-1.php

表现如下：

1、收缩到最小。

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

    
    
    


    

    

        
就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，则表现为“恰似一江春水向东流,流到断崖也不回头”。

    
    
    


    

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

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