css-面试题

margin和padding理解区别

1. 相同点

• 复合值
• 可以取4个值
• 取值顺时针规律

2.不同点margin

• 间距重叠，取大值
• 给子元素设置上下外边距时父元素会塌陷
• 1给父元素加个边框border-颜色可以取本身颜色，也可以取背景颜色，但是大小会变化
• 2给父元素添加属性overflow：hidden，涉及到BFC机制

谈谈你对盒模型的理解。

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

W3C的标准盒模型 
在标准的盒子模型中，width指content部分的宽度

IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

CSS选择器有哪些

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)、
子选择器（ul > li）、
后代选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）

css哪些属性可以继承哪些不可以

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height

css权重优先级

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

css居中

position的值

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

CSS3有哪些新特性

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

纯CSS创建一个三角形

需要把元素的宽度、高度设为0。然后设置边框样式

width: 0px;
height: 0px;
border: 30px solid transparent;
border-left-color: red;

display:none与visibility：hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

position跟display、overflow、float这些特性相互叠加后会怎么样

display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

对BFC规范的理解

块级格式化上下文 block formatting context

浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

在网页中的应该使用奇数还是偶数的字体？为什么呢

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

margin和padding分别适合什么场景使用

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

flex

1px问题

适配问题

元素居中总结

水平居中

块状元素

将该块级元素左右外边距margin-left和margin-right设置为auto
.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

行级元素

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parent{//在父容器设置
    text-align:center;
}
弹性盒子中的水平居中
将某元素定义为弹性盒子：display:flex;
然后在水平方向居中盒子内的元素：justify-content:center;

垂直居中

块状元素

行级元素

对该行内元素的父元素设置line-height与height相同：比如父元素div的height为50px,则设置：inline-height:50px;

设置行内元素vertical-align:middle

水平垂直居中

定宽高块状元素水平垂直居中

1. 子绝父相
2. 先设置元素绝对定位
3. 然后top left设置50%
4. 最后根据宽高设置margin负的像素

不定宽高块状元素水平垂直居中

方法一
子绝父相
先设置元素绝对定位
然后top bottom left right都设置为0
最后margin设置auto

方法二
子绝父相
先设置元素绝对定位
然后top left设置50%
根据transform：translate属性设置

方法三

给父元素设置display：flex
align-items：center定义父元素的子元素垂直居中
ustfiy-content: center定义父元素的子元素水平居中

浮动的理解

浮动	影响	方法
	父元素高度塌陷	给父元素添加伪元素
	影响后续相邻兄弟元素	再后续相邻兄弟元素前加一个空div：clear：both

文字基线

图片是以文字基线对齐的，不会对text-align生效果，必须给图片添加vertical-align: middle

外边距合并

给子元素设置上下外边距时父元素会塌陷，给父元素添加属性overflow：hidden

Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

网格布局Grid

几个易混淆的css属性

1. transform

   translate

   transition

   animation

   overflow

   outline

   Display display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

   Visibility visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

CSS3 弹性盒子(Flex Box)

%，vh,vw，px，em，rem的区别

1. px	绝对单位，页面按精确像素展示，px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
   em	em的值并不是固定的； em会继承父级元素的字体大小。相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
   rem	rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。
   %	1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
   vwvh	css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px， css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

CSS中的继承

1. 子元素继承父元素的样式，但是并不是所有属性都是默认继承的。
2. 通过文档中的 inherited：yes 来判断属性是否可以继承，关于继承可以参见css的继承关键字：

display:none和visibility:hidden的异同点

css定位的理解

媒体查询原理

移动端布局方案

css选择器

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

超链接访问过后的hover样式就不出现，原因及解决方法

被点击访问过的超链接样式就不再具有hover和active了，解决办法就是改变css属性的排列顺序LVHA

https://blog.csdn.net/u014697639/article/details/80311559## margin和padding理解区别

1. 相同点

• 复合值
• 可以取4个值
• 取值顺时针规律

2.不同点margin

• 间距重叠，取大值
• 给子元素设置上下外边距时父元素会塌陷
• 1给父元素加个边框border-颜色可以取本身颜色，也可以取背景颜色，但是大小会变化
• 2给父元素添加属性overflow：hidden，涉及到BFC机制

谈谈你对盒模型的理解。

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

W3C的标准盒模型 
在标准的盒子模型中，width指content部分的宽度

IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

CSS选择器有哪些

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)、
子选择器（ul > li）、
后代选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）

css哪些属性可以继承哪些不可以

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height

css权重优先级

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

css居中

position的值

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

CSS3有哪些新特性

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

纯CSS创建一个三角形

需要把元素的宽度、高度设为0。然后设置边框样式

width: 0px;
height: 0px;
border: 30px solid transparent;
border-left-color: red;

display:none与visibility：hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

position跟display、overflow、float这些特性相互叠加后会怎么样

display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

对BFC规范的理解

块级格式化上下文 block formatting context

浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

在网页中的应该使用奇数还是偶数的字体？为什么呢

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

margin和padding分别适合什么场景使用

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

flex

1px问题

适配问题

元素居中总结

水平居中

块状元素

将该块级元素左右外边距margin-left和margin-right设置为auto
.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

行级元素

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parent{//在父容器设置
    text-align:center;
}
弹性盒子中的水平居中
将某元素定义为弹性盒子：display:flex;
然后在水平方向居中盒子内的元素：justify-content:center;

垂直居中

块状元素

行级元素

对该行内元素的父元素设置line-height与height相同：比如父元素div的height为50px,则设置：inline-height:50px;

设置行内元素vertical-align:middle

水平垂直居中

定宽高块状元素水平垂直居中

1. 子绝父相
2. 先设置元素绝对定位
3. 然后top left设置50%
4. 最后根据宽高设置margin负的像素

不定宽高块状元素水平垂直居中

方法一
子绝父相
先设置元素绝对定位
然后top bottom left right都设置为0
最后margin设置auto

方法二
子绝父相
先设置元素绝对定位
然后top left设置50%
根据transform：translate属性设置

方法三

给父元素设置display：flex
align-items：center定义父元素的子元素垂直居中
ustfiy-content: center定义父元素的子元素水平居中

浮动的理解

浮动	影响	方法
	父元素高度塌陷	给父元素添加伪元素
	影响后续相邻兄弟元素	再后续相邻兄弟元素前加一个空div：clear：both

文字基线

图片是以文字基线对齐的，不会对text-align生效果，必须给图片添加vertical-align: middle

外边距合并

给子元素设置上下外边距时父元素会塌陷，给父元素添加属性overflow：hidden

Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

网格布局Grid

几个易混淆的css属性

1. transform

   translate

   transition

   animation

   overflow

   outline

   Display display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

   Visibility visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

CSS3 弹性盒子(Flex Box)

%，vh,vw，px，em，rem的区别

1. px	绝对单位，页面按精确像素展示，px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
   em	em的值并不是固定的； em会继承父级元素的字体大小。相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
   rem	rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。
   %	1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
   vwvh	css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px， css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

CSS中的继承

1. 子元素继承父元素的样式，但是并不是所有属性都是默认继承的。
2. 通过文档中的 inherited：yes 来判断属性是否可以继承，关于继承可以参见css的继承关键字：

display:none和visibility:hidden的异同点

css定位的理解

媒体查询原理

移动端布局方案

css选择器

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

伪类与伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

超链接访问过后的hover样式就不出现，原因及解决方法

被点击访问过的超链接样式就不再具有hover和active了，解决办法就是改变css属性的排列顺序LVHA

https://blog.csdn.net/u014697639/article/details/80311559