css-basic

CSS 选择器

层叠样式表 (Cascading Style Sheets)

样式表的组成：

浏览器渲染样式表选择器的顺序：从右往左

css 可以用来为网页创建样式表，通过样式表可以对网页进行装饰。

所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。

而 css 就可以分别为网页的各个层次设置样式。

外部样式表，可以通过浏览器的缓存，加快用户的访问速度

CSS 注释：/**/ 只有一种

Css 语法

选择器: 通过选择器, 可以选择页面中指定的元素, 并且将声明块中的样式应用到指定的元素

声明块: 声明块紧跟在选择器的后边, 使用一对 {} 括起来，声明块中实际上就是一组一组的名值对结构， 这一组一组的名值对我们称为声明， 在一个声明块中可以写多个声明，多个声明之间使用; 隔开，声明的样式名和样式值之间使用: 来连接

， 结合符，

选择器声明的样式还是子元素属性继承父元素的样式，测试选择器，要选择不能继承的属性来测试，比如 border

基本选择器

元素选择器（标签选择器）（Type selector）

作用：通过元素选择器可以选则页面中的所有指定元素

语法：标签名 {}

Id 选择器（ID selector）

作用：通过元素的 id 属性值选中唯一的一个元素

语法：#id 属性值 {}

类选择器（Class selector）

作用：通过元素的 class 属性值选中一组元素

语法：.class 属性值 {}

以上三个是基础选择器，可以应用于以下所有复杂选择器

通配选择器（Universal selector）

作用：他可以用来选中页面中的所有的元素

语法：*{}

复杂选择器

并集选择器（选择器分组）（Grouping selectors）

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器 1, 选择器 2, 选择器 N{}

交集选择器（Compound selector）

作用：可以选中 同时满足 多个选择器的元素

语法：选择器 1 选择器 2 选择器 N{}

对于 id 选择器来说，不建议使用复合选择器，因为 id 属性可以唯一确定一个元素

选择器分布：全都是类选择器；一个元素选择器其余是类选择器；

中间没有空格，多个元素选择器会无法识别 @@@

后代元素选择器（Descendant combinator）

作用：选中指定元素的指定后代元素

语法：祖先元素 后代元素 {}

中间有空格

直接子元素选择器（Child combinator）

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

IE6 及以下的浏览器不支持子元素选择器

兄弟元素选择器（Sibling combinator）

查找 所有 前一个元素后边 一个 紧挨着的兄弟元素

语法：前一个元素 + 后一个元素 {}

This selects all B elements that directly follow A.

span + p{
  background-color: yellow;
 }
/*选择所有紧跟着span的p，选中的是p元素*/
/*如果span后面第一个是div，后面的p也不会选中*/

查找后边所有的兄弟元素

语法：前一个元素~后面所有 {}

span ~ p{
  background-color: yellow;
 }
/*span后面所有的兄弟p元素*/

属性选择器

属性选择器可以挑选带有特殊属性的标签，[属性名] 选取含有 指定属性名 的元素

[attr]{}

p[title]{
  background-color: yellow;
 }

A[attribute]
/*Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.*/

a[href] 
/*selects all a elements that have a href="anything" attribute.*/

[attr=" 属性值 "]

选取 仅 含有指定 属性值 的元素

[name="atguigu"]{
  background: pink;
}

<div name="atguigu">李立超</div>
<div name="atguigu_llc atguigu">李立超</div>
/*只有1被选中*/

[attr~=val]

该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

[name~="atguigu"]{
 background: pink;
}
/* const regex = /\s(atguigu)\s/*/
<div name="atguigu_llc atguigu">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj atguigu">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
/*只有1 3 被选中*/

*[属性名 =" 属性值 "]

选取属性值以包含指定内容的元素

属性值 的引号，可加可不加

input[name*='man']{
  /*123 均可选中*/
}
/* const regex = /man/*/
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

[属性名^=" 属性值 "]

选取属性值以指定内容开头的元素

托字符

[属性名 $=" 属性值 "]

选取属性值以指定内容结尾的元素

伪类选择器 @@@

设计伪元素的原因：为了让 css 有能力 选中 DOM 树以外 的元素

伪类专门用来表示元素的一种的 特殊的状态，比如：

链接伪类

:link 表示普通的链接（没访问过的链接）

:visited 表示访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过, 由于涉及到用户的隐私问题，所以使用 visited 伪类只能设置 color\background-color\border-color

<a href="#1">我是第一个a标签</a>
<a href="#2">我是第二个a标签</a>
<a href="#3">我是第三个a标签</a>
<a href="#4">我是第四个a标签</a>
<a href="#5">我是第五个a标签</a>
<a href="#6">我是第六个a标签</a>
<!--不同的URI，代表不同的链接-->
<a href="javascript:;">我是第一个a标签</a>
<!--	访问的地址没有变化，伪类不会生效-->

: target 代表一个特殊的元素，这个元素的 id 是 URI 的片段标识符

Demo 最简单的选项卡

1548642494650 把 id 转换成#的 URI 形式 (hash)

:target{
  display: block;
}
div{
  display:none;
}

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">
 div1
</div>
<div id="div2">
 div2
</div>
<div id="div3">
 div3
</div>

动态伪类

:hover 伪类表示鼠标移入的状态

:active 表示的是超链接被点击的状态

:hover 和:active 也可以为其他元素设置

IE6 中，不支持对超链接以外的元素设置:hover 和:active

::selection 控制选中的文本的样式

div::selection {
  background: red;
  color: pink;
 }

A 标签的伪类

a 的伪类选择器包含以上五个，顺序是 lvha

表单伪类

:enabled，匹配可编辑的表单

:disable，匹配被禁用的表单

:checked，匹配被选中的表单

checkbox

:focus，匹配获焦的表单

::selection 选中的内容使用样式

1548642753633

伪类子元素选择器（结构性伪类：child 系）

:first-child

1548642952892 | 200 1548642956534 | 200

:last-child

:nth-child(an+b) @@@

:nth-last-child(从 1 开始) @@@

:only-child

伪类子元素选择器（结构性伪类：type 系）

:first-of-type

:last-of-type

:nth-of-type

1548643869527 1548643873278

plate:nth-of-type(2n+3) 
/* 选中了3 5 两个plate,从第3起算起（包含第三个），每两个选择一个)
n (0,1,2,3…) */

1548644000154

span:nth-of-type(6n+2)
/* selects every 6th instance of a span, starting from (and including) the second instance. */

:nth-last-of-type(从 1 开始)

:only-of-type

Nth-child 和 Nth-of-type 的一个重要的区别

仅作用于标签元素选择器. 类选择器无法生效. 但是 frist-child nth-child 加在类后面也可以

<div id="wrap">
 <div class="inner">div</div>
 <p class="inner">p</p>
 <span class="inner">span</span>
 <h1 class="inner">h1</h1>
 <h2 class="inner">h2</h2>
</div>

<style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
 #wrap .inner:nth-child(1){ /*选中第一个*/
  border: 1px solid;
 }
/*
#wrap .inner:nth-of-type(1){  
  border: 1px solid;
}
*/
/*解析成下面的形式，选中全部，nth-of-type以元素为中心*/
#wrap div:nth-of-type(1){
 border: 1px solid;
}
#wrap p:nth-of-type(1){
 border: 1px solid;
}
#wrap span:nth-of-type(1){
 border: 1px solid;
}
#wrap h1:nth-of-type(1){
 border: 1px solid;
}
#wrap h2:nth-of-type(1){
 border: 1px solid;
}
</style>

其他结构性伪类

:empty

:not(选择器){}

伪元素选择器 @@@

元素即标签，标签即元素，解析的时候不在 DOM 树当中，但确实是一个 html 元素

本身没有标签，但是仍然易于识别的网页部位适用

:first-letter 首字母

:first-line 首行

:before 表示元素最前边的部分

:after 表示元素的最后边的部分

冒号

选择器的特殊性 @@@

选择器的特殊性，表现为声明的优先级，只不过是声明与选择器是联系起来的

选择器的特殊性：

继承的样式，没有特殊性

enum Specificity {
    Inline = 0x01000000,
    Id = 0x00010000,
    Attribute = 0x00000100,
    Class = 0x00000100,
    PseudoClass = 0x00000100,
    Type = 0x00000001,
    Universal = 0x00000000,
    Invalid = 0x00000000
}

即是是父级的重要声明或者内敛样式，只要是继承来的，都以继承计算，没有特殊性

1568468884276

特殊性为 0，大于没有特殊性

选择器的特殊性最终都会授予给其对应的声明

**注意：**id 选择器和属性选择器的区别

div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）

特殊性的计算

当选择器中包含多种选择器时，需要将多种选择器的特殊性相加然后在比较，

/*交集选择器*/

#p2{
  background-color: yellowgreen;
 }
 
 p#p2{
  background-color: red; //red
 }

#test.test{
  background: pink;
 }
 #test.test.test{
  background: deeppink; //deeppink
 }

<div id="test" class="test"></div>

但是注意，选择器特殊性计算不会超过他的最大的数量级，不进位

如果选择器的特殊性一样， 则使用靠后的样式。

/* class="p1 p3" */

.p3{
  color: green; //green
 }
 
.p1{
  color: yellow;
}

并集选择器 的特殊性是单独计算

选择器的顺序不影响选择器的特殊性

div #box3 .text{ /* 1+100+10 */
  color:yellow;
}
#box1 div .text{ /* 100+1+10 */
  color:red;
}
div #box2 .text { /* 1+100+10 */
  color:green;
}
#box1 #box2 #box3 { /* 100+1000+100 但是却是继承来的 */
    color:pink;
}
  <div id="box1">
    <div id="box2" class='box'>
      <div id="box3"><p class='text'>text</p></div>
    </div>
  </div>

前三个选择器的特殊性都是一样的，因此后写的后应用，但是最后一个对于 p 来说是继承而来的，即使特殊性再高，也会被继承弱化

1570933641779

!important

可以在 任意样式 的最后，添加一个!important，则此时 该样式 将会获得一个最高的特殊性，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important

background-color: greenyellow !important**;**

标志为 !important 的声明并没有特殊的特殊性值，不过要与 非重要声明 分开考虑。实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决。

非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决如果一个重要声明与非重要声明冲突，胜出的总是重要声明，也就是说!important，虽然是 css 的功能，但是可以覆盖 html 的内敛样式

层叠

样式表可能有 3 种不同来源：编写者，用户和用户代理

注意，用户可能会修改系统设置（例如，系统配色），这会影响默认样式表。然而，有些用户代理实现让默认样式表中的值不可改变

默认情况下，编写者样式表中的规则比用户样式表中的规则权重高。然而，对于 "!important" 规则，优先级却是相反的。所有用户和编写者规则都比 UA 默认样式表中的规则权重高

css 样式的来源大致有三种

权重：

层叠

  1. 找出所有相关的规则，这些规则都包含一个选择器
  2. 计算声明的优先级

先按来源排序，再按选择器的特殊性排序，最终按书写的先后顺序

内联的重要声明，如何使用 css 覆盖？

<p>
  <span id='s1' class='c1' style='color:green !important;'>1123456</span>
</p>

长度单位

像素 Px

像素是我们在网页中使用的最多的一个单位，

一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的但是这些像素点，是不能直接看见。不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。

手机的像素点的大小只有电脑的四分之一，所以手机在显示网页的的时候会默认把像素 *4，使得看起来和电脑一致

百分比%

也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值使用百分比的好处是，当 父元素 的属性值发生变化时，子元素也会按照比例发生改变

在我们创建一个自适应的页面时，经常使用百分比作为单位

body 也是 父元素，body 的宽高默认就是浏览器窗口的大小，所以使用 100% 没有内容撑开也可以占满屏幕

Em

em 和百分比类似，它是相对于当前元素的 字体大小 来计算的

1em = 1font-size

使用 em 时，当字体大小发生改变时，em 也会随之改变

当设置字体相关的样式时，经常会使用 em

Pt

pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch),inch 及英寸，而 1 英寸等于 2.54 厘米。

Rem

Vw

文本格式化

颜色

颜色单位

在 CSS 可以直接使用颜色的单词来表示不同的颜色

RGB 值

也可以使用 RGB 值来表示不同的颜色

所谓的 RGB 值指的是通过 Red Green Blue 三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色

颜色的浓度需要一个 0-255 之间的值，255 表示最大，0 表示没有

浓度也可以采用一个 百分数 来设置，需要一个 0% - 100% 之间的数字

也可以使用 十六进制的 rgb 值 来表示颜色，原理和上边 RGB 原理一样，

Hex Code

hexadecimal code（十六进制编码）简写为 hex code

只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色每组表示一个颜色 , 第一组表示红色的浓度，范围 00-ff 第二组表示绿色的浓度，范围是 00-ff 第三组表示蓝色的浓度，范围 00-ff

语法：#红色绿色蓝色

十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f

Rgba

css3 新增

含有透明度

background: rgba(0,0,0,.5);

字体

Lang

css - How to center punctuation in vertical CJK text? - Stack Overflow

lang 对字体样式的影响

dreamina 是用户 cookie 里写的. 请求的时候带上. 服务器再下发. 那么问题是在哪里种下的呢?

zh-cn 与 zh-hans 是什么关系、有什么区别？ - 知乎

Color

设置字体颜色, 使用 color 来设置 文字 的颜色

Font-size

font-size 设置的并不是 文字本身的大小，

设置文字的大小, 浏览器中一般默认的文字大小都是 16px

在页面中，每个文字都是处在一个看不见的框中的。我们设置的 font-size 实际上是设置格的高度，并不是字体的大小。一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能

在 chrome 中，字体默认值 16px，最小值 12px，0-12 渲染成 12,0 的时候字体消失，小于 0 渲染成默认值 16

Font-family

通过 font-family 可以指定文字的字体

当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体

该样式可以同时指定多个字体，多个字体之间使用, 分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个

浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用

在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。

Font-style

可以用来设置文字的斜体

可选值：

Font-weight

可以用来设置文本的加粗效果：

可选值：

该样式也可以指定 100-900 之间的 9 个值，

但是由于用户的计算机往往没有这么多级别的字体，所以不能达到我们想要的效果也就是 200 有可能比 100 粗，300 有可能比 200 粗，但是也可能是一样的，往往不会使用

Font-variant

可以用来设置小型大写字母

可选值：

Font 样式（简写属性）

.p2{
 /*设置一个文字大小*/
 font-size: 50px;
 /*设置一个字体*/
 font-family: 华文彩云;
 /*设置文字斜体*/
 font-style: italic;
 /*设置文字的加粗*/
 font-weight: bold;
 /*设置一个小型大写字母*/
 font-variant: small-caps;
}

在 CSS 中还为我们提供了一个样式叫 font，使用该样式可以同时设置字体相关的 所有样式

可以将字体的样式的值，统一写在 font 样式中，不同的值之间使用空格隔开

使用 font 设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，

如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式

实际上使用简写属性也会有一个比较好的性能

font: small-caps bold italic 60px"微软雅黑";

在 font 中也可以指定行高（陷阱）

不建议使用 font 简写属性

字体的分类

在网页中将字体分成 5 大类：

  1. serif（衬线字体）, 宋体
  2. sans-serif（非衬线字体）, 黑体
  3. monospace （等宽字体）, IH
    1548647116110
  4. cursive （草书字体）
  5. fantasy （虚幻字体）

可以将字体设置为这些大的分类, 当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，不同浏览器字体不同，仅作保险用

一般会将字体的大分类，指定为 font-family 中的最后一个字体

文本

Text-align

用于设置文本的对齐方式

定义 行内内容（例如文字）如何相对它的块 父元素 对齐。并不控制块元素自己的对齐，只控制它的 行内内容 的对齐。

适用元素：块级元素

可选值：

  1. left 默认值，文本靠左对齐
  2. right ， 文本靠右对齐
  3. center ， 文本居中对齐
  4. justify ， 两端对齐

通过调整文本之间的空格的大小，来达到一个两端对齐的目的

分配富裕空间

Text-indent

用来设置首行缩进

初始值：0

适用元素：块级元素

继承属性

百分比：参考包含块的宽度

然而浏览器厂商并没有按照规范来实现，实际上百分比参考的是自身的宽度

https://github.com/w3c/csswg-drafts/issues/2394

当给它指定一个正值时，会向右侧缩进指定的像素

当给它指定一个负值时，会向左侧缩进指定的像素

描述

Text-decoration

可以用来设置文本的修饰。

可选值：

  1. none：默认值，不添加任何修饰，正常显示
  2. underline 为文本添加下划线
  3. overline 为文本添加上划线
  4. line-through 为文本添加删除线

描述

示例

  <p>This text has <em>some emphasized words</em> in it.</p>
  // 应用样式
  p { text-decoration: underline }

会对整个段落添加下划线，再添加样式 em { text-decoration: none } 也不会引起任何改变，整个段落仍然有下划线修饰。

然而，新加样式 em { text-decoration: overline } 则会在 <em> 标记的文字上添加另一种新样式

设置 em 为 inline-block，下划线则不会再延伸

1558931708425

描述

初始值

适用元素：全部

不可继承

描述

  a {
    text-decoration: none;
  }

Text-transform

可以用来设置文本的大小写

可选值：

  1. none 默认值，该怎么显示就怎么显示，不做任何处理
  2. capitalize 单词的首字母大写，通过空格来识别单词 (单词边界)
  3. uppercase 所有的字母都大写
  4. lowercase 所有的字母都小写

Letter-spacing

可以指定 字符间距（汉字、字母）

Word-spacing

可以设置单词之间的距离实际上就是设置 词与词之间空格的大小

文本换行 @@@

White-space

控制是否换行，溢出省略号四大金刚之一

默认情况下换行时：中文一个字为单位，自动换行，英文以单词边界为判断

<p>This text has so
  me emphasized&#13;&#13;\n&#10;&#10;wo
  rds in it.
</p>

属性值

1558933503642

1558933540410

1558933614785

1558933668049

1558933686973

示例

  div{
   display: block; 
   /*关键是宽度是否设死，如果宽度由内容撑开则无法显示省略号，如果宽度设死了，inline-block也可以显示省略号*/
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }

Word-break

CSS 属性 word-break 指定了怎样在单词内断行。

属性值

Overflow-wrap

用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

属性值

描述

Text-overflow

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。

这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联 (inline) 方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。文本可能在以下情况下溢出：当其因为某种原因而无法换行 (例子：设置了 "white-space:nowrap")，或者一个单词因为太长而不能合理地被安置 (fit)。

这个属性并不会强制“溢出”事件的发生，因此为了能让 "text-overflow" 能够生效，程序员们必须要在元素上添加几个额外的属性，比如 " 将 overflow 设置为 hidden"。

属性值

Css3 新增文本样式

Text-shadow

用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）

默认值：none；不可继承

属性值

浮雕文字

文字模糊

  h1{ 
    font:100px/200px "微软雅黑"; 
    text-align:center; 
    color:#000; 
    text-shadow:0 0 0 rgba(0,0,0,1); 
    border:1px solid #000; 
    transition:1s;
   }
   h1:hover{
    color:rgba(0,0,0,0);
    text-shadow:0 0 100px rgba(0,0,0,0.5);
   }

-webkit-text-stroke

文字描边

只有 webkit 内核才支持：-webkit-text-stroke（准确的来说不能算是 css3 的东西，但需要大家知道）

-webkit-text-stroke:4px pink;

Direction

文字排版, 控制文字的方向

属性值：

描述：

1548814801127

Line-height 行间距（行高）

主段落内容的 line-height 至少设为 1.5。 这将有助于低可视条件下的体验，尤其对认知阻碍者，如阅读困难者。如果文字的大小要随页面的缩放而变化，请使用无单位的值以确保行高也会等比例缩放。

可选值

  1. 直接就收一个大小 px
  2. 可以指定一个百分数，则会 相对于字体 去计算行高
  3. 可以直接传一个数值（行高因子），则行高会设置字体大小相应的倍数
    在 cssreset 中，通常会把行高指定为 1，在编码的时候再一个个自己去调整行高
    1548652652521

对于单行文本来说，可以将行高设置为和父元素的高度一致这样可以使得单行文本在父元素中垂直居中

在 font 中也可以指定行高（陷阱）

在字体大小后可以添加**/行高，来指定行高，该值是可选的，如果不指定则 会使用默认值**

  font: 30px/50px "微软雅黑";
  /*line-height: 50px;*/

行高的继承

初始值：normal

可以继承

行高因子：行高的值为 number 形式，继承的时候会把父级的行高因子直接继承，子元素的行高由自己的 font-size 决定。

像素 百分比，继承的时候子元素会继承 计算之后 的值，子元素的行高由父元素的行高决定

body{
 line-height: 1; //初始化为1，内容区和行高相同便于非文本Box的排版
}
p,span{
 line-height: 1.5; //设定为1.5，大量文本，行距，美观
}

主段落内容的 line-height 至少设为 1.5。 这将有助于低可视条件下的体验，尤其对认知阻碍者，如阅读困难者。如果文字的大小要随页面的缩放而变化，请使用无单位的值以确保行高也会等比例缩放。

盒模型

块级元素的盒模型 @@@

一个盒子我们会分成几个部分:

  1. 内容区 (content)
  2. 内边距 (padding)
  3. 边框 (border)
  4. 外边距 (margin)

1548661126540

内容区

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。@@@

如果没有为元素设置内边距和边框，则内容区大小默认和 盒子的可见框 是一致的。

通过 width 和 height 两个属性可以设置内容区的大小。

width 和 height 属性只适用于块元素。行内元素是由内容撑开的 @@@

块级元素的高度由内容撑开，但是高度依然可以指定。行内元素的宽高均有内容撑开，但是指定宽高没有效果，可以改为 inline-block 或者用内容撑开

子元素 width100%，不会覆盖父元素的 padding

内边距

顾名思义，内边距指的就是元素内容区与边框以内的空间。

默认情况下 width 和 height 不包含 padding 的大小。

使用 padding 属性来设置元素的内边距，上、右、下、左四个方向的内边距

内边距会影响盒子的 可见框 的大小，元素的背景会延伸到内边距

边框 @@@

as each of the properties of the shorthand:

可以在元素周围创建边框，边框是元素 可见框 的最外部。可以使用 border 属性来设置盒子的边框：

要为一个元素设置边框 必须 指定：border-style: 边框的样式

其实设置边框需要三个值，还需要加上：

但是，在大部分的浏览器中，边框的宽度和颜色都是有 默认值

而边框的样式默认值都是 none，所以只写一个 solid 就可以有边框效果

可以使用 border-top/left/right/bottom 分别指定上右下左四个方向的边框。

边框可以设置多种 style：

不同 style 的边框交合处的渲染不同：solid，两边按 border-width 值分配；dashed，交合处为空白 @@@

简写语法

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式，没有顺序要求，但是不能指定单边

单独设置一条边的所有样式，也可以应用简写语法

3 个一样一个不同，border 再单独控制不同的

盒子可见框的大小

盒子可见框的大小由内容区，内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

可见宽的高度 = border-top- width + padding-top + height + padding-bottom + (border-bottom- width)//底边宽度

外边距不会影响可见框的大小，而是会影响到盒子的位置

外边距

外边距是元素边框与 周围元素 相距的空间。

外边距也可以指定为一个 负值，如果外边距设置的是负值，则元素会向反方向移动

使用 margin 属性可以设置外边距。用法和 padding 类似，同样也提供了四个方向的 margin-top/right/bottom/left。

外边距不会影响可见框的大小，而是会影响到盒子的位置

由于页面中的元素都是靠左靠上摆放的，所以：

margin 还可以设置为 auto，auto 一般只设置给水平方向的 margin

如果只指定，左外边距或右外边距的 margin 为 auto 则会将外边距设置为 最大值

如果将 margin-left 和 margin-right 同时设置为 auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为 auto，以使子元素在父元素中水平居中

边界是？块级上下文

垂直方向外边距如果设置为 auto，则外边距 默认就是 0

内联元素的盒模型 @@@

内容区

内联元素 width 和 height 属性没有效果，宽高由内容撑开, 对于 display:inline 的元素而言根本就没有这两个属性, 通过设置 line-height 达到相同的效果

内边距

内联元素可以设置水平方向的内边距

内联元素可以设置垂直方向内边距，但是不会影响页面的布局（会覆盖下面的元素）

边框

内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

外边距

内联元素支持水平方向的外边距

内联元素 不支持 垂直外边距，相当于没有这个属性，不像内边距一样影响可见区域，改变了也完全看不到

盒模型样式

宽高

https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

Min-height

无法继承啊

Max-height

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。

max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

初始值: none

适用元素: all

是否继承: no

百分比: 根据包含该元素的父元素的高度计算得来的, 如果该元素的父元素没有明确的指定高度, 则该百分比相当于 none.

值

Cursor

cursor 属性规定要显示的鼠标的光标类型。

常用取值：pointer（手），crosshair（十字线），default（箭头），auto（浏览器设置的光标）

Outline

CSS2.1

input 默认的 focus 样式就是使用的 outline

CSS 的 outline 属性是用来设置一个或多个单独的轮廓属性的 简写属性 ， 例如 outline-style, outline-width 和 outline-color。 多数情况下，简写属性更加可取和便捷。

轮廓与边框 在以下几个方面存在不同：

1557234953791

初始值

适用元素: all

不可继承

描述

示例

  /* 宽度 | 样式 | 颜色 */
  outline: 1px solid white;

Outline-offset

border 和 outline 之间的距离

CSS3 新增

Box-shadow

以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。

如果元素同时设置了 border-radius ，阴影也会有圆角效果。

多个阴影时和多个 text shadows 规则相同 (第一个阴影在最上面)。

**适用元素：**all

初始值: none

不可继承

属性值

drop-shadow()

-webkit-box-reflect

倒影效果，设置元素的倒影（准确的来说不能算是 css3 的东西，但需要大家知道）

默认值:none 不可继承

属性值：有顺序规定

  1. 倒影的方向
    • above, below, right, left
  2. 倒影的距离
    • 长度单位
  3. 渐变

-webkit-box-reflect:right 10px linear-gradient(-90deg,rgba(0,0,0,1) 0,rgba(0,0,0,0) 80%);

Resize

CSS 属性允许你控制一个元素的可调整大小性。（一定要配合 overflow:auto 使用）

默认值：none 不可继承

属性值

Box-sizing

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持 CSS 盒子模型规范的浏览器的行/列为。

默认值：content-box 不可继承

内容区的概念不受影响, 依然是从内容区开始布局, 对于可替换元素也是一样, 图片从内容区开始布局. 也就是 html width 和 css width 发生了区别

Content-box

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是 370px;

尺寸计算公式：

区分好盒子的宽高，日常生活中用来衡量事物大小的标准，而在 css 中可见区域是包括内边距和边框的，与日常生活的差异，留意到这一点，非常重要@，所以 border-box 更加符合日常生活的思维

Border-box

width 和 height 属性包括 内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。 这里的维度计算为：

根据 UI 的切图习惯，选择合适的 box-sizing，才能符合 UI 的设计

Border-radius

传统的圆角生成方案，必须使用多张图片作为背景图案

CSS3 圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：

border-radius：用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个 (椭) 圆与边框的交集形成圆角效果。

适用元素：all

all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.

初始值：0

不可继承

属性值

这是一个简写属性，用来设置

定义半径 (单值)，属性值可取 1~4 个值

  1. border-radius: radius
  2. border-radius: top-left-and-bottom-right top-right-and-bottom-left
    • border-radius:40px 100px;
    • 设置左上右下为 40px，右上左下为 100px
  3. border-radius: top-left top-right-and-bottom-left bottom-right
  4. border-radius: top-left top-right bottom-right bottom-left

定义半轴 (双值)

  1. border-radius: (first radius values) / radius
  2. border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
    • border-radius:40px/60px 40px;
    • 40px 60px 定义第一个椭圆，用于正斜杠的两个角
    • 40px 40px 定义第二椭圆，用于反斜杠的两个角
  3. border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
  4. border-radius: (first radius values) / top-left top-right bottom-right bottom-left

注意，百分比值

demo 风车

1548816112576

demo 气泡对话框

应用：

边框图片

在 border 里放图片，一般需要专门设计

border-image-source 属性

border-image-slice 属性

border-image-repeat

border-image-width

border-image-outset

Display 和 Visibility

Display

我们不能为行内元素设置 width、height、margin-top 和 margin-bottom。

我们可以通过修改 display 来修改元素的性质。

可选值：

不常用：

Visibility

可选值：

display:none 和 visibility:hidden 的区别 @@@

  1. 渲染树
    • 使用 display:none 后，元素从文档流中消失（渲染树中不存在），因此会引起回流和重绘
    • 使用 visibility:hidden 后，元素仍然在文档流中（渲染树中仍然存在），因此会引起重绘。
  2. 继承性
    • display：none 是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；
    • visibility：hidden 是继承属性，子孙节点消失是由于继承了 hidden，通过设置 visibility：visible，可以让子孙节点显示。
  3. JS 读取属性值
    • 如果在样式文件或页面文件代码中直接用 display:none 对元素进行了隐藏，载入页面后，在没有通过 js 设置样式使元素显示的前提下，使用 js 代码会无法正确获得该元素的 一些属性，比如 offSetTop,offSetLeft 等，返回的值会为 0，通过 js 设置 style.display 来使元素显示后才能正确获得这些值
  4. SEO
    • 使用 display:none 隐藏的元素不会被百度等搜索网站检索，会影响到网站的 SEO，某些情况下可以使用 left:-100000px 来达到同样效果。
  5. 读屏软件
    • display:none 不可读
  6. 优先级
    • display:none;visibility:visible 时，元素不可见，渲染树中不存在

Opacity

CSS3 新增

在结合其他特性的情况下性能比 visibility 更好，涉及到 层叠上下文

不继承，但是可以影响自己的后代元素

透明度也可以设置渐变，使用 rgba 模式

属性值：

Rgba 和 Opacity 的区别

rgba 和 opacity 都能实现透明效果，但最大的不同在于 opacity 作用于元素本身以及元素内的所有内容，而 rgba 只作用于元素本身，子元素不会有透明效果。

rgba 是 CSS3 的属性

opacity 也是 CSS3 的属性

过滤器（模糊）

css3 新增

模糊整个元素，与 text-shadow 对比

filter: blur(10px);

Overflow

overflow 只能作用于块级元素，即使通过定位改变了行内元素的表现，该属性应该给容器，而不是溢出的元素自己

子元素默认是存在于 父元素的内容区 中，理论上讲子元素的最大可以等于父元素内容区大小

如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容

父元素默认是将溢出内容，在父元素外边显示，通过 overflow 可以设置父元素如何处理溢出内容。

可选值：

换行与横向滚动条：无论什么时候只要内容超过了视觉视口，就会出现换行或者横向滚动条，如果是中文、有单词边界的英文、浮动元素，则会换行，如果没有换行的选择，就只能溢出，然后出现横向滚动条

文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的有各自的特点

块元素

块元素在文档流中会独占一行，块元素会自上向下排列。

块元素在文档流中默认宽度是 auto，一般渲染为父元素的 100%

块元素在文档流中的 高度默认被内容撑开

内联元素

内联元素在文档流中只占自身的大小，会默认从左向右排列，

如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。

在文档流中，内联元素的宽度和高度默认都被内容撑开

脱离文档流

  1. 浮动
  2. 绝对（固定）定位

在 文档流 中，子元素的宽度默认占父元素的全部

块元素脱离文档流以后，高度和宽度都被内容撑开

内联元素脱离文档流以后会变成浮动的块元素

定位 @@@

定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素通过 position 属性来设置元素的定位。

可选值：

定位属性：

相对定位

当元素的 position 属性设置为 relative 时，则开启了元素的相对定位

相对定位的特点

  1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
  2. 相对定位是相对于元素在 文档流 中 原来的位置 进行定位（左上角原点）

这意味着要考虑的 margin-box，border-box 影响大小，margin 影响位置

border-box 总不能丢下 margin 逃走吧（

  1. 相对定位的元素 不会脱离文档流
  2. 相对定位会使元素 提升一个层级（定位元素盖着文档流元素）
  3. 相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位（position 属性值是一个非 static 的值）时，可以通过 left right top bottom 四个属性来设置元素的偏移量

通常偏移量只需要使用 两个 就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

绝对定位

当 position 属性值设置为 absolute 时，则开启了元素的绝对定位

绝对定位的特点

  1. 开启绝对定位，会使元素 脱离文档流
  2. 开启绝对定位以后，如果不设置偏移量，则元素的位置 不会发生变化，保持原本的偏移量 @@@
  3. 绝对定位会改变元素的性质：
    • 内联元素变成块元素
    • 块元素的宽度和高度默认都被内容撑开
    • 宽度和高度的百分比参照的都是包含块
    • 也就是：内联元素和块元素的表现一致，没有内联和块的区分了
  4. 绝对定位会使元素 提升一个层级
    • 绝对定位是相对于离他最近的 开启了定位 的 祖先元素 进行定位的（开了相对定位或者绝对定位都是可以的，一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
    • 如果所有的祖先元素都没有开启相对定位，则会相对初始包含块（一个大小为视口大小的块）进行定位

绝对定位遇到的坑

|300

顶级父容器添加了 padding. 子节点想要 overflow:visible 非常困难

即使使用了 position absolute. 莫名其妙变成撑开父容器宽度了, 导致了滚动所以无法直接看到溢出的节点.

绝对定位的节点溢出了, 会发生什么? 我潜意识里一直以为绝对定位的元素是随便溢出的, 根本不会影响父容器了其他节点布局了

绝对定位的元素依然会溢出容器, 溢出时的行为依然收到 overflow 的控制

html - Why does position absolute make page to overflow? - Stack Overflow

解决: 可以使用 fix 解决层级问题, 然后使用 transform 重新定义包含块来解决定位. 从而实现即可以溢出容器, 又不会撑开容器的宽度

潜意识里认为 absolute 和 fixed 在溢出时表现时一样的, 但是其实不是

固定定位

当元素的 position 属性设置 fixed 时，则开启了元素的固定定位

固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样

注意: 当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

https://www.imooc.com/article/67784

不同的是：

Sticky @@@

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

https://www.cnblogs.com/coco1s/p/6402723.html

https://www.cnblogs.com/xiaohuochai/p/8391288.html

https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

https://segmentfault.com/a/1190000007938006

概述

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

示例

嗯，上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做

按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。

而使用 position:sticky ，则可以非常方便的实现：

简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离 页面视口（Viewport，也就是 fixed 定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

不理解可以再看看下面这两张示意图（top:20px 的情况，取自开源项目 fixed-sticky）：

距离页面顶部大于 20px，表现为 position:relative：

sticky-top-off

距离页面顶部小于 20px，表现为 position:fixed：

sticky-top-on

生效规则

  1. 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
    • 并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
  2. 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
    • 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
    • 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
  3. 达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

面试题

{
  /* 全局值 */
  position: inherit;
  position: initial;
  position: unset;
}

层级 @@@

如果定位元素的层级是一样，则 下边 的元素会盖住 上边的

通过 z-index 属性可以用来设置元素的层级，可以为 z-index 指定一个 正整数 作为值，该值将会作为当前元素的层级层级越高，越优先显示

对于没有开启定位的元素不能使用 z-index @@@

父元素的层级再高，也不会盖住子元素

浮动提升半级

相对定位使得元素提升一个层级

绝对定位也是一个层级

z-index 为 1，层级比定位元素高，z-index 为 -1，比浮动的 开启定位的都低

堆叠上下文 详见 CSS2.1

* 浮动

块元素在文档流中默认垂直排列，所以这个三个 div 自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用 float 来使元素浮动，从而脱离文档流

开启浮动，元素类似 block-inline，表现为 block，但是可以并排，不支持 vertical-align，对齐，而 line-block 时可以对齐的

可选值：

描述

1548669602738

浮动与文字

浮动的元素不会盖住 文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

本质: 就是为了文字环绕图片而设置的浮动属性

表现: 浮动只提升了半层，除了文字，把另外半层提了上去

浮动提升半层级

一个元素，分为盒子层和元素内容层，浮动会使得元素提升到 文档流的 元素内容层，表现为提升半层

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #d1{
    width: 100px;
    height: 100px;
    float: left;
    background-color: pink;
  }
  #d2{
    width: 100px;
    height: 100px;
    /*position: relative; 开启了定位后，提升一层，会盖着div1，以及div3*/
    background-color: deeppink;
  }
  #d3{
    width: 100px;
    height: 100px;
    background-color: yellow;
    color: red;
  }
</style>

<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div10</div>

1548736910181

div1 开启了浮动，整体提升到了文档流的元素内容层，所以把文字“div2”挤出了 div2 的盒子范围

同时 div1 原本的位置产生了空缺（div1 的盒子层，div1 的元素内容层），所以 div3 补充了 div1 的空缺，和被挤出 div2 的文字重叠在了一起，且由于在 html 结构上 div3 在后，所以遮盖了 div2 的文字

给 div2 开启定位

1548737232029

整体上升一个层级，盒子盖住了 div1，文字盖住了 div3 的元素内容

清除浮动 @@@

由于受到 box1 浮动的影响，box2 整体向上移动了 100px

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用 clear 来完成功能（只能 作用于兄弟元素）

clear 可以用来清除其他浮动元素对 当前元素 的影响（高度坍塌，随着文档流的移动等）

清除浮动：清除影响最大的那个兄弟元素浮动造成的影响，清除浮动通过增加外边距来达到相同的效果

可选值：

br 标签清除浮动

空标签清浮动

更多

背景

Background-color

background-color 会设置元素的背景色

默认值： transparent 不可继承

Background-image

使用 background-image 来设置背景图片

语法：background-image:url(相对路径);

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

一般情况下设置背景图片时都会同时指定一个背景颜色

如果指定多张背景图片，先指定的图片会在后指定的图片的基础上进行绘制

1548680092167

Background-repeat

用于设置背景图片的重复方式

可选值：

Background-position

背景图片默认是贴着元素的 padding-box 左上角显示通过 background-position 可以调整背景图片在元素中的位置

可选值：

Background-attachment

background-attachment 用来设置背景图片是否随页面一起滚动

可选值：

Demo 伪类切换背景图片

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。

产生问题的原因：

优点：

简写属性 Background

通过该属性可以同时设置所有背景相关的样式

没有顺序的要求，谁在前睡在后都行也没有数量的要求，不写的样式就使用默认值

background: #bfa url(img/3.png) center center no-repeat fixed;

一般建议 url 和 repeat 用简写，其他全部写在下面，不要分散设定背景的相关样式

默认值：

注意： @@@

背景颜色、图片，除了 margin 都会绘制，但是背景图片从 padding 开始绘制，从 borderbox 开始裁剪

只是会被边框的样式遮挡，设置了透明度就可以看见了，

1548681192317

#inner{
  width:200px;
  height: 200px;
  padding:50px;
  border:50px solid rgba(0,0,0,.2);
  margin:10px;
  background: deeppink url("./robot.png") repeat;
}

CSS3 新增

Background-origin

**默认值：**padding-box

示例

  .box1{
    margin:0 auto;
    width: 200px;
    height: 200px;
    padding:20px;
    border:20px solid rgba(0,0,0,0.5);
    background-color:deeppink;
    background-origin:content-box;
    background-repeat: no-repeat;
    background-image:url('./img/img2-middle.jpg');
    background-size: 50%;
  }

1558999541823

-webkit-background-clip

**默认值：**border-box

Background-size

设置背景图片大小

初始值：auto auto

不可继承

属性值

注意：

示例

  .box1{
    margin:0 auto;
    width: 200px;
    height: 200px;
    padding:20px;
    border:20px dashed rgba(0,0,0,0.5);
    background-color:deeppink;
    background-origin:padding-box;
    background-image:url('./img/img2-middle.jpg');
    background-repeat:no-repeat;
    background-size: 100% 100%;
  }

1559000169915

其他样式

@import

@import CSS@规则，用于从其他样式表导入样式规则。

这些规则必须 先于 所有其他类型的规则，@charset 规则除外; 因为它不是一个 嵌套语句

@import 不能在 条件组的规则 中使用。

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的@import 规则。这些条件导入在 URI 之后指定逗号分隔的 媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

从属关系区别

@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的 标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

加载顺序区别

加载页面时，link 标签引入的 CSS 被同步加载；@import 引入的 CSS 将在页面加载完毕后被加载。

兼容性区别

@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

DOM 可控性区别

可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

权重区别

写在后边都样式会覆盖前面的样式

link 先于@import 加载，是不是也先于@import 渲染呢？

@import 引入的样式后被加载，却会在加载完毕后置于样式表引入的位置，最终渲染时自然会被下面的同名样式层叠。

媒体查询

link 定义的方式：

<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

@import：

@import url("print.css") print;
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url('mobile.css') (max-width: 680px);

这里要注意的是，不论是 link 还是 import 方式，会下载所有 css 文件，然后根据媒体去应用 css 样式，而不是根据媒体去选择性下载 css 文件。

@import 影响页面性能

影响浏览器的并行下载

多个@import 导致下载顺序紊乱

不要使用

参考： https://www.qianduan.net/high-performance-web-site-do-not-use-import/ca