width的默认值auto

阅读次数: 次 2020-08-22

字数：1.3k字 | 预计阅读时长：5分钟

5dd8c3f9584d6793

`width`的默认值

width属性的默认值是auto。它至少包含了以下4种不同的宽度表现

充分利用可用空间(fill-available)

像<div>、<p>元素等，如果保持它们的width为默认值，它们会尽可能占据父元素的空间。

例如，<div>元素如果没有设置宽度，则它的宽度默认是100%于父元素的width的

.box {
    height: 100px;
    background-color: lightpink;
}

如下图所示：当在<body>元素中只定义了一个<div>元素时，<body>元素的默认width，我们可以从盒模型上看出来，是794px。

当我们选择<div>元素查看时，从盒模型上可以看到，<div>元素的width值也是794px，刚好是其父元素<body>的值的100%

有一点要注意的是：这里采用的标准盒模型，即一个元素设置的width值并不是它真正占据的宽度。因为这点现在我们并不需要用到，就放到以后用到再学。

自适应(fit-content)

典型代表就是浮动、绝对定位、inline-block元素或table元素。也可以理解为包裹性。

我们以一个按钮元素为例，来说明一下什么是自适应性（包裹性）

先想一下，按钮是什么元素？

多个按钮可以共处一行显示，并且可以设置按钮的宽度，因此它是inline-block元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 240px;
            margin: 0 auto;
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <h4>2.自适应性</h4>
    <div class="box">
        <button>按钮</button>
        <button>我是一个button元素,就算我的文字内容再长,我也不会超出我的父容器宽度</button>
    </div>
</body>

</html>

页面效果如下所示：

从上述效果中可以得出一个结论：一个元素的尺寸由其内部内容决定，内部内容越宽，元素尺寸也就越宽，但是它就是再宽，也会被限制在父容器中，不会超出父容器的宽度，设置成auto的宽度是一个动态调整的值，自己能适应各种状态。

收缩到最小

待补充

超出容器限制

除非明确设置了width属性，否则元素不会主动超出父容器。但是存在一些特殊情况，比如内容很长的连续的英文和数字，或者对内联元素设置了white-space: nowrap

例如：给内联元素设置合并空白字符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 150px;
            padding: 10px;
            background-color: #cd0000;
            /* white-space属性可以继承，因此设置在父元素上，会继承到子元素上 */
            /* white-space: nowrap; */
        }

        .son {
            display: inline-block;
            padding: 5px;
            /* 当前，你将这个属性直接设置在子元素上也可以 */
            /* white-space: nowrap; */
            background-color: #f0f3f9;
        }
    </style>
</head>

<body> 
    <div class="father">
        <div class="son">恰似一江春水向东流，流到断崖也不回头</div>
    </div>
</body>

</html>