面试题联盟之CSS篇

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的盒模型

理论上分为四个盒子，content box、padding box、border box、margin box，但是实际上padding-box 只有 Firefox 曾经支持过，现在也不支持了，margin box更惨从未支持过

计算方式：

content box：盒模型的宽高 = content的宽高border box：盒模型的宽高 = content的宽高 + padding + border

css切换方式

可以通过box-sizing 设置，content-box为标准模型、border-box为IE模型

4、CSS 选择符有哪些？

选择符

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）

*5、哪些属性可以继承？

继承

1. 可继承的样式：font-size font-family color, text-indent;

2. 不可继承的样式：border padding margin width height;

6、CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素。

p:last-of-type  选择属于其父元素的最后

元素。

p:only-of-type  选择属于其父元素唯一的

元素。

p:only-child    选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

:enabled  :disabled 控制表单控件的禁用状态。

:checked        单选框或复选框被选中。

7、优先级算法如何计算？

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

!important >  id > class > tag

important 比 内联优先级高,但内联比 id 要高

8、为什么要清除浮动？如何清除？

引起的问题：

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

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

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

解决方法：

①利用clear清除浮动

.son {        clear: left | right | both | auto    }

②在父元素后面额外添加标签

<div class="parent">  ...  <div style="clear:both;"></div></div>

③父元素上使用after伪类

#parent:after {    content: '';    clear: both;    height: 0;    display: block;}

④利用overflow清除浮动

#parent {    overflow: auto;    display: inline-block;}

9、实现垂直居中的几种方法

<div class="parent">    <div class="son"></div></div>

① margin: auto

.parent {    width: 400px;    height: 400px;    position: relative;    .son {        position: absoulte;        left: 0;        right: 0;        top: 0;        bottom: 0;        margin: auto;    }}

② margin-left、margin-top负值法(需知道子元素width、height)

.parent {    width: 400px;    height: 400px;    position: relative;    .son {        position: absolute;        width: 100px;        height: 160px;        left: 50%;        top: 50%;        //margin-top: translateY(-50%);        //margin-left: translateX(-50%);        margin-top: -80px;        margin-left: -50px;    }}

③ flex布局

.parent{    display: flex;    align-items: center;    justify-content: center;}

④ table-cell(未脱离文档流)

.parent {    display: table-cell;    vertical-align: middle;    text-align: center;}

10、css预处理器（sass/less/stylus/postcss）

这些都是类css语言，通过webpack编译可以转成浏览器可读的css，并且赋予css更强大的功能。常用的功能：

文件分割：将大文件切割成小文件，方便维护

选择器嵌套：更容易看清层级关系

变量：更容易使视觉风格统一，便于整体风格的替换

循环语句

11、知道哪些css动画

transition -- 过渡动画transition: property duration timing-function delay;
animation -- 可以定义每一帧的动画animation: keyframe-name duration timing-function delay iteration-count direction;
transform -- 静态的translate、scale、rotate、skew、opacity等属性函数

12、rem布局的原理

概念：

em：相对于父元素的单位

rem：css的一个相对单位，是相对于html根元素的大小的单位，实质上是等比缩放。

vw,vh: 屏幕宽度/ 100， 屏幕高度/100

原理：

一般都是基于宽度的，将屏幕宽度平分成100份，转换成百分比布局。但是谷歌浏览器支持最小字体是12px，所以可以将屏幕分成10份来计算。

将html元素的字体大小 = 屏幕宽度 / 100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

根据设计图的尺寸编辑预处理function

$ue-width: 640; /* ue图的宽度 */
@function px2rem($px) {  @return #{$px/$ue-width*100}rem;}
p {  width: px2rem(100);}

13、display有哪些值？说明他们的作用?

 inline（默认）--内联 none   隐藏 block--块显示 table--表格显示 list-item--项目列表 inline-block

14、position的值？

 static（默认）：按照正常文档流进行排列； relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位； absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位； fixed(固定定位)：所固定的参照对像是可视窗口。****

15、用纯CSS创建一个三角形的原理是什么？

width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;

16、常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。

{margin:0;padding:0;}

IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。

display:inline;将其转化为行内属性。

渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{background-color:#f1ee18;/所有识别/.background-color:#00deff\9; /IE6、7、8识别/+background-color:#a200ff;/IE6、7识别/_background-color:#1e0bd1;/IE6识别*/}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。

给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。

解决方法:统一通过getAttribute()获取自定义属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。

解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

17、display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

18、position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

19、BFC规范(面试遇上机会很低)

BFC规定了内部的Block Box如何布局。

定位方案：

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边，与包含块border box的左边相接触。

BFC的区域不会与float box重叠。

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

根元素，即html

float的值不为none（默认）

overflow的值不为visible（默认）

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

20、CSS优化、提高性能的方法有哪些？

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

避免！important，可以选择其他选择器

尽可能的精简规则，你可以合并不同类里的重复规则

21、全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现 overflow：hidden； transition：all 1000ms ease；

22、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

23、让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

24、position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

25、display:inline-block 什么时候会显示间隙？

有空格时候会有间隙 解决：移除空格 margin正值的时候 解决：margin使用负值 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

26、style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

27、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

28、阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

29、rgba和opacity的透明有何不同？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

- END -