css3宽度用爷级 |如何生成css文件

css语句解读，css图片全局布满，商品展示排版css，css设置固定背景代码，苹果手机css无法触发hide，css55 plus 试驾，如何生成css文件 css3宽度用爷级 |如何生成css文件

.box {
width: 200px;
height: 200px;
background-color: #f4f4f4;
position: relative;
margin: 0 auto;
}
.box::before {
content: "";
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.1));
position: absolute;
z-index: 0;
top: 0;
left: 0;
}

在CSS中，宽度（width）的使用是非常频繁的，而CSS3提供了更多的宽度设置方式。其中，爷（rem）也是CSS3宽度设置中的一个奇妙单位。

爷，即相对于根元素（即html元素）的字体大小的单位。比如，如果在根元素中设置字体大小为16px，那么1rem就等于16px。

在下面的代码中，大家可以看到如何使用爷作为宽度的单位，同时也配合了CSS3中的其他新特性，如伪元素等。

<div class="box"></div>

通过设置根元素的字体大小，大家可以动态地改变元素的大小，而且具有很好的可维护性和可扩展性。