前端面试题及答案-CSS篇-前端菜鸟的进阶之路-SegmentFault思否

这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。

1、CSS3的新特性

实现圆角（border-radius） 阴影（box-shadow） 文字加特效（text-shadow） 线性渐变（gradient） 旋转（transform） 媒体查询，多栏布局

具体
2、CSS中 link 和@import 的区别

link属于HTML标签，而@import是CSS提供的; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; link方式的样式的权重 高于@import的权重.

3、介绍一下CSS的盒子模型

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）详细介绍

两种盒模型：标准W3C盒模型、IE盒模型。

区别对比：(注意蓝色背景区域大小)

标准盒模型元素宽度width=content=100px，高度计算相同
IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。

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

选择符

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

继承

1. 可继承的样式： font-size font-family color, text-indent;
2. 不可继承的样式：border padding margin width height;

新增伪类

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

优先级算法规则:优先级就近原则，同权重情况下样式定义最近者为准;

!important >  id > class > tag  
important 比 内联优先级高,但内联比 id 要高

前端面试题及答案 - 浏览器篇 前端面试题及答案 - HTML篇 前端面试题及答案 - JS篇