前端面试问题css汇总

    <div class="wrapper">
        <div class="content"></div>
    </div>    

    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height，width
        margin-left: -100px;
    } 

5，简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

6、什么是css hack ？css hack解决的问题？

　　CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的

　　CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题（参考文档：http://www.kwstu.com/Admin/ViewArticle/201409011604277330）

　　不同浏览器的内核：IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto，Firefox：gecko内核；

7、px和em的区别

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
　　浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8，有哪些方式可以对一个DOM设置它的CSS样式？　

　　外部样式表，引入一个外部css文件

　　内部样式表，将css代码放在标签内部

　　内联样式，将css样式直接定义在 HTML 元素内部

9、CSS都有哪些选择器？ 派生选择器（用HTML标签申明）

　　id选择器（用DOM的ID申明）

　　类选择器（用一个样式类名申明）

　　属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

　　除了前3种基本选择器，还有一些扩展选择器，包括

　　后代选择器（利用空格间隔，比如div .a{  }）

　　群组选择器（利用逗号间隔，比如p,div,#a{  }）

　　选择器越特殊，选择指向越准确，优先级越高。

　　css 奇数、偶数选择器。奇数：p:nth-child(odd)；偶数：p:nth-child(even)

10，rgba()和opacity的透明效果有什么不同？

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

11，Sass、LESS是什么？大家为什么要使用他们？

　　 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

　　结构清晰，便于扩展。

　　可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

　　可以轻松实现多重继承。

　　完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

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

　　答案：

　　外边距重叠就是margin-collapse。

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

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

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

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

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