width:100% 与 width:auto 的区别

苏坡米

已于 2024-01-30 22:31:29 修改

阅读量1.1k

点赞数 15

分类专栏： CSS 文章标签： javascript 前端 css

于 2024-01-26 18:09:16 首次发布

本文链接：https://blog.csdn.net/qq_34510843/article/details/135871850

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

width:100% 与 width:auto 的区别

一、当两者的子元素没有 border 或 padding 或 margin 的时候

先看一下示例代码和效果图

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        color: white;
        font-size: 20px;
      }
      .out {
        width: 300px;
        border: 2px solid #ff00c3;
        padding: 10px;
      }
      .inner1 {
        width: auto;
        height: 100px;
        background-color: rgb(68, 0, 255);
      }
      .inner2 {
        width: 100%;
        height: 100px;
        background-color: rgb(68, 0, 255);
      }
    </style>
  </head>
  <body style="background-color: black;">
    <div class="out">
      <div class="inner1">auto</div>
      <hr>
      <div class="inner2">100%</div>
    </div>
  </body>
</html>

效果如下
在这里插入图片描述
当两者都没有 padding 或 margin 或 border 时效果都是一样的，都能填满父元素的content 部分

二、当两者的子元素有 border 或 padding 或 margin 的时候

示例代码

<!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>
      * {
        color: white;
        font-size: 20px;
      }
      .out {
        width: 300px;
        border: 2px solid #ff00c3;
        padding: 10p
      }
      .inner3 {
        width: auto;
        height: 100px;
        background-color: rgb(68, 0, 255);
        border: 10px solid yellow;
        margin: 10px;
        padding: 10px;
      }
      .inner4 {
        width: 100%;
        height: 100px;
        background-color: rgb(68, 0, 255);
        border: 10px solid yellow;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body style="background-color: black;">
    <div class="out">
      <div class="inner3">auto, border + padding + margin</div>
      <hr>
      <div class="inner4">100%, border + padding + margin</div>
    </div>
  </body>
</html>

效果图如下：
在这里插入图片描述
当两者有 padding 或 margin 或 border 时， auto 宽度的子元素 content 不再和父元素的content 对等，而是

父元素content =  子元素 content + padding + border + margin

而子元素的宽度为 100% 时，子元素和父元素的content 始终对等

综上

width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;
width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。

苏坡米

关注

15
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
width:100% 与 width:auto 的区别

width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。
复制链接

扫一扫