width:100%与width:auto区别

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: #409EFF;
      border: 10px solid #303133;
      padding: 20px;
    }

    .child {
      background-color: #F56C6C;
      border: 10px solid #909399;
      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>

width:100%与width:auto区别_第1张图片

分析比较

给parent设置了padding:20px 内边距,给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。可以看到child1的宽度是可以适应的,不会溢出其父元素。而child2的宽度则是和父元素一样大最终溢出了其父元素。

child1最终的宽度值:540px=600px(父元素宽度)−20px(child1外边距)∗2−10px∗2(child1边框值)−0px(child1内边距)
width:100%与width:auto区别_第2张图片
child2最终的宽度值:600px=600px(父元素宽度)
width:100%与width:auto区别_第3张图片

结论

  • width:100% : 子元素的 content 撑满父元素的content,如果子元素还有 padding、border等属性,或者是在父元素上设置了边距和填充,都有可能会造成子元素区域溢出显示;
  • width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。
  • 所以,在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时,它将尽可能努力保持元素与其父容器的宽度相同。而width:100%将使元素与父容器一样宽。额外的间距将添加到元素的大小,而不考虑父元素。这通常会导致问题。

你可能感兴趣的:(css,javascript,css3)