witdh:auto 与 witdh:100% 的区别 #

.parent {
    width: 800px;
    margin: 50px auto;
    border: 2px solid red;
}
.child1 {
    background: orange;
}
.child2 {
    width: 100%;
    margin-left: 100px;
    padding-left: 100px;
    background: blue;
}
.child3 {
    width: auto;
    margin-left: 100px;
    padding-left: 100px;
    background: green;
}

二者的宽度是计算方式不同：

• witdh:auto: width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right)，所以就不用担心当元素自身有 margin、padding 、border 时，宽度会超过父节点。
• witdh:100%: width:100%='父元素 width' + 'padding-left/right' + 'border-left/right' + (margin-left/right)，这样就会发生内容溢出父节点的情况 ，会产生不良的影响。

如何让页面全部置灰？ #

在 html 节点的样式上加入：

filter:grayscale(1);