L--前端开发面试知识点(CSS相关)

1.display:none和visibility：hidden的区别？

display：none 隐藏对应的元素，在文档布局中不再给他分配空间，他各边 的元素会合拢，就当他从来不存在。

visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

2.CSS中的link和@import的区别是？

1.link属于html标签，而@import是CSS提供的；

2.页面被加载时，link会同时加载，而@import引用的css会等到页面加载完在加载；

3.import只在IE5以上才能被识别，而link是HTML标签，无兼容问题；

4.link方式的样式的权重高于@import的权重。

3.position的absolute与fixed共同点与不同点

A：共同点：

• 1.改变行内元素的呈现方式，display被置为block；
• 2.让元素脱离普通流，不占据空间；
• 3.默认会覆盖到非定位元素上

B：不同点：absolute的“根元素”是可以设置的，而fixed的“根元素”固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

4.介绍一下CSS的盒子模型？

1）有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

1. id选择器（#myid）
2. 类选择器（.muclass）
3. 标签选择器（div）
4. 相邻选择器（h1+p）
5. 子选择器（ul>li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a: hover）

可继承的样式： font-size font-family color text-indent；

不可继承的样式：border padding marging width height；

优先级就近原则，同权重情况下样式定义最近者为准；

载入样式以最后载入样式为准；

优先级为：

• ！important > id > class > tag
• important 比 内联优先级高，但内联比id要高

CSS3新增伪类举例：

• p:first-of-type 选择属于其父元素的 首个<p>元素的每个<p>元素
• p:last-of-type 选择属于其父元素的 最后<p>元素的每个<p>元素
• p:only-of-type 选择属于其父元素的唯一<p>元素的每个<p>元素
• p:only-child 选择属于其父元素的 唯一子元素的每个<p>元素
• p:nth-child（2） 选择属于其父元素的第二个子元素的每个<p>元素
• :enabled :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中。

6.列出display的值，说明他们的作用。position的值，relative和absolute分别是相对于谁进行定位的？

1.display的值：

• block 像块类型元素一样显示。
• inline 缺省值。像行内元素类型一样显示。
• inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
• list-item 像块类型一样显示，并添加样式列表标记

2.position的值：

• absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位
• fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right、z-index声明）
• inherit 规定从父元素继承position属性的值。

7.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）

transform：rotate（9deg） scale（0.85， 0.90） translate（0px，-30px）skew（-9deg，0deg）//旋转，缩放，定位，倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection

媒体查询，多栏布局

border-image

8.为什么要初始化CSS样式？

因为浏览器的兼容问题，不同的浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会出现浏览器之间的页面差异。

当然初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是：

* {
    padding:0;
    margin: 0;
}
//不建议

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6,
hr, p, blockquote, dl, dt, dd,
ul, ol, li, pre, form, fieldset,
legend, button, input, textarea,
th,td {
    margin: 0;
    padding: 0;
}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma,arial, 5b8b4f53;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
address, cite, dfn, em, var {
    font-style: normal;
}
code, kbd, pre, samp {
    font-family: couriernew, courier, monospace;
}
small {
    font-size: 12px;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
legend {
    color: #000;
}
fieldset, img {
    border: 0;
}
button, input, select, textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
} 

9.对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向的margin会发生重叠。

（W3C CSS2.1 规范中的一个概念，他决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）

 10.解释下CSS sprites，以及你要如何在页面或网站中使用它？

CSS sprites 其实就是把网页中的背景图片整合到一张图片文件中，再利用CSS的"background-image", "background-repeat", "background-position"的组合进行背景定位

，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片的请求的开销，因为请求耗时时间长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这么做了，因为有了http2。

11.解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含他的边框或者浮动元素的边框停留。

清除浮动的技巧：

　　1.使用空标签清除浮动。这种方法在所有浮动标签后面添加一个空标签 定义CSS clear:both。弊端就是添加了无意义标签。

　　2.使用overflow。给包含浮动元素的富父标签添加CSS属性 overflow：autoz; zoom:1; zoom:1用于兼容IE6。

　　3.使用after伪对象清除浮动。该方法只适用于非ie浏览器。具体写法可参照以下示例。使用中需要注意以下一点：该方法中必须为需要清除浮动的伪对象中设置height:0，否则该元素会比实际高出若干像素。

12.浮动元素引起的问题和解决方法？

问题：

　　1.父元素的高度无法被撑开，影响与父元素同级的元素

　　2.与浮动元素同级的非浮动元素会跟随其后

　　3.若非第一个元素浮动，则该元素之前的元素也需要浮动，负责会影响页面显示的结构

解决方法：

使用CSS中的clear：both;属性来清除元素的浮动可解决2,3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block; /*for IE/Mac*/
}