CSS面试题

1.CSS属性不区分大小写

2.行内(inline)元素 设置margin-top和margin-bottom 是否起作用？

   行内元素分替换元素和非替换元素

   替换元素：img、imput【起作用】

   非替换元素：span【不起作用】

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

   替换元素：img、imput【起作用】撑开了父元素

   非替换元素：span【不起作用】

4.设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？

    不会。rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

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

   错

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

   http://www.zhihu.com/question/20312140

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

   不能。translate()方法只能改变x轴，y轴上的位移。

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

   

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

div {overflow: hidden;}
p {float: left;}

A：会形成。

会触发BFC的条件有：

• • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC可以包含浮动元素、可以阻止元素被浮动元素覆盖

点击打开链接

9.浏览器CSS匹配顺序：

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

10.CSS优先级

    优先级逐级增加的选择器列表：

1. 通用选择器

2. 元素（类型）选择器

3. 类选择器

4. 属性选择器

5. 伪类

6. ID 选择器

7. 内联样式

11.display:none 和visibilty:hidden的区别：

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用`` visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而display:none`属性会使这个对象彻底消失（看不见也摸不到）

12.输入url之后发生了什么：

• 拉取浏览器cache，判断是否需要更新，如果不需要更新则从缓存获取内容直接渲染。判断是否更新的主要依据有：Expires时间、cache设置，浏览器的设置。
  
• 发送页面header请求
  

这个期间主要发生了以下几个事情：
（1）、浏览器向os询问server的ip地址
（2）、OS发送DNS寻址，并且返回ip以及端口

（3）、建立tcp连接（这一步我们可以查看207146的event ID）其有内容如下，可以发现这个期间消耗时间：280毫秒

（4）、页面通过tcp连接发送http头请求 

（5）在522毫秒以后接收完成了服务器返回的header

（6）、接收完header后，浏览器得到了返回的请求类型（200、304......）、服务器资源是否有更新（如果没有更新直接从cache获取缓存渲染）等信息

• 在138毫秒后浏览器分段(如果页面小不一定分段)接收完了页面内容，如果页面需要进行缓存则将页面缓存起来，同时对页面进行解码（包括gzip解压等）。
  
• 根据返回的数据类型（html类型、图片类型、声音…）进行页面渲染