http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题，发现有些不会，所以在此做个整理以供自己学习，参考，总结。

1.问: CSS属性是否区分大小写？

ul {

    MaRGin: 10px;

}

答：不区分。（HTML, CSS都不区分，但为了更好的可读性和团队协作，一般都小写，而在XHTML 中元素名称和属性是必须小写的。）

2.问：对行内元素设置margin-top 和margin-bottom是否起作用

答：不起作用。（需要注意行内元素的替换元素img、input，他们是行内元素，但是可以为其设置宽高，并且margin属性也是对其起作用的，有着类似于Inline-block的行为）。看具体效果：

 <style>

    div {

      width: 500px;

      height: 500px;

      margin-top: 100px;

      margin-left: 100px;

      background: lightblue;

    }

    span {

      margin: 100px;

    }

    img {

      margin: 100px;

    }

 </style>

</head>

<body class="claro">

  <div class="test_wrap">

    <span>

      我是行内元素，设置margin看是否对我起作用

    </span>

    <img src="" alt="我是行内替换元素，margin-top,margin-bottom对我起作用">

  </div>

</body>

3.问：对内联元素设置padding-top和padding-bottom是否会增加它的高度

答：不会。同上题，要注意行内元素的替换元素，img设置padding-top/bottom是会起作用的。

4.问：如果设置<p>的font-size: 10rem;那么当用户重置或拖拽浏览器窗口时，它的文本会不会受到影响？

答：不会。

rem是css3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

5.问: 伪类选择器:checked将作用与input类型为radio或者checkbox, 不会作用于option？

答：不对。

可以作用于option，试了下感觉并没有什么用，虽然能选中，但是这个不能改变其中的属性。

 <style>

    option:checked {

      color: red;

    }

    input:checked {

      background: red;

    }

  </style> 

<div>

  <select>

    <option>Volvo</option>

    <option selected="selected">Saab</option>

    <option>Mercedes</option>

    <option>Audi</option>

  </select>

  <br>

  <br>

  <input type="radio" name="sex" value="male" checked>Male

  <br>

  <input type="radio" name="sex" value="female">Female

</div>

6.问: 在HTML文本中，伪类:root总是指向html元素？

答：是。

7.问:translate()方法能移动一个元素在z轴上的位置？

答：不能。它只能移动x,y轴的位置。translate3d可以。

8-14.这六个题都是在考css选择器的优先级，看下14题：

问：如下代码中文本“Sausage”的颜色是?

  <ul class="shopping-list" id="awesome">

    <li><span>Milk</span></li>

    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>

  </ul>
  #awesome .favorite:not(#awesome) .highlight {

  　　color: red;

  }

  #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {

  　　color: blue;

  }

答：red

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.

:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素，从最后一个子元素开始计数。

15.

html:

<p id="example">Hello</p>

css:

#example {

    margin-bottom: -5px;

}

问：#example的位置会发什么什么？

答：所有带id为example的元素的位置都会向上移动5px.(一般id不取重复，如果真的这样设置了就和class效果一样）

16.省略。。。

17-21.公用一个例子：

<div id="test1">

    <span id="test2"></span>

</div>

17.问：#i-am-useless 会被浏览器加载吗？

#i-am-useless {background-image: url('mypic.jpg');}

答：不会。

18.问：mypic.jpg 会被浏览器加载吗？

#test2 {

    background-image: url('mypic.jpg');

    display: none;

}

答：会。

19.问：mypic.jpg 会被浏览器加载吗？

#test2 {

    background-image: url('mypic.jpg');

    visibility: hidden;

}

答：会。

20.问：mypic.jpg 会被浏览器加载吗？

#test1 {

    display: none;

}

#test2 {

    background-image: url('mypic.jpg');

    visibility: hidden;

}

答：不会。

21.问：mypic.jpg 会被浏览器加载吗？

#test1 {

    visibility: hidden;

}

#test2 {

    background-image: url('mypic.jpg');

    display: none;

}

答：会.

22-23.

css:

@media only screen and (max-width: 1024px) {

    margin: 0;

}

22.问：only选择器的作用是？

答：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

23.问：screen关键词是指设备的物理屏幕大小还是指浏览器的视窗。

答：浏览器的视窗。

24.问:overfloa:hidden 是否形成新的块级格式化上下文？

答：会。

会触发BFC的条件有：

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block 中的任何一个。
  • position的值不为relative 和static。
  • 根元素。

总结：

一.css选择器，优先级知识点考的挺多。如何计算优先级，参考http://www.cnblogs.com/wangfupeng1988/p/4285251.html 这篇文章引入的一个概念：特指度。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

这个计算叫做“I-C-E”计算公式，

  1. I——Id；
  2. C——Class；
  3. E——Element；

即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

举例：

CSS选择器表达式

特指度计算结果

p

1

p.large

11

P#large

101

div p#large

102

div p#large ul.list

113

div p#large ul.list li

114

注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。

浏览器CSS匹配顺序：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

二：display:none 和visibilty:hidden的区别。

两者都是将某个元素隐藏起来，区别是：display:none会使对象彻底消失，不占据空间；但是visibility:hidden所占的空间还在，留了一块空白区域。（不过上述例子，关于img加载的，还有些不是很懂 第18问，为什么display:none还是要加载图片，第20问，却没有加载图片）

三：浏览器渲染，这个自己要着重学习下：

四：BFC 块级格式化上下文

参考：

前端试题css部分

前端开发面试题收集(css部分)的更多相关文章

  1. 前端开发面试题收集 css

    什么是CSS盒子模型 页面上的每个元素都被浏览器看做是一个矩形的盒子. 由内容.填充.边框.边界组成. 什么是 css sprite 将多个图片拼接在一个图片中,通过background-positi ...

  2. 前端开发面试题收集 JS

    前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...

  3. 前端开发面试题收集(html部分)

    1.问:<keygen>是正确的HTML5标签吗? 答:是. <keygen> 标签规定用于表单的密钥对生成器字段.当提交表单时,私钥存储在本地,公钥发送到服务器. 2.问:& ...

  4. 前端开发面试题收集 HTML

    Doctype是什么?说明特点. <!doctype>声明必须处于HTML文档的头部,在标签之前. <!doctype>声明不是一个HTML标签,是一个用于告诉浏览器使用哪种H ...

  5. 前端开发面试题收集(js部分)

    1.问:js中"1"+2+"3"+4 运算结果是? 答: js中,字符串和数值相加,得到的还是字符串,这里的结果1234也是字符串. 2.问:4+3+2+&qu ...

  6. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  7. 前端开发面试题-CSS（转载）

    本文由 本文的原作者markyun 收集总结. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(conte ...

  8. 前端开发面试题-HTML（转载）

    本文由 本文的原作者markyun 收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! ...

  9. 前端开发面试题-JavaScript（转载）

    本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

随机推荐

  1. Sublime Text 3中文乱码解决方法以及安装包管理器方法

    一般出现乱码是因为文本采用了GBK编码格式,Sublime Text默认不支持GBK编码. 安装包管理器 简单安装 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令 ...

  2. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  3. 解构C#游戏框架uFrame兼谈游戏架构设计

    1.概览 uFrame是提供给Unity3D开发者使用的一个框架插件,它本身模仿了MVVM这种架构模式(事实上并不包含Model部分,且多出了Controller部分).因为用于Unity3D,所以它 ...

  4. 你所能用到的BMP格式介绍

    原理篇: 一.编码的意义. 让我们从一个简单的问题开始,-2&-255(中间的操作符表示and的意思)的结果是多少,这个很简单的问题,但是能够写出解答过程的人并不 多.这个看起来和图片格式没有 ...

  5. ADFS3.0与SharePoint2013安装配置(原创)

    现在越来越多的企业使用ADFS作为单点登录,我希望今天的内容能帮助大家了解如何配置ADFS和SharePoint 2013.安装配置SharePoint2013这块就不做具体描述了,今天主要讲一下怎么 ...

  6. XAMARIN ANDROID 二维码扫描示例

    现在二维码的应用越来越普及,二维码扫描也成为手机应用程序的必备功能了.本文将基于 Xamarin.Android 平台使用 ZXing.Net.Mobile  做一个简单的 Android 条码扫描示 ...

  7. 转：MSSQL还原单mdf文件报1813错误

    原文地址:http://www.cnblogs.com/clownkings/p/4950865.html 解决办法: 1.首先要备份好mdf文件,如果他没了经理非吃了你不可.都不吐骨头的. 2.在数 ...

  8. WebAPI

    WebAPI的Host OWIN IIS WebAPI 的handler和Filter有啥区别? WebAPI  常用 Filters Exception Filter Timer Filter Lo ...

  9. intellij idea 13&14 插件推荐及快速上手建议

    IntelliJIDEA插件安装 首页 > blog Tags : intellij IDEA插件安装 更新日期: 2015-04-29 IntelliJ IDEA插件下载地址: http:// ...

  10. 【已解决】Https请求——基础连接已经关闭 发送时发生错误

    本人在做商用项目的推送消息功能时,借助第三方推送服务.这里避免有打广告的嫌疑,就不报名字了.由于是通过调用API接口,所以Post方法是自己写的,但是在开发环境是可以正常推送的,但是一上线就出各种问题 ...