前端面试题(基础篇三)

一、before 和 :after中双冒号和单冒号 有什么区别？解释⼀下这2个 伪元素的作⽤

单冒号( : )⽤于 CSS3 伪类（爱恨法则），双冒号( :: )⽤于 CSS3 伪元素

⽤于区分伪类和伪元素

二、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为

1/60*1000ms ＝ 16.7ms

三、CSS不同选择器的权重(CSS层叠的规则)

！important 规则最重要，⼤于其它规则

⾏内样式规则，加 1000

对于选择器中给定的各个 ID 属性值，加 100

对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10

对于选择其中给定的各个元素标签选择器，加1

如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则

四、stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性

Scss 和 LESS 语法较为严谨， LESS 要求⼀定要使⽤⼤括号“{}”， Scss 和 Stylus 可 以通过缩进表示层次与嵌套关系

Scss ⽆全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作⽤域概念

Sass 是基于 Ruby 语⾔的，⽽ LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后 进⾏编译；

五、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在CSS当中，相邻的两个盒⼦（可能是兄弟关系也可能是祖先关系）的外边距可以结合成 ⼀个单独的外边距。这种合并外边距的⽅式被称为折叠，并且因⽽所结合成的外边距称为 折叠外边距。

折叠结果遵循下列计算规则：

        两个相邻的外边距都是正数时，折叠结果是它们两者之间较⼤的值。

        两个相邻的外边距都是负数时，折叠结果是两者绝对值的较⼤值。

        两个外边距⼀正⼀负时，折叠结果是两者的相加的和。