前端面试题：width:100%和width:auto的区别

width:100%和width:auto的区别

离奇6厘米

3505人浏览 · 2022-07-24 12:58:37

离奇6厘米 · 2022-07-24 12:58:37 发布

width属性100%和auto的区别

1、width:100%

表示子元素的宽度和父元素的宽度相等，不包括子元素设置的内外边距和边框的值，即子元素的宽度等于父元素content的宽度

代码如下：

    <style>
        .big {
            background-color: pink;
            width: 100px;
            height: 50px;
            padding: 10px;
        }
        
        .box1 {
            width: 100%;
            background-color: green;
        }
        
        .box2 {
            width: 100%;
            background-color: red;
            padding: 10px;
            margin: 10px;
            border: 1px #ffff;
        }
    </style>

<body>
    <div class="big">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>

运行结果：

2、width：auto

表示子元素的宽度+内外边距+边框等于父元素的宽度

代码如下：

    <style>
        .big {
            background-color: pink;
            width: 100px;
            height: 50px;
            padding: 10px;
        }
        
        .box1 {
            width: auto;
            background-color: green;
        }
        
        .box2 {
            width: auto;
            background-color: red;
            padding: 10px;
            margin: 10px;
            border: 1px #ffff;
        }
    </style>

<body>
    <div class="big">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>

运行结果：