width:100%和width:auto有啥区别

项目中使用了with属性,突然好奇auto 和 100% 的区别,特地搜索实践总结了一下观点

  • [一、 width属性介绍](#一、 width属性介绍)
  • [二、 代码带入](#二、 代码带入)
  • [三、 分析比较](#三、 分析比较)
  • [四、 总结](#四、 总结)

一、 width属性介绍

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

二、 代码带入

html 复制代码
<!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>

三、 分析比较

我们给parent设置了padding:20px 内边距,给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。

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

child1 最终宽度为

600px - 20px(外边框)* 2 - 0px(内边距)* 2 - 10px (边框宽度)* 2 = 540px

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

child2 最终宽度为 600px

四、 总结

  1. width:100% : 子元素的 content 撑满父元素的content,如果子元素还有 padding、border等属性,或者是在父元素上设置了边距和填充,都有可能会造成子元素区域溢出显示;
  2. width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。
  3. 所以,在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时,它将尽可能努力保持元素与其父容器的宽度相同。
    而width:100% 将使元素与父容器一样宽。额外的间距将添加到元素的大小,而不考虑父元素。这通常会导致问题。
相关推荐
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码2 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了12 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码2 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰3 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba3 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端3 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰3 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
召摇3 小时前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js