CSS前端面试集锦，找这些面试题，也是为了查漏补缺，加强一下基础

Link标记：
css使用这个标记来链接样式表和文档
注：link必须放在head元素中
属性：
Type：总是text/css
Href：样式表的URL
Media：说明这个样式表要应用于所有表现媒体
候选样式表：
将rel属性的值设置为alternate stylesheet，就可以定义候选样式表，只有用户选择这个样式表时才会用于文档表现
通过js和这个属性结合可以实现风格转换

Style元素：
一定要有type属性，值为”text/css”。（没有好像也行）
可以使用@import指令指示浏览器加载一个外部样式表，在style容器内使用，且放在其他css规则之前

1.关于浮动和清除浮动
原理：浮动元素脱离文档流，但没有脱离文本流。不占据空间，但是文本不会被覆盖，也就是字围效果。
引发的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
解决办法：
（1）增加一个样式为clear：both的空标签放在浮动元素的父元素的最后。。（强烈不建议，增加代码的同时，如果多层嵌套很容易造成结构紊乱，产生意想不到的问题。）
（2）父元素设置浮动（不建议，如果有嵌套，它的父元素也要设置浮动，无限循环）
（3）使用overrflow，zoom属性： .fix(overflow:hidden;zoom:1;}设置该fix类的标签的内容超出该标签的时候会被隐藏
（4）父元素设置position：这种方式在父元素原本就需要设置position为fixed或absolute的时候可以优先采用。
（5）使用：after：原理类似新的标签然后设置clear：both。但使用伪类的方法没有多余的标签，这个是最常见的方法
.parent:after{
content: ‘’;
height:0;
display:block;
clear:both;
}

2.关于z-index和层叠上下文的形成
z-index：其实指的就是元素在z轴上的呈现顺序。z轴就是人眼看向屏幕的那条线，越靠近人眼越大。
注:z-index只能应用于定位元素（即设置了position属性为非static值）
层叠顺序：
正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border
注：层叠顺序的前提是在同一个层叠上下文元素中。
层叠上下文的形成：
（1）margin负边距
（2）Position的relative/absolute/fixed定位

3.请问”resetting”和”normalizing”的css之间的区别？如何选择？为什么？
Normalizing注重通用方案，重置掉该重置的样式，保留有用的user agent样式，同时会进行一些bug的修复。
Resetting相对暴力，会将所有元素添加默认样式，影响范围很大，讲求跨浏览器的一致性。 后面需要对所有公共的排版元素重新设置样式，很麻烦。
选择normalizing，因为它是模块化的，拥有详细的文档，保护了有价值的默认值，修复了浏览器的bug

4.盒模型
内容（content），填充（padding），边界（margin），边框（border）
两种，IE盒子模型，标准W3C盒子模型，IE的content部分包含了border和padding

5.BFC（Block Formatting Context）
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
如何触发BFC（满足下面任一条件就会触发）：
（1）body根元素
（2）浮动元素：float除none以外的值
（3）绝对定位和固定定位
（4）Display为inline-block，table-cells，flex
（5）Overflow（除了visible）
常见问题及解决：
（1）同一个BFC下上下外边距会发生重叠（放在不同的BFC容器中）
（2）元素浮动后父元素高度塌陷（清除浮动）
（3）元素被浮动元素覆盖（第二元素触发BFC，可用于左列定宽，右列自适应的两列布局）

6.css sprites
其实就是精灵图，将多个图片融合到一张图里，然后通过css布局到网页上。
好处：图片少了就减少了http请求，提高性能，优化网站。
省去了图片命名的烦恼
缺点：
在自适应的页面可能会出现问题；
后期维护比较麻烦

7.图片替换文字方案
（1）将文本和span标签一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图应用到span上
缺点：图像不能透明，不然会透出文字
（2)将span元素隐藏起来，在其父元素上添加背景图
（3)使用text-indent属性将文本推出屏幕

8.如何解决浏览器的样式问题
使用通配符*设置。
创建一个初始样式的css文件。将一些基本的样式，和兼容问题写进去

9.有哪些隐藏内容的方法
（1)display:none缺点：搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
（2)Visibility:hidden缺点：隐藏的内容会占据物理空间
（3)Overflow:hidden

10.栅格系统
栅格系统多用于做响应式布局。一个基本的栅格系统有container（容器），rows（行），columns（列），gutters（列宽），需要考虑在不同的分辨率下，赋予不同的行数和列数。

11.在书写高效css时应该考虑的问题
注意选择器，id选择器效率最高
抽取可重用的代码
考虑布局，先全局后局部

12.使用css预处理器的优缺点
优点：代码优化效率提高，代码结构更清晰优雅，提升开发者体验
缺点：多使用了一个编译器，牺牲了网页加载速度

13.如何实现设计中使用的非标准字体
1.使用图片替换
2.使用在线字体库
3.使用css3中的@font-face

14.css中伪类和伪元素
伪类有：
：active，：focus，：hover，：link，：visited，：first-child，：lang
伪元素有：
：before，：after，：first-letter，：first-line
可以用它们做出好看的交互效果。
两者的区别：
根本区别在于他们是否创造了新的元素（抽象）
一个元素可以同时添加多个伪类，而每一次只能对一个伪元素进行操作

加粗样式