前端面试问题css汇总

Posted 2020-09-30

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

　　块级元素：div p h1 h2 h3 h4 form ul li
　　行内元素: a b br i span input select

　　空元素：即没有内容的html元素，例如：br、meta、hr、link、input、img
　　css盒模型:content，padding，border ,margin（盒模型顺序）

　　行内元素的margin padding是无效的，需要display:inline

　　用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的区别

　　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.       两个外边距一正一负时，折叠结果是两者的相加的和。