网页的几种表现形式

• 视图层（html层）
• 表现层（css层）
• 行为层（js）

css作用

• 对html元素的位置和精确计算像素，外观，字体等等，

css特点：

• 丰富的样式定义
• 易于使用和修改
• 多页面使用
• 可层叠（一个元素可具有多个css样式）
• 页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页 性能）

** SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)，可以使用sass和less对css做模块化开发，定制样式的组件**

1.介绍一下标准的CSS的盒子模型？

有两种， IE 盒子模型、W3C 盒子模型；

2 display有哪些值？说明他们的作用。

block              象块类型元素一样显示。

none               缺省值。象行内元素类型一样显示。

inline-block    象行内元素一样显示，但其内容象块类型元素一样显示。

list-item          象块类型元素一样显示，并添加样式列表标记。

table              此元素会作为块级表格来显示

inherit            规定应该从父元素继承 display 属性的值

3. position的值relative和absolute定位原点是？

absolute  生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 

fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 

relative  生成相对定位的元素，相对于其正常位置进行定位。 

static    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 

inherit   规定从父元素继承 position 属性的值。

4 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

5 css定义的权重

以下是权重的规则：

标签的权重为1，class的权重为10，id的权重为100

以下例子是演示各种定义的权重值：

                  /权重为1/            div{}

                  /权重为10/          .class1{}

                  /权重为100/       #id1{}

                  /权重为100+1=101/         #id1 div{}

                  /权重为10+1=11/              .class1 div{}

                  /权重为10+10+1=21/      .class1 .class2 div{}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

6 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

7. CSS优化、提高性能的方法有哪些？

将样式表放到页面顶部

不使用CSS表达式

不使用@import

不使用IE的Filter

8. 什么是响应式设计？响应式设计的基本原理是什么？

响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案

基本原理就是利用css的媒体查询功能更具不同屏幕的大小，向下兼容设备、移动优先，达到响应的效果

9. ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。

如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

10. CSS 预处理器 / 后处理器？

• 预处理器例如：less、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
• 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

11.css sprite是什么,有什么优缺点。

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 其优点在于：

l 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

l 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；

l 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

l 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：

l 图片合成比较麻烦；

l 背景设置时，需要得到每一个背景单元的精确位置，；

l 维护合成图片时，修改一个图片可能需要从新布局整个图片，样式最好只是往下加图片，而不要更改已有图片。

12 渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

可继承的样式font-size font-family color text-indent。