CSS 名词解释

css三种引入方式：内联、页级、外联

1. 内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。
2. 页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。
3. 外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可，可维护性好；并且外联CSS是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联CSS和页级CSS，省去了到每个页面修改的步骤，提高了开发效率，同时一定程度提高了性能。

css中的单位：rem、px、em、vw、vh、vm

1. px: 像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的；
2. em: em的值并不是固定的，会集成父级元素的字体大小；任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px，南无0.75em=12px，10px=0.625em。为了简化Font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em的值变为16px*62.5%=10px，这样12px就是1.2em，10px就是1em，也就是将原来的px数值除以10换上em的单位就可以了。
   注意：
   1. body选择其中声明Font-size=62.5%；
   2. 将原来的px数值除以10，然后换上em作为单位；
   3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
3. rem: 相对单位，（root em 即rem），使用rem为单位设置字体大小时，是相对于HTML根元素的大 小，可通过该根元素就成比例的修改调整所有字体大小，一般用的时候都是写在body或html上面，body{fontsize:625%;}也就是1rem=100px；不过在写项目的时候最好搭配媒体查询一起.
4. vw: 视口的最大宽度，1vw=视口宽度的百分之一；
5. vh: 视口得最大高度，1vh=视口高度的百分之一；
6. vmin/vm: 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。

fr

fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}