一 ：CSS预处理器：
一种语言用来为 CSS 增加一些编程的的特性，可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强
二：两种主要css预编译器：
两者共性：
● 混入(Mixins)——class中的class；
● 参数混入——可以传递参数的class，就像函数一样；
● 嵌套规则——Class中嵌套class，从而减少重复的代码；
● 运算——CSS中用上数学；
● 颜色功能——可以编辑颜色；
● 名字空间(namespace)——分组样式，从而可以被调用；
● 作用域——局部修改样式；
● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
两者区别：
（1）Less：1.引入less.js来处理less代码输出到浏览器；
也可开发环节中使用less，然后编译成css文件，直接放到项目中；
也有 Less.app、SimpleLess、CodeKit.app这样 的工具，也有在线编译地址
2.变量符不一样，LESS是@，变量的作用域与sass也不一样
3.LESS没有输出设置
4.LESS不支持条件语句
5.Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分 源码就是采用Less语法编写
（2）Sass：1.安装需要依赖于Ruby环境，是在服务端处理的
2.变量符是$
3.SASS提供4中输出选项：NESTED, COMPACT, COMPRESSED 和 EXPANDED。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
4.SASS支持条件语句，可以使用IF{}ELSE{},FOR{}循环等等
5.scss引用的外部文件命名必须以_开头
文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件
6.Sass有工具库Compass
Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。 在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能
7.利用@mixin和@include来调用
三.npm 安装 sass 时 node-sass 包报错问题
在使用npm安装node-sass的时候，运行时可能会出现如下报错：
Module build failed: Error: ENOENT: no such file or directory, scandir
解决方法是:
1、在node_modules\node-sass\目录下，创建一个vendor目录，如果已经存在，可以忽略
2、运行以下命令：
npm rebuild node-sass
四.盒子模型：
1.标准盒（W3C）模型的宽度、高度只包括内容的宽度高度。
2.IE盒模型的宽度、高度，包括content + 宽度高度 + border
3.切换盒模型也很简单，需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型(默认)
box-sizing: border-box 是IE盒子模型
当内容区（content）域超过width时的区别：
当内容区超过width的范围时：
标准盒模型的内容区会扩大，始终与width保持一致。
怪异盒模型，会根据原有宽度（原来的width），优先保证border、padding，然后把剩下的区域分给content。并不会因为content变大，而width变大
怪异盒模型中，父元素的盒模型确定，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示
4.补充内容：（1）对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
（2）对于相邻的块级元素margin-bottom和margin-top 取值方式：
都是正数： 取最大值 距离=Math.max(margin-botton,margin-top)
都是负数： 取最小值 距离=Math.min(margin-botton,margin-top)
上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加 距离=margin-botton+margin-top
五.BFC布局（IFC为行级格式化上下文）：
1.FC（Formatting context格式化上下文）：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
2.BFC（Block Formatting Contexts块级格式化上下文）定义：
具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性
3.BFC 布局规则：
（1）内部的Box会在垂直方向，一个接一个地放置
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
（4）BFC的区域不会与float box重叠
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
（6）计算BFC的高度时，浮动元素也参与计算
4.BFC特性及应用：
（1）同一个 BFC 下外边距会发生折叠，分属于不同的BFC时可以阻止margin重叠
（2）自适应两栏布局
（3）可以阻止元素被浮动元素覆盖
（4）可以包含浮动元素——清除内部浮动
5.哪些元素会生成BFC？
（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display是inline-block，table-cell，table-caption，flex，inline-flex
（5）overflow不为visible
6.属于同一个BFC的两个相邻Box的margin会发生折叠
解决办法让两个box属于不同BFC，给class：father设置overflow：hidden就可以解决margin折叠了
父级设置overflow：hidden触发BFC就可以解决高度塌陷
7.IE中的Layout：Layout 和 BFC 基本是等价的
为了处理 IE 的兼容性，在需要触发 BFC 时，我们除了需要用触发条件中的 CSS 属性来触发 BFC，还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout
六.Iframe的优点和缺点：
（1）优点（目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了）：
1.iframe能够原封不动的把嵌入的网页展现出来
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
6.方便制作导航栏
（2）缺点：
1.会产生很多页面，不容易管理
2.不容易打印
3.浏览器的后退按钮无效
4.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化
5.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
6.多框架的页面会增加服务器的http请求，对于大型网站是不可取的
7.iframe会阻塞主页面的Onload事件
8.会影响页面的并行加载
（3）解决iframe缺点方法：
使用js动态给iframe的src加载页面内容，示例代码如下：
<iframe id="fram"></iframe>
document.getelementbyid("fram").src="a2.html"
七.元素定位有哪些（position）：
-
absolute绝对定位：相对位置为父元素为非static的第一个父元素进行定位
-
fixed 固定定位（老IE6不支持）：相对于浏览器窗口进行定位
-
relative相对定位：对于其正常（默认布局）位置进行定位
-
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
补充：
1.所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2.absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
3.absolute定位忽略padding，相对位置为相对定位容器的左上角内边框
八.样式导入方式:
1.link的使用:
2.import的使用（推荐使用 @import url(index.css);）:
3.不同点：
（1）link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
（2）兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
（3）在样式表文件可以使用import导入其它的样式表文件，而link不可以
（4）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
（5）link支持使用Javascript控制DOM去改变样式；而@import不支持
九. ::before 和:before有什么区别？
1.相同点：
（1）都可以用来表示伪类对象，用来设置对象前的内容
（2）:befor和::before写法是等效的
2.不同点：
（1）:befor是Css2的写法，::before是Css3的写法
（2）:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
3.补充：
（1）伪类对象要配合content属性一起使用
（2）伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
（3）伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }
十. css样式的优先级：
1.优先级顺序为：!important（ES6以及没有该属性）>style（权重为1000）>权重值
2.如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现
3.权重规则：
标签的权重为1；
class的权重为10；
id的权重为100
十一.如何居中一个元素（正常、绝对定位、浮动元素）：
（一）元素水平居中的方式
1）行级元素水平居中对齐（父元素设置 text-align:center）
2) 块级元素水平居中对齐（margin: 0 auto）
3）浮动元素水平居中：
1.宽度不固定的浮动元素
2.宽度固定的浮动元素：
position:relative|absolute; left:50%;
4）让绝对定位的元素水平居中对齐（重点）：
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/
}
（二）元素垂直居中对齐
1）对行级元素垂直居中（heiht与line-height的值一样）
如： height:300px; line-height:300px;
2）对块级元素垂直居中对齐：
2.1 父元素高度固定的情况
a.父元素的height与line-height值相同
b.需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
2.2 父元素高度不固定的情况:
父元素的padding-top和padding-bottom一样
十二. display有哪些作用:
（1）元素默认的display值的情况如下：
block(块级元素) <div>、<p> <ul> <ol> <form>
inline（内联元素） <span> <a> <img> <input> <select> <label>
list-item（项目列表） <li>
none(不显示) <head>（头部元素都是） <title> <br> <thead> <tbody> <tfoot>
（2）常见的属性值：
none：元素隐藏
block：块级元素
inline-block：内联块级元素
list-item:列表项目
表格系列方面的显示
table
table-row
（3）补充：
1.行级元素浮动之后，display为block
2.flex（弹性盒子）
不过要结合相关的属性一起，flex-flow和flex。在响应式开发中flex非常有用。
行式布局 flex-flow: row;
十三.一个满屏 品 字布局 如何设计：
需要用到的技术：
1.元素水平居中对齐
1)使用margin对齐(推荐)
2)使用left：50%
3)使用text-align
2. 元素对相对窗口定位
1)使用filxed（推荐）
2)使用absolute定位
3)使用html和body的width和height填这个窗口
3.元素左右定位
1)使用float左右浮动
2)使用绝对定位进行左右定位（推荐）
十四.用纯CSS创建一个三角形的原理:
1.采用的是均分原理:盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
代码 ：
.square{
width:0;
height:0;
margin:0 auto;
border:6px solid transparent;
border-top: 6px solid red;
}
十五.如何清除元素浮动：
1.使用clear:both清除浮动
示例1：使用div
示例2:使用<br clear="all">
示例3：伪类对象::after+zoom:1(推荐使用)
2.使用overflow属性：overflow:auto;、overflow:hidden;都可以
3.使用display属性: 父元素不能水平居中，在父元素使用text-align:center解决
4.父级元素浮动: 父元素不能水平居中，可以使用定位解决
十六.CSS3新特性：
（1）1.CSS3的选择器：
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E
（2）@Font-face 特性：
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体
（3）圆角：
border-radius: 15px;
（4）多列布局 （multi-column layout）：
兼容性不好，还不够成熟。还不能用在实际项目中
（5）阴影（Shadow）：
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
（6）CSS3 的渐变效果：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
（7）css弹性盒子模型：
（8）CSS3制作特效：
Transition
Animation动画特效
十七.重绘和回流：
render 树在创建完成时，并不包含位置和大小信息。计算这些值的过程称为布局或重排
（1）回流（Reflow）：render 树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。
回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
（2）重绘：render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响 render 树重新布局的，比如修改字体颜色
（3）什么情况下会产生回流呢
1. 改变 DOM 树结构，比如添加或者删除可见的元素、改变文本内容、改变位置
2. 改变元素几何尺寸：边距、填充、边框、宽度和高度
3. 改变浏览器窗口尺寸
4. 伪类激活，在用户交互过程中发生
（4）应该尽量减少回流和重绘，那么怎样优化浏览器渲染过程？
其实优化就是减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略
1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变
2. 让操作元素离线处理
即使用documentFragment或div等元素进行缓存操作，先把所有要添加到元素添加到1个div，最后才把这个div append到body中
先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。
3. 将引起回流的属性赋值给变量，进行缓存，需要用到的时候直接使用变量就行
4. 减少操作影响的节点，影响的节点越多，则越消耗性能。