css-width的值

前言

css中,元素 width默认的值是auto。在我们日常进行响应式布局的时候,可能要通过百分比进行设计。
本文主要记录一下width:auto 和 width: 100%的区别。

width: auto

  • 子元素(包括content+padding+border+margin)撑满整个父元素的content区域。
  • 子元素有margin、border、padding时,会减去子元素content区域相对应的width值
  • 父元素的content = 子元素(content + padding + border + margin )

    width: 100%

  • 强制将子元素的content区域 撑满 父元素的content区域
  • 子元素有margin、border、padding时,不改变子元素content区域的width,而是溢出父盒子,保持原有值
  • 父元素的content = 子元素的content

    代码示例

    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
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
    margin: 0;padding: 0;
    }
    body {
    background: #dcdcdc;
    }
    .box {
    width: 400px;
    border: 3px solid red;
    padding: 0 50px;
    background: white;
    }
    .box1 {
    width: auto;
    height: 100px;
    background: pink;
    padding: 0 50px;
    margin: 0 50px;
    border-width: 0 50px;
    border-style: solid;
    border-color: green;
    }
    .box2 {
    width: 100%;
    height: 100px;
    background: gold;
    padding: 0 50px;
    margin: 0 50px;
    border-width: 0 50px;
    border-style: solid;
    border-color: green;
    }
    .box3 {
    width: 100px;height: 100px;background: orange;
    }
    .box4 {
    float: left;
    width: 50px;height: 50px;background: pink;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    </div>
    </body>
    </html>

总结

子元素width属性设置百分比的时候,子元素盒子的content区域会根据父亲元素content的值进行比例扩大缩写。而采用默认是width: atuo;的时候,则会将子元素所有的盒子区域变成父亲元素的content区域大小。
所以在设置子元素width: auto;的时候,父亲元素进行padding内压,会使得子元素看起来水平居中一样。
同理,height: auto; 也可以实现垂直居中。