【前端面试必读】css基础面试

1.CSS选择器有哪些？

选择符类型	例子	例子描述
类别选择器(.class)	.intro	选择class=”intro”的所有元素
ID选择器(#id)	#first	选择id=”first”的所有元素
标签选择器(element)	div	选择所有 标签
后代选择器(element element)	div p	选择 元素内部的所有 元素
子选择器(element>element)	div>p	选择父元素为 的所有 元素
群组选择器(element,element)	div,p	选择所有 和 元素
相邻同胞选择器(element+element)	div+p	选择紧接在 之后的所有 元素
伪类选择器(:link :visited :active :hover :focus :first-child)	a:link a:visited a:active a:hover input:focus p:first-child	选择所有未被访问的或所有已被访问的或活动的链接）（选择鼠标指针位于其上链接）（选择获得的焦点的input 元素）
（伪元素选择器(:first-letter :first-line :before :after :lang(language))	p:first-letter p:first-line p:before p:after p:lang(it)	选择每个 元素的首字母；选择每个 元素的首行；在每个 元素的内容之前插入内容；在每个 元素的内容之后插入内容；选择带有以 “it” 开头的 lang 属性值的每个 元素
属性选择器([attribute] [attribute=value] [attribute~=value] [attribute|=value] )	[target=_blank] [attribute~=value]	选择包含一个以空格分隔的词为value的所有元素；[attribute

2.CSS3的新特性（个人总结）如下

1.过度（transiton）
2.动画（animation）
3.形状转换
transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)）
4.选择器
element1~element2: 选择前面有element1元素的每个element2元素。
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
:root: 选择文档的根元素。
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
E:target: 选择当前活动的E元素。
E:enabled: 选择每个启用的E元素。
E:disabled: 选择每个禁用的E元素。
E:checked: 选择每个被选中的E元素。
E:not(selector): 选择非selector元素的每个元素。
E::selection: 选择被用户选取的元素部分。

5.阴影（box-shadow）
6.边框（box-border）
border-radius（边框圆角）
border-image（边框图片）
7.反射
8.倒影（reflect）
9.颜色（提供了rgba和hsla的方法来显示颜色）
10.渐变
11.滤镜（filter）
12.布局
13.flex弹性布局
14.grid栅格化布局
15.column-count多列布局
17.盒模型
17.媒体查询（一般用来做自适应布局，与rem布局结合使用可以有巧妙地效果）

3.less和sass

1、Less：
是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

2、Sass：
是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
less和sass的相同之处
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

less和sass的区别
Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

em和rem的区别
em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化

4.link和@import的区别：

1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。