CSS：你不知道的width:auto

width一个家喻户晓的属性，我们都知道它的默认值是auto，但是我们该怎么更好的使用width:auto呢？

我们首先来看一下这个属性值的宽度表现：

充分利用可用空间。如，<div>、<p>这些块级元素的默认宽度就是100%充满父容器的。
自适应性。如，内联元素、table元素、绝对定位元素和浮动元素，由内容决定，将宽度收缩到一个合适的值。
收缩到最小。如，table-layout为auto的表格中，由内容决定，将宽度收缩到最小值。
溢出容器。如，内容很长的连续的英文和数字、内联元素被设置了white-space:nowrap。

充分利用可用空间

元素拥有了流动性才能够充分利用父元素的空间，那么什么是流动性呢？所谓流动性，不是看上去宽度100%那么简单，而是一种margin/border/padding/content自动分配水平空间的机制。

例如下面这段代码：

.container{
   width: 300px;
   background-color: #c5c5c5;
 }
 .article{
    margin: 0 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #d5d5d5;
 }
.width{
    width: 100%;
 }

不设置宽度，借助元素的流动性

设置width:100%，流动性消失

在我们写代码的时候，块级元素就不用设置width:100%，设置以后反而会失去元素的流动性。

以上讨论的都是元素的普通流，下面我们一起来看一下可不可以通过某种方式将不具有流动性的元素拥有像普通流一样的特性呢？

我们利用绝对定位就可以做到，当left、right对立方向的属性值同时存在的时候，其宽度就会具有完全的流体特性。

代码如下：

.relative{
    position: relative;
    width: 200px;
    height: 210px;
    background: #d8c7b9;
}
.absolute{
    position: absolute;
    left: 10px;
    right: 10px;
    margin: 0 10px;
    padding: 0 9px;
 }

用绝对定位实现流动性

自适应性

自适应性是指，元素尺寸由内容决定，但永远小于包含块容器的尺寸（包含块容器尺寸小于元素的“最小宽度”除外）。

这里的最小宽度是元素最适合的最小宽度。也是当宽度为0时，图片或文字的宽度。具体的表现规则如下：

东亚文字。如中文，最小宽度是每个汉字的宽度。
西方文字。最小宽度是由特定的连续的英文字符单元决定的。一般会止于空格、短横线、问号及其他非英文字符。如果想要英文和中文一样，每个字符作为最小宽度单元，可以使用word-break:break-all。
图片。最小宽度就是该元素内容本身的宽度。

具有自适应性的一个典型元素就是按钮，下面我们来看看我们常用的按钮元素是怎么体现这一特性的：

按钮的自适应性

根据内容设定宽度，当文字足够多时自动换行。

💡小技巧
需求：页面某个模块的文字内容是动态的，应视觉要求，希望文字少的时候居中显示，超过一行时居左显示。

实现代码：

.box{
    text-align: center;
    padding: 10px;
    background-color: #c5c5c5;
}
.content{
    display: inline-block;
    text-align: left;
}

利用元素的自适应性

最后编辑于：2019.07.26 19:08:19