实战笔记二（display：inline-table）
2019-02-20 本文已影响0人
calvinbj
一、inline-table
《css世界》代码：
https://demo.cssworld.cn/3/1-2.php
inline-table的盒子
inline-table得到的是，外面是“内联盒子”，里面是“table盒子”。
得到的是一个可以和文字在一行中显示的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-table {
display: inline-table; //
width: 128px;
margin-left: 10px;
border: 1px solid #cad5eb;
}
.inline-table > p {
display: table-cell;
}
</style>
</head>
<body>
和文字平起平坐的表格：<div class="inline-table">
<p>第1列</p>
<p>第2列</p>
</div>
</body>
</html>
二、width：auto
《css世界》代码：
https://demo.cssworld.cn/3/2-1.php
表现如下：
1、收缩到最小。
当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断。于是第一列被无情地每个字都断掉,形成一柱擎天。这种行为在规范中被描述为“ preferred minimun width”或者“ minimum content width”。后来还有了一个更加好听的名字min-content。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 280px;
margin: 0 auto; //这里的auto
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<td>就1列就1列就1列就1列就1列</td>
<td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
<td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
</tr>
</table>
</body>
</html>
2、充分利用可用空间。
比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫作fill-available，大家了解即可。
3、收缩与包裹。
典型代表就是浮动、绝对定位、inline-block元素或table元素，英文称为 shrink-to-fit，直译为“收缩到合适”，有那么点儿意思，但不够形象，我一直把这种现象称为“包裹性”。CSS3中的fit- content指的就是这种宽度表现。
3、超出容器限制。
除非有明确的 width相关设置，否则上面3种情况尺寸都不会主动超过父级容器宽度的，但是存在一些特殊情况。例如，内容很长的连续的英文和数字，或者内联元素被设置了 white- space: nowrap，则表现为“恰似一江春水向东流,流到断崖也不回头”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 150px;
padding: 10px;
background-color: #cd0000;
white-space: nowrap;
}
.child {
display: inline-block;
padding: 5px;
background-color: #f0f3f9;
}
</style>
</head>
<body>
<div class="father">
<span class="child">恰如一江春水向东流，流到断崖也不回头</span>
</div>
</table>
</body>
</html>
子元素既保持了inline-block元素的收缩特性，又同时让内容宽度最大，直接无视父级容器的宽度限制。
