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

最新推荐文章于 2024-06-07 22:07:24 发布

离奇6厘米

最新推荐文章于 2024-06-07 22:07:24 发布

阅读量2.9k

点赞数 3

本文链接：https://blog.csdn.net/Vest_er/article/details/125957712

版权

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>

运行结果：