《css世界》中深藏不露的width:auto；总结

最新推荐文章于 2024-04-02 10:00:00 发布

小秧@

最新推荐文章于 2024-04-02 10:00:00 发布

阅读量1k

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/webMinStudent/article/details/122247598

版权

1.《css世界》中深藏不露的width:auto;总结

2. width属性的默认值是auto，有四种特性

充分利用可用空间，典型的就是p, div这些块级元素。默认是填满整个父元素的宽度。
收缩与包裹，典型的就是浮动，绝对定位，inline-block, table元素
收缩到最小。
超出容器限制。

我来一个一个解读这些特性。
1.充分利用可用空间，主要是以div,p这些块级元素为主。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: red;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
这里我们没有设置width,但是他的width的宽度是填满这个父元素的宽度。这就是充分利用有空间。

收缩与包裹，典型的就是浮动，绝对定位，inline-block, table元素
收缩，意思就是元素会收缩到最小为止，这时的最小的宽度由元素的内容来决定。
包裹，意思就是元素的宽度会随着内容的元素的内容的增多而变长。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: red;
            height: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <!-- <div>5</div> -->
    <div>52222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
</body>
</html>

效果图
我们没有指定div的宽度，但是还是有宽度，宽度有内容来决定。

3.超出容器限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fath {
            background-color: red;
            width: 200px;
        }
        .son {
            background-color: black;
            color: blue;

        }
    </style>
</head>
<body>
    <!-- <div>5</div> -->
    <div class="fath">
        <div class="son">52222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
    </div>
</body>
</html>

在这里插入图片描述

3.内外部尺寸与流体特性。

1.外部尺寸
简单理解为就是，元素的尺寸由外部元素(父元素)来决定，典型的就是块级元素。
外部尺寸与流体特性–>格式化宽度。

2.格式化宽度

仅在绝对定位模型中，也就是出现在position的属性值为absolute或fixed的元素中，宽度右内部尺寸决定,是具有包裹性的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        66
    </div>
</body>
</html>

在这里插入图片描述
2. 当left/right或top/bottom 对立方位属性值同时存在的时候，元素的宽度表现为 “格式化宽度”,其宽度大小相对于最近的具有定位特性position属性值不是static的祖先元素计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fath {
            position: relative;
            background-color: blue;
            height: 100px;
        }
        .son {
            position: absolute;
            left: 100px;
            height: 100%;
            right: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="fath">
        <div class="son"></div>
    </div>
</body>
</html>

此时son的宽度为, fath的宽度 - 100px - 100px。

son的宽度 = fath的宽度 - 100px - 100px

效果图
在这里插入图片描述
1.内部尺寸

内部尺寸: 假如这个元素里面没有内容，宽度时为0，那这个元素就是"内部尺寸"

特性
2. 包裹性
3. 首选最小宽度
4. 最大宽度

小秧@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《css世界》中深藏不露的width:auto；总结

1.《css世界》中深藏不露的width:auto;总结2. width属性的默认值是auto，有四种特性充分利用可用空间，典型的就是p, div这些块级元素。默认是填满整个父元素的宽度。收缩与包裹，典型的就是浮动，绝对定位，inline-block, table元素收缩到最小。超出容器限制。我来一个一个解读这些特性。1.充分利用可用空间，主要是以div,p这些块级元素为主。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫