码迷,mamicode.com
首页 > Web开发 > 详细

前端面试问题css汇总

时间:2017-07-27 18:16:23      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:服务   样式   结构   特性   资源下载   二分   padding   border   ide   

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

前端面试问题css汇总

标签:服务   样式   结构   特性   资源下载   二分   padding   border   ide   

原文地址:http://www.cnblogs.com/shmily-code/p/7245904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!