1.介绍一下标准的CSS的盒子模型;与低版本IE的盒子模型有什么不同；
- 标准的盒子模型：宽度=内容宽度（content）+padding+border+margin;
- 低版本IE盒子模型：宽度=内容宽度(content+padding+border)+margin;
2.什么是Sass和Less;
Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。通俗来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。
3.Sass与Scss是什么关系?
Scss是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass的缩排语法，对于写惯CSS前端的web开发者来说很不直观，也不能将CSS代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
区别：
Scss 和 Sass 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss的语法书写和我们的 CSS 语法书写方式非常类似。
4.Stylus、Sass和Less的区别;
- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性;
- Sass 和Less 语法较为严谨，Less要求⼀定要使⽤⼤括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系;
- Sass ⽆全局变量的概念，Less和 Stylus 有类似于其它语⾔的作⽤域概念;
- Sass 是基于 Ruby 语⾔的，⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；
推荐文章：Sass、LESS 和 Stylus区别总结_匪鉴-CSDN博客_stylus和sass和less的区别
5.为什么要使用CSS预处理器？
JS中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。
CSS有具体以下几个缺点：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。
但是，CSS预处理器也不是万金油，CSS的好处在于简便，随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。
所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。
6.CSS选择器有哪些？有哪些属性可以继承；
- 基础选择器：标签选择器（div）、类选择器（.box）、id选择器（#name）、通配符选择器（*）；
- 组合选择器：并集选择器（div,p）、后代选择器（div p）、子元素选择器（div>p）、兄弟选择器（div+p）、伪类选择器（a:hover/li:nth-child）、属性选择器（input[value="密码"]）。
可继承的属性：
1、字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant等；
2、文本系列属性：color、text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform等；
...
7.CSS优先级算法如何计算？
优先级可以分为六个等级：
- 第一个等级是！important，优先级最高
- 第二个等级是内联样式 1000
- 第三个等级是id选择器 0100
- 第四个等级是类选择器，伪类选择器，属性选择器是0010
- 第五个等级是元素选择器和伪元素选择器是0001.
- 第六个是继承得到的属性，优先级最低
规则中每出现一个选择器，就将它们进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。如果权重相同：采用就近原则。
8.对BFC规范的理解；
BFC（Block Formatting context）：块级格式化上下文。是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。
形成条件（满足任意一条即可）：
- 浮动元素float:除了none
- 绝对定位元素: position: absolute fixed
- display为inline-block table-cells flex
- overflow除了visible以外的值(hidden auto scroll)
特性：
- 内部的盒子会在垂直方向上一个接一个的放置；
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关；
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此；
- BFC的区域不会与float的元素区域重叠；
- 计算BFC的高度时，浮动子元素也参与计算；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不影响外面的元素，反之亦然。
9.BFC有哪些应用；
1）解决margin叠加（外边距合并）的问题
margin叠加问题只会发生在margin上下。当上元素设置margin-bottom值，而下元素设置margin-top值时，真正产生作用的是只有它们两个谁设置值最大，谁起作用，而另一个就失效了。
2）解决margin传递问题
当子元素设置margin-top值时，真正移动的是父元素，而子元素还是在父元素原本的位置上跟着父元素一起移动。
3）解决浮动问题
当子元素浮动。父元素没有设置高度时，就会发生高度塌陷，就不会在页面中占据位置；最常见的用法就是在父元素上设置overflow: hidden样式。
4）解决覆盖问题（经典布局：左边固定、右边自适应）
元素覆盖，上层元素浮动之后，下层未浮动元素会被去占据浮动元素的位置，从而形成了覆盖。但是文字却不会被覆盖。
10.什么是FOUC？如何避免；
FOCU（Flash of unstyled Content ):在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面在windows下的ie出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称FOCU。
原因大致为：
1，使用import方法导入样式表；
2，将样式表放在页面底部 ；
3，有几个样式表，放在html结构的不同位置。
原理：
当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。 此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：
使用link标签将样式表放在文档<head>中。
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
