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

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

    一、 width属性介绍

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

    二、 代码带入

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  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:autodiv>
      <div class="child hundred-percent">child2:  width:100%div>
    div>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    上图代码效果

    三、 分析比较

    我们给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% 将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。
  • 相关阅读:
    时序预测 | MATLAB实现XGBoost极限梯度提升树时间序列预测
    模板：全局平衡二叉树
    工程项目管理概述
    深度学习Day-19：DenseNet算法实战与解析
    BIOTIN-PEG-COOH,生物素PEG羧基
    Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
    C++ make_heap等堆函数的使用
    CLIP改进工作串讲（上）
    什么蓝牙耳机适合运动、运动用的蓝牙耳机推荐
    vue样式穿透的几种方式
  • 原文地址：https://blog.csdn.net/weixin_44706152/article/details/136294297