前端css面试题

px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em 是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于根元素，这样就意味着，只需要在根元素确定一个参考值(经常根据这一特点来进行 rem 布局)。

场景：

px 一般用于 PC 网页,比如宽度固定的网页或者采用媒体查询的网页。

rem 一般用于适配移动端网页,根据不同手机宽度展现出不同大小(类似等比缩放)

重绘重排有什么区别?

重排(回流):布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小

重绘:计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个金模型的特性进行绘制

浏览器的渲染机制（当一个元素的外观发生改变，但没有改变布局, 浏览器重新把元素外观绘制出来的过程，叫做重绘。

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘

重排必定会引发重绘，但重绘不一定会引发重排。

6.css什么属性可以继承？

1.字体系列属性

font-family：字体

font-weight；字体粗细

font-size；字体大小

font-style：字体风格

2.文本系列属性

text-indent：文本缩进

text-align：字体水平对齐方式

line-height：行高

word-spacing：！单词！之间的间距

letter-spacing：！中文或字母！之间的间距

text-transform：控制文本大小写capitalize每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase 定义无大写字母，仅有小写字母

color：颜色

元素的可见性:

visibility:hidden

表格布局的属性:

border-spacing

列表的属性:

list-style

7.css中的link和@import的区别是什么？

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

8.定位有几种？区别是什么(position定位以及他们的区别）

position：relative 相对定位

它是参照它在页面中原来的位置进行移动的

position：absolute绝对定位

相对于距离他最近的有定位的父元素进行移动的

position：fixed固定定位

它是相对于页面的位置进行移动的

注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

9.cookies、sessionStorage、localStorage的区别是什么？(浏览器)

1、cookie

（1）本身用于客户端和服务端通信

（2）但是它有本地存储的功能，于是就被“借用”

（3）document.cookie = …获取和修改即可

（4）cookie用于存储的缺点

①存储量太小，只有4kb

②所有http请求都带着，会影响获取资源的效率

③api简单，需要封装才能用document.cookie

2、localStorage,sesseionStorage

（1）html5专门为存储而设计，最大容量5M

（2）api简单易用

（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);

（4）ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装

3、sessionStorage用于本地存储一个会话（session）中的数据，

这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

10.常见的浏览器内核有哪些？

**Trident内核：**代表浏览器是ie浏览器，因此Trident内核又称E内核，

此内核只能用于Windows平台，并且不是开源的。

**Gecko内核：**代表浏览器是Firefox浏览器。Gecko内核是开源的，

最大优势是可以跨平台。

**Webkit内核:代表浏览器是Safari(苹果的浏览器)以及低版本的谷歌浏览器，

是开源的项目。

**Presto内核：**代表浏览器是Opera浏览器(中文译为“欧朋浏览器”)，

Presto内核是世界公认最快的渲染速度的引擎，但是在2013年之后，

Open宣布加入谷歌阵营，弃用了该内核。

**Blink内核：**由谷歌和Opera开发，2013年4月发布，现在Chrome内核是Blink。

11.css3新属性

border-radius 圆角

border-shadow 盒子阴影

background-size 背景尺寸

background-clip 背景裁剪

background-origin 背景显示原点

text-shadow 文字阴影

text-overflow 文字隐藏的方式裁剪/省略号

box-sizing

transform 变换转换

animation 动画

transition 过渡动画

媒体查询 @media

12.inline-block布局 vs 浮动布局

a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

b.相同之处：能在某程度上达到一样的效果

　　我们先来看看这两种布局：
图一：display：inline-block

图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：

>>乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）

c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三：

图四：

>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。

13.父子元素之间的margin塌陷问题

方法五：给父元素设置overflow: hidden

方法六：为父元素设置一个before伪元素

14.兄弟元素之间的margin重叠问题

方法一：给子元素2设置成浮动元素

方法二：给子元素2设置display: inline-block

方法三：在兄弟元素之间添加一个空白div

方法四：给其中一个子元素添加一个父元素，将子元素的margin值修改为父元素的pading值

方法五：给第二个子元素添加一个父元素，并通过BFC解决问题

方法六：父元素设置display：flex

15.CSS中display为flex和inline-flex的区别

display: flex 将对象作为弹性伸缩盒显示

没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高度自适应。

display: inline-flex 将对象作为内联块级弹性伸缩盒显示

未给父元素设置宽高，但是父元素的宽高会跟根据子元素而自适应。

16.清除浮动的方法

1.空标签法（隔墙法）

在浮动元素末尾添加一个空的标签例如:

clear:both

优点：通俗易懂，书写方便；

缺点：添加许多无意义的标签，结构化较差

2.父元素添加overflow属性方法

给父级添加

overflow：hidden/auto/scroll

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.after伪元素清除浮动：

:after方式为空元素额外标签法的升级版，好处是不用单独加标签

.clearfix:after{

content:'';

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

*zoom:1;//IE6,7专有

}

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6,7不支持：after，使用zoom：1触发haslaout

4.使用双伪元素清除浮动

.clearfix:after,.clearfix:before{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

.clearfix{

*zoom: 1;

}

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

万能清除法

div{

zoom:1; 兼容ie6 ie7

}

div：after{

content:"";

dispiay:block;

clear:both;

height:0;

visibility:hidden; 将元素隐藏但空间还在

}

17.display和visibility及opacity的区别:

一、空间占据

display: none; 是彻底消失，不在文档流中占位，浏览器也不会解析该元素

visibility:hidden; 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

二、子元素继承

display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

三、事件绑定

display:none 的元素都已经不在页面存在了，因此无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件无法触发；

opacity: 0元素上面绑定的事件是可以触发的

四、过渡动画

transition对于display 肯定是无效的；

transition对于visibility 是无效的；

transition对于opacity 是有效。

五、计时器计数

visibility: hidden不会影响计数器的计数

18.请列举几种隐藏元素的方法

visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在

opacity: 0; CSS3属性,设置0可以使一个元素完全透明，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

position: absolute;设置-一个很大的 left负值定位，使元素定位在可见区域之外

display: none;元素会变得不可见，并且不会再占用元素位置。会改变页面布局。

transform: scale(0);将-个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。

z-index 设置负值

19.CSS 常见的布局方式？

- 流式布局，盒子自上而下排列。

- 弹性布局，flex 弹性盒。

- grid 网格布局。

- 自适应（响应式布局），使用 rem 单位。

20.src 和 href 的区别？

- src 是 source 的缩写，表示将外部资源加载到文档内

- href 用于在当前文档和引用资源之间确认联系（侧重点）

- href 会在页面加载时同时加载，src 会在页面加载完加载。

21. rgba 和 opacity 的区别

opacity属性的值，可以被它的子元素继承,所有内容透明度都会改变

rgba设置的元素，只对这个元素的背景色有改变，并且，这个元素的后代不会继承这个属性

22.都有哪些方式实现回到顶部功能?

1. 使用锚点，页面顶部放置一个锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

//锚点方式

</body>

2. 监听浏览器的 scollTop 事件,当用户滚动到页面底部时，出现回到顶部按钮，点击之后重置浏览器滚动条的高度；

//兼容性获取并监听浏览器滚动条

var osTop=document.documentElement.scrollTop|| document.body.scrollTop;

document.documentElement.scrollTop=document.body.scrollTop = 0;

3.第三方插件，例如 jquery 中:

$("html,body").animate({ srollTop: 0 }, 500);

23.flex 是如何使用的？

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

- flex 是一种 css 盒子的布局方式，通过改变父元素的属性来控制子元素的排列方式，其常用属性有：

容器的属性：

- flex-direction 主轴的方向

- flex-wrap 子元素空间不足时候是否换行

- justify-content 主轴对齐方式

- align-items 交叉轴的对齐方式

- align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

24.flex:1 代表着什么？

- flex：1 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写，一般默认为 flex：1 1 auto（存在剩余空间就放大，空间不足就缩小）；自动填满剩余空间

- flex-grow：元素的放大比例，默认为 1，即使存在剩余空间，也不会放大；

- flex-shrink：元素的缩小比例，默认为 1，即如果空间不足，该元素将缩小;

- flex-basis:项目占据的主轴空间,默认为 auto，即项目原本的大小。

25.Sass 和 Less

Sass和Less都属于CSS预处理器

Less环境较Sass简单,Less基于JavaScript,Less使用较Sass简单

从功能出发，Sass较Less略强大一些有函数,变量和作用域

Less与Sass处理机制不一样,前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点；

26.如何设置 10px 的字体大小

浏览器默认的最小字体为12px

font-size .12rem

font-weight 400

transform scale(0.8)

}

因为我使用的chrome，所以增加私有前缀-webkit-transform: scale( )；

width:120%;

font-size:12px;

/* 利用放大缩小属性 */

-webkit-transform: scale(0.83)

}

27.常见浏览器兼容性问题

1、不同浏览器下的padding和margin不同解决方法：使用通配符(*)将padding和margin设置为0；

2、块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）解决方法：在float标签样式控制中加入display:inline;

3、设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

4、行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）解决方法：在display:block;后面加上display:inline;display:table; #滚动条到顶端的距离（滚动高度） var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; #获取非行内样式兼容 IE:currentStyle 标准：getComputedStyle #阻止事件冒泡的兼容 e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; #获取事件源的兼容 var target = event.target || event.srcElement;

5、图片默认有间距解决方案：使用float 为img 布局；

6、IE9一下浏览器不能使用opacity 解决方案： opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

7、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

8、cursor:hand 显示手型在safari 上不支持解决方案：统一使用 cursor:pointer；

9、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；解决方案：父级元素设置position:relative；

28.css3 新增特性

- 阴影：文字阴影 text-shadow 盒子阴影：box-shadow

- 图片背景：background-size background-origin

- 边框：border-radius border-image：CSS3 边框图片

- 伪类(:link,:visited,:active,:hover,:focus,:before,:after)

* 渐变 background-image: linear-gradient(#e66465, #9198e5);

* 过渡 transition: width 2s, height 2s；

* 动画 animation @keyframes

29.display 的属性值及其作用

none

隐藏元素，不占据页面空间；visibility:hidden 的元素，也是隐藏元素，但是会占据原来的页面空间。

inline

将元素设置为行内元素

block

将元素设置为块元素

inline-block

将元素设置为行内块元素

list-item

将元素设置为列表元素(li)

table

元素作为块级表格来显示

inline-table

元素作为内联表格来显示

flex

将元素设置为弹性布局

30.display:inline-block 什么时候会显示间隙？

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距

解决方案:

将 inline-block 元素写在一行可以解决

给父元素设置 font-size:0,缺点是子元素如果里面有文字，文字会消失不见

给元素设置 float:left,缺点高度塌陷，要清除浮动。

设置父元素 display:table;word-spacing:-1em。

31. transition 和 animation 的区别

Transition 强调过渡; Animation 强调流程与控制。

两者的控制粒度不一样

某种程度上, transition 更加粗一点, 比如过渡的速度进行了封装, 可以控制是匀速改变还是贝塞尔曲线之类的。

animation 提供的 keyframe 方法, 可以让你手动去指定每个阶段的属性; 此外 animation 还封装了循环次数, 动画延迟等功能, 更加自由和强大。

动画状态:

CSS 的 transition 只有两个状态:开始状态和结束状态。

animation 可能是多个状态, 有帧的概念。

动画触发方式:

CSS 的 transition 需要借助别的方式来触发, 比如 CSS 的状态选择器（如:hover）或借助 JavaScript 来触发。

animation 不但可以使用上面的方式触发, 更重要的是可以自动触发。

animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

动画实现的范围:

transition 是有一定限制的, 并不是所有 CSS 的属性都具有过渡效果。

另外相比而言, CSS 的 animation 要比 transition 强大的多, 几乎所有的 css 属性都可以实现动画效果。

这也是为什么使用 animation 制作 Web 动画的场景更多。

动画实现方式

CSS 的 animation 是离不开 @keyframes 的，换句话说，我们需要先使用 @keyframes 来注册一个动画效果，即帧来描述动画效果。当然，只注册也不见得有效果，还是需要使用 animation-name 属性引用 @keyframes 注册好的动画效果。

::before 和 :after 的双冒号和单冒号有什么区别？

冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。

32.伪元素和伪类的区别和作用？

作用不同

伪类是一种状态，可以看看做是选择器。比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child，一个冒号。

伪元素是元素，简单来说，就是用 css 模拟出来了一个盒子。

权重不相同

伪类是 10 （类、属性选择器 [type=submit]）

伪元素是 1 (标签选择器 )

使用场景不同

比如:鼠标经过盒子，盒子里面的样式会有变化，则需要使用伪类

如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

为什么有时候⽤ translate 来改变位置⽽不是定位？

改变元素的 transform 不会触发重排或重绘，只会触发复合。使用改变元素定位的方式可能会触发重排。

而且在修改 transform 来变更元素位置时会更加顺滑，使用修改元素定位比如说 left、right 之类的属性是在一些场景下即使元素脱离了文档流，也会出现卡顿的情况。

33.CSS 优化和提高性能的方法有哪些？

合并 css 文件

减少 css 嵌套

建立公共样式类，把相同样式提取出来作为公共类使用

减少通配符*或者类似[hidden="true"]这类选择器的使用

巧妙运用 css 的继承机制，如果父节点定义了，子节点就无需定义

不用 css 表达式

使用 cssSprite(雪碧图)处理某些图片,比如 Icon 图标

CSS 压缩

34.z-index 属性在什么情况下会失效

父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；

元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；

元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；

35.CSS 中的 transform 有哪些属性

旋转（rotate）

transform: rotate(40deg);

扭曲（skew）

transfrom: skew(30deg,30deg);

缩放（scale）

transform: scale(2,1.5);

平移（translate）

translate: translate(100px, 20px);

矩阵变形（matrix）

transform: matrix(1,0,0,1,50,50);

36.常见的css优化有哪些

1、加载性能

压缩css代码，减少体积；

减少使用@import，推荐使用link；

合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢；

建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

2、选择器的使用

避免使用通配符*或者类似[hidden="true"]这类选择器的使用；

尽量少的使用标签选择器，推荐使用类class选择器；

避免使用标签限定类class选择器和id选择器，不要在id选择器前面进行嵌套，id本来就是唯一的而且权值那么大，嵌套完全是浪费性能。比如，div.main可以简化为.main；

减少css嵌套，最好不要套三层以上；

尽量少的使用后代选择器，避免高开销。

3、渲染方面

慎重使用高性能属性，如浮动float、定位position；

减少页面的重排/回流和重绘；

巧妙运用css的继承属性机制，如果父节点定义了，子节点就无需定义，减少代码量；

cssSprite（css雪碧图），合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。

标准化各种浏览器前缀，带浏览器前缀的在前，标准属性在后。

_未知_开摆

关注

23
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
前端css面试题

前端css面试题
复制链接

扫一扫