CSS 多类选择器

CSS 多类选择器

当我们想给一个盒子添加多种css样式时，我们可以使用CSS 多类选择器。现有一个盒子class=“wrap wrap2”。它有两个类名，后面一个类名的权重比第一个更高。我们用选择器选中第一个类名给盒子添加样式之后，如果用第二个类名添加的样式和第一个类名的重叠，那么第二个会覆盖第一个的属性，而不同的样式继续生效。

而class="wrap wrap2"最终的效果是.wrap1.wrap2中的属性+第二类名覆盖了第一类名之后的属性。

<div class="wrap1 wrap2"></div>

        .wrap1 {
            width: 500px;
            height: 300px;
            margin: 200000px;
            padding：10px;
            background-color: #1e50a2;
            box-sizing: border-box;
        }

        .wrap1.wrap2 {
            background-color: #70bb46;
        }

        .wrap2 {
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: #8f2f2f;
        }

代码效果：

有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。

这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。