前端面试题集锦——CSS
CSS选择符有哪些？哪些属性可以继承？
-
CSS选择符
- id选择器（
#myid） - 类选择器（
.myclassname） - 标签选择器（
div, h1, p） - 相邻选择器（
h1 + p） - 子选择器（
ul > li） - 后代选择器（
li a） - 通配符选择器（
*） - 属性选择器（
a[rel = "external"]） - 伪类选择器（
a:hover,li:nth-child）
- id选择器（
-
可继承的样式：
font-size font-family color ul li dl dd dt; -
不可继承的样式：
border padding margin width height;
css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
CSS优先级算法如何计算？
-
优先级就近原则，同权重情况下样式定义最近者为准;
-
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3有哪些新特性？
- 新增各种CSS选择器 （
:not(.input)：所有 class 不是“input”的节点） - 圆角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 阴影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow）
- 文字渲染 （Text-decoration）
- 线性渐变 （gradient）
- 旋转 （transform）
- 增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
CSS3新增伪类有那些？
举例：
-
p:first-of-type选择属于其父元素的首个元素的每个元素。 -
p:last-of-type选择属于其父元素的最后元素的每个元素。 -
p:only-of-type选择属于其父元素唯一的元素的每个元素。 -
p:only-child选择属于其父元素的唯一子元素的每个元素。 -
p:nth-child(2)选择属于其父元素的第二个子元素的每个元素。 -
:after在元素之后添加内容,也可以用来做清除浮动。 -
:before在元素之前添加内容 -
:enabled/:disabled控制表单控件的禁用状态。 -
:checked单选框或复选框被选中。
::before 和 :after中双冒号和单冒号 有什么区别？解释一下::before和::after这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before和::after。
为什么要初始化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.5tahoma, arial, \5b8b\4f53; }
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; }
描述css reset的作用和用途。
reset重置浏览器的css默认属性。浏览器的品种不同，样式不同，然后重置，让他们统一。
什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式闪烁(Flash of Unstyled Content),简称为FOUC。
IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法: 只要在之间加入一个或者