<link>和@import的区别？都可以用来加载外部css资源文件，不同点：
@import()资源类型link支持更多外部资源加载，包括css、图标@import是CSS语法，只支持导入css哪里使用？HTML页面中css文件、<style>标签里，必须是第一句加载优先级与HTML页面一同加载要等网页加载完成后才进行加载兼容性问题良好@import是CSS2.1版本的，不兼容 ie5 以下扩展性<link>支持javascript去控制其属性@import不支持JS操作，支持媒体查询2.4、层叠、优先级和继承层叠：
一个元素可应用多个样式选择器，当多条样式规则应用到同一个元素时，存在样式冲突，就出现了层叠，那到底该用谁的呢？
- 同级别（同选择器）的样式规则：后面的样式规则会覆盖前面的，或者也可以理解谁离元素最近就用谁，和选择器顺序无关，如
<p class="d1 d2">中d1、d2的顺序无关 。 - 谁大就用谁：其他情况就是用优先级权重来计算，谁的优先级更高（值更大）就用谁！
.d1{color: red;color: green;/* 层叠 */}.d2{color: blue;/* 层叠 ， 同级别，最后出场的胜出！ */}优先级：选择器优先级：样式的目标越具体优先级越高：行内样式优先级（1000 ）> id（100）> class（10）>标签（1）>通用（0） 。括号内是权重值，用来决策优先级 。!important：一个特殊的 CSS语法，恐怖如斯10000优先级，可以用来覆盖所有上面所有优先级和层叠，使用小心（尽量不用）！
h1{color: green !important;/* 只能用在属性上 */color: blue;}继承：继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的 。如一些布局类的（高宽、边距、边框）是默认不继承的，可以显示设置继承 。一些文本类的（字体、文本样式、字体颜色）大多支持隐式继承（默认从父元素继承） 。
CSS提供了五个特殊的通用属性值用来显示控制继承，每个 css 属性都可使用这些值 。
属性描述inherit继承父类属性（/?n?her?t/），就是 "开启继承" ， 使子元素属性和父元素相同initial恢复初始值（ /??n??l/最初的），设置属性值和浏览器默认样式相同，如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit。unset自然值，将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样revert恢复 ， 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值 。在许多情况下，此值的作用类似于 unset 。revert-layer重置上一层，将应用于选定元素的属性值重置为在上一个层叠层中建立的值 。
<div>div<p>pppp</p></div><style>div {border: 2px solid red;color: #368cee;/* 所有子元素都会默认继承color */}div p {border: inherit;/* 子元素默认不会继承父元素的border，可以显示的强制继承 */}/* 在一些浏览器中，表单元素默认不会继承父级字体样式，因为他们有自己的浏览器内置样式，需要主动申明字体样式的继承 。*/button, input, select, textarea {font-family : inherit;font-size : 100%; }</style>2.5、@规则@符号开头的特殊语法规则 。@规则描述示例/备注@charset定义样式表的字符集 ， 必须是样式表中的第一个元素
@charset "UTF-8";不支持HTML中使用@import引入一个外部样式表，必须先于所有其他类型的规则，@charset 除外 。支持媒体查询 。@import url("fineprint.css")@import url _list-of-media-queries_;@namespace用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则@media定义媒介查询规则，用于响应式样式设计@media screen and (min-width: 900px){}@page@page 规则用于在打印文档时修改某些 CSS 属性@supports IE特性查询，判断当前浏览器环境是否支持某些特性，js中可通过 CSSSupportsRule 来访问 @supports支持not、and、or嵌套多个表达式@font-face定义下载的外部的网络字体@font-face {font-family:"fname";src: url()}@keyframesCSS 动画的关键帧@charset "UTF-8";@supports (display: grid) {div {display: grid;}}@supports not (display: grid) {/* 如果不支持grid布局，则使用float布局 */div {float: right;}}@supports (--foo: green) {/* 测试是否支持自定义属性 */body {color: var(--foo);}}03、值与单位3.1、尺寸单位（长度/大?。?/h2>绝对长度：
