# 其他

# box-sizing

使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

1
2
3
4
5

MDN font-face 指令 (opens new window)

css3新增了font-face指令，该指令可以让我们加载网络字体

其最常见的应用就是字体图标

字体图标本质上是文字，即通过color设置颜色，通过font-size设置尺寸

国内使用最多的字体图标平台是阿里巴巴矢量图标库 (opens new window)

登录平台后即可免费使用其所有字体图标

MDN详细文档 (opens new window)

css3属性object-fit可以控制多媒体内容和与元素的适应方式，通常应用在img或video元素中

一图胜千言

下图中的所有img元素均被固定了宽高，溢出img的部分实际上均不会显示

css3支持使用vw和vh作为单位，分别表示视口宽度和视口高度

例如1vh表示视口高度的1%，100vw表示视口宽度的100%

通过::before和::after选择器，可以通过css给元素生成两个子元素

使用伪元素可以避免在HTML中使用过多的空元素

伪元素必须要有content属性，否则不能生效，如果不需要有元素内容，设置content:''

MDN详细文档 (opens new window)

使用scroll-behavior: smooth，可以让滚动更加丝滑