最新前端面试题大全(css篇)

1. CSS实现垂直水平居中

HTML结构：

CSS：

.wrapper{position:relative;}

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute; //父元素需要相对定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的height，width

margin-left: -100px;

}

2.display有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

none 缺省值。象行内元素类型一样显示。

inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示。

inherit 规定应该从父元素继承display 属性的值。

3.position有哪些值？说明他们的作用。

absolute 生成绝对定位的元素，相对于(static 定位以外的)第一个父元素进行定位。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位(老IE不支持)。

relative 生成相对定位的元素，相对于其正常位置进行定位。

static 默认。没有定位，元素出现在正常的流中(忽略top, bottom, left, right z-index声明) inherit 从父元素继承position 属性的值。

4.行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS的盒子模型？

行内元素: a、b、span、img、input、strong、select、label、em、button、textarea

块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素: 即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

盒子模型:

1) 在网页中，一个元素占有空间的大小由几个部分构成。

2) 其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。

3) 这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的

区域或区域。

4) 4个部分一起构成css中元素盒子模型。(IE的content部分包含了border和padding)

5.CSS引入的方式有哪些? link和@import的区别是?

内嵌: 在html文档的head部分直接写入css

内联: 即行内样式，直接在html标签里写入对这个标签的css控制

外链: 在html文档的head部分添加标签

导入: 使用@import导入

区别:

Link 属于XHTML标签,写在html页面中,与页面同时加载支持使用javascript改变样式无兼容性@import 由css提供,写在CSS页面中,等到页面被加载完再加载不支持CSS2.1以下浏览器不支持

6.CSS选择符有哪些?哪些属性可以继承?优先级算法?内联和important哪个优先级高?

CSS选择符: ID选择器、类选择器、标签名选择器、后代选择器(派生选择器)、群组选择器除ID选择器外都是可以继承

优先级算法: 标签内直接定义(1000) > ID选择器(100) > 类选择器(10) > 标签名选择器(1)

(如果权重相同，则最后定义的会起作用，但应避免这种情况出现)

内联和important中，important优先级高

CSS3新增伪类举例：

p:first-of-type p:last-of-type p:only-of-type

p:only-child p:nth-child(2) :enabled, :disabled :checked

7.CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素clear:both（理论上能清除任何标签，增加无意义的标签）使用CSS的overflow属性overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

使用CSS的:after伪元素(用于非IE浏览器)

使用邻接元素处理

8.CSS居中（包括水平居中和垂直居中）

内联元素居中方案

水平居中设置：

(1)行内元素设置text-align: center

(2)Flex布局设置display: flex; justify-content: center; (灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：

(1)父元素高度确定的单行文本（内联元素）设置height = line-height；

(2)父元素高度确定的多行文本（内联元素）

方法一：插入table且vertical-align: middle

方法二：display: table-cell; vertical-align: middle

块级元素居中方案

水平居中设置：

(1)定宽块状元素设置左右margin值为auto

(2)不定宽块状元素

一：给该元素设置displa: inine

二：父元素position: relative；left: 50% 子元素position: relative；left: 50%；

三：在元素外使用表格,该元素写在td内，然后设置margin: auto 垂直居中设置：

1使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

2利用position:fixed（absolute）属性，margin: auto

3利用display: table-cell属性使内容垂直居中;

4使用css3的新属性transform: translate(x,y)属性;

5使用:before元素;

9.css盒模型，可能会要求手写一个布局，这个布局基本上用到的css是margin的负值，boxing-sizing：border-box，布局尽量往这方面想。

浏览器布局的基本元素是盒，在w3c的标准模式下，width=width，

但是在怪异模式下，width=border*2+padding*2+width

其中后代元素的width:100% 参照的是右边的那个width。

10.px和em的区别

px和em都是长度单位

px的值是固定的，指定是多少就是多少，较易计算。

em得值是非固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px, 0.75em=12px, 0.625em=10px

11.CSS3 box-sizing的作用

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding

box-sizing属性可以为三个值之一：

content-box，默认值，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内

12.如何快速合并雪碧图

Gulp：gulp-css-spriter

webpack：optimize-css-assets-webpack-plugin

Go！Png

在线工具

13.响应式图片

(1)JS或者服务端硬编码，resize事件，判断屏幕大小加载不同的图片

(2)img srcset 方法

(3)picture标签-> source

(4)svg

(5)第三方库polyfill

14.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

15.描述css reset的作用和用途。

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

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

16.页面重构怎么操作？

编写CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

17.解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

18.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型渲染模式的不同

使用https://www.360docs.net/doc/1714198286.html,patMode 可显示为什么模式

19.absolute的containing block计算方式跟正常流有什么不同？

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

21.BFC相关问题

块级格式化上下文(Block formatting context)是一个独立的渲染区域，只有Block-level box 参与它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干

BFC的渲染规则

BFC这个元素的垂直方向的边距会发生重叠

BFC的区域不会与浮动元素的box重叠（清除浮动原理）

BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来它里面的元素也不会影响外面的元素

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

如何创建BFC？

overflow属性不为visible

float属性不为none

position属性为absolute或fixed

display属性为inline-block、table-cell、table-caption、flex、inline-flex BFC的常用场景: 解决边距重叠

21.如何优化图像、图像格式的区别？

重要性: 节省带宽, 对于同时访问该网站的用户, 还是网站运营本身来说, 都将减少开销

选择图像文件格式应该在透明度、色深、压缩率三者之间权衡:

如颜色色彩丰富且无需透明度支持, 选择jgp。如需透明度支持, 首先排除jpg

有损压缩与无损压缩

无损压缩是对文件本身的压缩, 是对文件的数据存储方式进行优化, 文件可以完全还原, 不影响文件内容

有损压缩是对图像本身的改变, 在保存图像时保留了较多的亮度信息, 而将色相和色纯度的信息和周围的像素进行合并, 由于信息量减少了, 所以压缩比可以很高, 图像质量也会相应的下降。

色深: 指某种图像格式包含的颜色的多少(用位表示，8位色深表示256种颜色)

gif 只支持8位色深模式，1位透明度。用于颜色值较少，有大块相同颜色区域的图像。

jpg 支持24位色深模式，不支持透明度。用于颜色值较多，色彩和细节丰富的图像

png 支持8位和24位色深模式(文件较大)。推荐使用8位色深的png

22.在书写高效CSS 时会有哪些问题需要考虑？

书写高效的css

1.使用外联样式替代行间样式或内嵌样式(不建议使用@import外联方式)

2.使用继承(比如字体、字号属性，可以在body的css样式中规定，有特定的变化，再针对该元素

书写。并非特指使用inherit属性)

3.使用多重选择器示例：h1,h2,h3,...,a{color:#333}

4.使用多重声明(同一元素的样式设置，在一对{}中写完)

5.使用简记属性

示例：a{font:bold 14px/20px Verdana, Arial, Helvetica, sans-serif;}

分别表示：加粗;字号14px;行高20px;字体

6.避免使用!important属性，特定情况下可以使用以下方式加高权重级别

示例：body #content{...}

书写可维护的css可以让后续维护人员更容易理解我们书写的样式代码

1.在样式表的开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息

示例：/*------------------------------------

创建时间：2015.10.16

创建者：’author’

----------------------------------------*/

2.包括公用的颜色标记

示例：body{color:#333;}

a{color:#333;}

a:hover{color:#ff3300;}

3.给ID和class进行有意义的命名

4.将关联的样式进行整合

示例：#nav{...}

#nav ul{...}

#nav ul li{...}

5.给样式添加清晰的备注

示例：/*---------header start---------------*/

.........................

/*---------header end---------------*/

组件化css

将css样式表拆分成独立的css样式文件：header.css, footer.css, common.css

content.css, container.css等等，拆分之后方便css样式的维护管理。

Hack free css

如何处理IE浏览器的兼容性问题，一直困扰着前端工作者。如果使用css hack来解决问题，在IE浏览器版本升级更替，改进对css样式的支持后，之前使用的hacks将会无效。

在不使用css hack的情况下更新页面，可以使用条件注释来针对或避开IE浏览器。

针对IE浏览器：

步骤1.创建一个css样式文件，ie5.css

步骤2.使用条件注释：当使用的浏览器是ie5版本时，读取并使用ie5.css文件

示例：

使用条件注释的优点：

1.No Hacks

特定的css规则仅出现在新的样式表里。

2.文件分离

针对特定版本的IE定义的样式脱离了主样式表，可以在IE浏览器升级更新对属性支持时轻松移除这些文件。

3.针对性

可对不同版本的IE浏览器有针对性的进行相关属性的定义。

23、什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS 文档：css文档）。例如：

//条件Hack

//属性Hack

.test{

color:#090\9; /* For IE8+ */

*color:#f00; /* For IE7 and earlier */

_color:#ff0; /* For IE6 and earlier */

}

//选择符Hack

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */