前端面试问题css汇总

1，行内元素有哪些?块级元素有哪些?空元素有哪些？CSS的盒模型?　　

　　块级元素：div p h1 h2 h3 h4 form ul li

　　行内元素: a b br i span input select

　　行内块级元素   img   input

　　空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

　　css盒模型:content，padding，border ,margin（盒模型顺序）

　　css盒模型分为：标准盒模型和IE盒模型

　　标准盒模型：实际宽高就是自身的宽高

　　IE盒模型：实际宽高是自身宽高+padding+border

　　标准盒模型转换为IE盒模型：box-sizing：border-box；

　　display:inline  强制将块级元素转换为行内元素

　　display：block   强制将行内元素转换为块级元素    并不是实际意义上的块级元素，只是可以设置宽高

　　用display:inline-block 强制将块级元素转为行内元素。注意有3px间距。letter-spacing可以消除这个间距

2，描述css reset的作用和用途。

　　reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一。

3，如何减轻服务器对图片请求的压力

　　使用雪碧图，减少服务器请求图片的数量

4，CSS实现垂直水平居中

　　HTML结构：

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

　　CSS：

    .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，rem的区别

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。

　　em得值不是固定的，并且em会继承父级元素的字体大小。

　　rem的大小依赖于根元素   html
　　浏览器的默认字体高都是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.       两个外边距一正一负时，折叠结果是两者的相加的和。

13，css强制不换行，强制换行

　　强制不换行 
　　p { white-space:nowrap; }

　　自动换行 
　　p { word-wrap:break-word; }

　　强制英文单词断行 
　　p { word-break:break-all; } （设置强制将英文单词断行，需要将行内元素设置为块级元素。）

　　超出显示省略号 
　　p{text-overflow:ellipsis;overflow:hidden;}

　　white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 
　　　　white-space 属性设置如何处理元素内的空白 
　　　　normal 默认。空白会被浏览器忽略。 
　　　　pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 
　　　　nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 
　　　　pre-wrap 保留空白符序列，但是正常地进行换行。 
　　　　pre-line 合并空白符序列，但是保留换行符。 
　　　　inherit 规定应该从父元素继承 white-space 属性的值。

　　word-wrap: normal|break-word; 
　　　　word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 
　　　　normal: 只在允许的断字点换行(浏览器保持默认处理) 
　　　　break-word:在长单词或URL地址内部进行换行 
　　　　word-break: normal|break-all|keep-all;

　　word-break 属性用来标明怎么样进行单词内的断句。 
　　　　normal：使用浏览器默认的换行规则。 
　　　　break-all:允许再单词内换行 
　　　　keep-all:只能在半角空格或连字符处换行

14，如何让一个未知高度的div垂直居中？

　　1，display:table-cell：让标签元素以表格单元格的形式展示。父级：display:table;子元素：display:table-cell（不兼容ie6，ie7）

　　2，给要垂直居中的div再包一个div。然后让第一层div：position：relative，第二层div：{position：absolute；top:50%}，第三层：{position:relative;top:-50%}

　　3，flex布局

　　4，

display:box;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
box-pack:center;
box-align:center;

15，css的上下文选择器

　　1，后代选择器

　　2，子元素选择器

　　2，相邻兄弟选择器