CSS width 和 height 的:auto 和 100%

6,757 阅读3分钟

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

CSS width 和 height 的:auto 和 100%

一、 width:auto和height:auto

width、height的默认值都是auto

width: auto

块级元素中,width: auto会自适应撑满父元素宽度(流体布局中)。这里的撑满和width: 100%的固定宽度不同,而是像水一样能够根据margin值的不同而自适应父元素的宽度。

内联元素中,width: auto则呈现出包裹性,即元素宽度由子元素的宽度决定。

height: auto

无论内联元素还是块级元素,height: auto都是呈现出包裹性,即元素高度由子元素的高度决定。

正常的流体布局中,块级元素会默认占满一行。这里的占满可以分为两种情况。

  1. 块级元素的width固定值marginautomargin会撑满剩下的空间;
  2. 块级元素的margin固定值widthautowidth会撑满剩下的空间。
.container{
    width: 150px;
    margin: auto;
    height: 50%;
    background-color: aqua;
}

image.png

.container {
    width: auto;
    margin: 0 50px;
    height: 50%;
    background-color: aqua;
}

image.png

二、 width:100%和height:100%

width:x% :定义基于包含块(父元素)宽度的百分比宽度。 height:x%:基于包含它的块级对象的百分比高度。

<body>
    <div class="wrap">
        <div class="container">
            <div class="content">
                Hello World!
            </div>
        </div>
    </div>
</body>
        .wrap {
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }

        .container {
            position: relative;
            width: 50%;
        }

        .content {
            width: 100%;
            position: absolute;
            background-color: aqua;
        }

image.png

这里 .content的100%是相对于 .container

        .wrap {
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }

        .container {
            /* position: relative; */
            width: 50%;
        }

        .content {
            width: 100%;
            position: absolute;
            background-color: aqua;
        }

image.png

这里 .content的100%是相对于 .wrap




这里要注意区分父元素包含块的概念
一般情况下,包含块就是父元素,而当元素设置了定位等脱离了常规文档流之后,包含块就不一定是父元素了,需要根据具体情况分析

三、height:100% 和 height:auto 的区别

height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。

注意父元素height: auto会导致子元素height: 100%百分比失效。
如果想要子元素的height:100%生效,
那么父元素需要设定显式高度值;或者子元素使用绝对定位。(绝对定位元素百分比高度根据父元素的padding box计算,非绝对定位元素百分比高度是根据父元素的content box计算)

此处补充一个demo
通过切换.content的position开关,观察.content的高度变化。

position:absolute 打开时
.content的父元素是 .wrap,高度根据.wrap 的 padding box 计算

position:absolute 关闭时
.content的父元素是 .container,高度根据.container 的 content box 计算


<!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>
        html,body{
            margin: 0;
            padding: 0;

        }
        .wrap {
            width: 100%;
            height: 200px;
            background-color: aquamarine;
            position: relative;
            padding: 50px 0;
        }

        .container {
            height: 100px;
            background-color: rgb(255, 192, 203);
            padding: 50px 0;
        }

        .content {
            height: 50%;
            /* position: absolute; */
            background-color: aqua;
        }
    </style>
</head>

    <body>
        <div class="wrap">
            <div class="container">
                <div class="content">
                    Hello World!
                </div>
            </div>
        </div>
    </body>
    
</html>




参考文章:
height:100%和height:auto的区别