2025年html5css3面试题及答案,前端面试题及答案-CSS篇 .pdfVIP

以铜为镜，可以正衣冠；以古为镜，可以知兴替；以人为镜，可以明得失。——《旧唐书·魏征列传》

html5css3⾯试题及答案,前端⾯试题及答案-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的盒⼦模型

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

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

区别对⽐：(注意蓝⾊背景区域⼤⼩)

标准盒模型元素宽度width=content=100px，⾼度计算相同

IE模型元素宽度width=content+2xpadding+2xborder=70px+2x10px+2x5px=100px。

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

选择符

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.相邻选择器(h1+p)

5.⼦选择器(ulli)

6.后代选择器(lia)

7.通配符选择器(*)

8.属性选择器(a[rel=external])

人人好公，则天下太平；人人营私，则天下大乱。——刘鹗

9.伪类选择器(a:hover,li:nth-child)

继承

1.可继承的样式：font-sizefont-familycolor,text-indent;

2.不可继承的样式：borderpaddingmarginwidthheight;

新增伪类

p:first-of-type选择属于其⽗元素的⾸个

元素。

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

元素。

p:only-of-type选择属于其⽗元素唯⼀的

元素。

p:only-child选择属于其⽗元素的唯⼀⼦元素的每个

元素。

p:nth-child(2)选择属于其⽗元素的第⼆个⼦元素的每个

元素。

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

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

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

!importantidclasstag

important⽐内联优先级⾼,但内联⽐id要⾼

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

引起的问题：

(1)⽗元素的⾼度⽆法被撑开，影响与⽗元素同级的元素

(2)与浮动元素同级的⾮浮动元素会跟随其后

(3)若⾮第⼀个元素浮动，则该元素之前的元素也需要浮动，否则会影响页⾯显⽰的结构

解决⽅法：

1、利⽤clear清除浮动

.son{

clear:left|right|both|auto

}

2、在⽗元素后⾯额外添加标签

...

3、⽗元素上使⽤after伪类

#parent:after{