探究 width:100%与width:auto区别

width:100%与width:auto区别

一、 width属性介绍

width 属性用于设置元素的宽度。width 默认设置内容区域的宽度,但如果 box-sizing 属性被设置为 border-box,就转而设置边框区域的宽度。

二、 话不多说,直接上代码看效果

xml 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    div {
      color: #fff;
      font-size: 2rem;
      text-align: center;
    }
    .parent {
      width: 600px;
      height: 600px;
      background-color: blue;
      border: 10px solid black;
      padding: 20px;
    }

    .child {
      background-color: red;
      border: 10px solid grey;
      margin: 20px;
      height: 100px;
    }

    .auto{
      width: auto;
    }
    
    .hundred-percent{
      width: 100%;
    }
  </style>

  <body>
    <div class="parent">
      parent
      <div class="child auto">child1:  width:auto</div>
      <div class="child hundred-percent">child2:  width:100%</div>
    </div>
  </body>
</html>

三、 分析比较

  1. 我们给parent 设置了padding:20px 内边距,给两个child 都设置了margin:10px的外边距。child1width 属性是auto,child2width 属性是100%

  2. 很明显地看到两个child的不同表现,child1的宽度是可以适应的,不会溢出其父元素。

  3. <math xmlns="http://www.w3.org/1998/Math/MathML"> c h i l d 1 最终的宽度值 : 540 p x = 600 p x ( 父元素宽度 ) − 20 p x ( 父元素 p a d d i n g ) − 20 p x ( c h i l d 1 m a r g i n ) − 10 p x ( 父元素 b o r d e r ) − 10 p x ( c h i l d 1 b o r d e r ) child1最终的宽度值: 540px = 600px(父元素宽度) - 20px(父元素padding) - 20px (child1 margin) - 10px(父元素border) - 10px (child1border) </math>child1最终的宽度值:540px=600px(父元素宽度)−20px(父元素padding)−20px(child1margin)−10px(父元素border)−10px(child1border)

  1. 而child2的宽度则是和父元素一样大最终溢出了其父元素。

  2. <math xmlns="http://www.w3.org/1998/Math/MathML"> c h i l d 2 最终的宽度值 : 600 p x = 600 p x ( 父元素宽度 ) child2最终的宽度值: 600px = 600px(父元素宽度) </math>child2最终的宽度值:600px=600px(父元素宽度)

四、 结论

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

width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。

> 所以,在开发中尽量还是选择```width:auto```,因为当从边距、填充或边框添加额外空间时,它将尽可能努力保持元素与其父容器的宽度相同。而```宽度:100%```将使元素与父容器一样宽。额外的间距将添加到元素的大小,而不考虑父元素。这通常会导致问题。

相关推荐
喧星Aries2 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺4 分钟前
useState:批处理与函数式更新
前端·react.js·面试
一块plus5 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福6 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003816 分钟前
JWT 和 token 区别
前端
盏茶作酒297 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天8 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪8 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽8 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课9 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js