148道 CSS 与 JavaScript 基础面试题(3)，BAT面试&高级进阶

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型；

如果将 box-sizing 设为 border-box 则用的是IE盒模型。如果在 ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

2. CSS 选择符有哪些？

• id选择器（#myid）

• 类选择器（.myclassname）

• 标签选择器（div,h1,p）

• 后代选择器（h1 p）

• 相邻后代选择器（子）选择器（ul>li）

• 兄弟选择器（li~a）

• 相邻兄弟选择器（li+a）

• 属性选择器（a[rel=“external”]）

• 伪类选择器（a:hover,li:nth-child）

• 伪元素选择器（::before、::after）

• 通配符选择器（*）

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

相关知识点：

• 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

• 双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

• 想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after ；

• 在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后。

• 如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上。

4. 伪类与伪元素的区别

• css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

• 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。

• 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

5. CSS 中哪些属性可以继承？

有继承性的属性：

• 字体系列属性

font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

• 文本系列属性

text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

• 表格布局属性

caption-side border-collapse empty-cells

• 列表属性

list-style-type、list-style-image、list-style-position、list-style

• 光标属性

cursor

• 元素可见性

visibility

• 还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性

注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性 / 非继承性属性。

6. CSS 优先级算法如何计算？

相关知识点：

CSS的优先级是根据样式声明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：

• 标签内选择符x,0,0,0

• ID选择符0,x,0,0

• class选择符/属性选择符/伪类选择符 0,0,x,0

• 元素和伪元素选择符0,0,0,x

计算方法：

• 每个等级的初始值为0

• 每个等级的叠加为选择器出现的次数相加

• 不可进位，比如0,99,99,99

• 依次表示为：0,0,0,0

• 每个等级计数之间没关联

• 等级判断从左向右，如果某一位数值相同，则判断下一位数值

• 如果两个优先级相同，则最后出现的优先级高，!important也适用

• 通配符选择器的特殊性值为：0,0,0,0

• 继承样式优先级最低，通配符样式优先级高于继承样式

• !important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

计算实例：

#demo a{

color: orange;

}/特殊性值：0,1,0,1/

div#demo a{

color: red;

}/特殊性值：0,1,0,2/

注意：

• 样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。

• 特殊性值越大的声明优先级越高。

• 相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）

• 部分浏览器由于字节溢出问题出现的进位表现不做考虑

7. 关于伪类 LVHA 的解释?

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活

分别对应四种伪类：link、:visited、:hover、:active；

当链接未访问过时：

• 当鼠标滑过 a 链接时，满足 :link 和 :hover 两种状态，要改变a标签的颜色，就必须将 :hover 伪类在 :link 伪类后面声明；

• 当鼠标点击激活a链接时，同时满足 :link、:hover、:active 三种状态，要显示a标签激活时的样式（:active），必须将 :active 声明放到 :link 和 :hover 之后。因此得出LVHA这个顺序。

当链接访问过时，情况基本同上，只不过需要将 :link 换成 :visited。

这个顺序能不能变？可以，但也只有 :link 和 :visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

8. CSS3 新增伪类有那些？

• elem:nth-child(n) 选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。

• elem:nth-last-child(n) 作用同上，不过是从后开始查找。

• elem:last-child 选中最后一个子元素。

• elem:only-child 如果elem是父元素下唯一的子元素，则选中之。

• elem:nth-of-type(n) 选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

• elem:first-of-type 选中父元素下第一个elem类型元素。

• elem:last-of-type 选中父元素下最后一个elem类型元素。

• elem:only-of-type 如果父元素下的子元素只有一个elem类型元素，则选中该元素。

• elem:empty 选中不包含子元素和内容的elem类型元素。

• elem:target 选择当前活动的elem元素。

• :not(elem) 选择非elem元素的每个元素。

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

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

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

9. 如何居中 div？

• 水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

div {

width: 200px;

margin: 0 auto;

}

• 水平居中：利用 text-align:center 实现

.container {

background: rgba(0, 0, 0, 0.5);

text-align: center;

font-size: 0;

}

.box {

display: inline-block;

width: 500px;

height: 400px;

background-color: pink;

}

• 让绝对定位的 div 居中

div {

position: absolute;

width: 300px;

height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: pink; /方便看效果/

}

• 水平垂直居中一

/确定容器的宽高宽500高300的层设置层的外边距/

div{

position: absolute;/绝对定位/

width: 500px;

height: 300px;

top: 50%;

left: 50%;

margin: -150px00-250px;/外边距为自身宽高的一半/

background-color: pink;/方便看效果/

}

• 水平垂直居中二

/未知容器的宽高，利用transform属性/

div {

position: absolute; /相对定位或绝对定位均可/

width: 500px;

height: 300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: pink; /方便看效果/

}

• 水平垂直居中三

/利用flex布局实际使用时应考虑兼容性/

.container {

display: flex;

align-items: center; /垂直居中/

justify-content: center; /水平居中/

}

.containerdiv {

width: 100px;

height: 100px;

background-color: pink; /方便看效果/

}

• 水平垂直居中四

/利用text-align:center和vertical-align:middle属性/

.container {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0, 0, 0, 0.5);

text-align: center;

font-size: 0;

white-space: nowrap;

overflow: auto;

}

.container::after {

content: ‘’;

display: inline-block;

height: 100%;

vertical-align: middle;

}

.box {

display: inline-block;

width: 500px;

height: 400px;

background-color: pink;

white-space: normal;

vertical-align: middle;

}

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

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

• none 元素不显示，并从文档流中移除。

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

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

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

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

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

11. position 的值 relative 和 absolute 定位原点是？

相关知识点：

• absolute

生成绝对定位的元素，相对于值不为static的第一个父元素的padding box进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。

• fixed（老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

• relative

生成相对定位的元素，相对于其元素本身所在正常位置进行定位。

• static

默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。

• inherit

规定从父元素继承position属性的值。

12. CSS3 有哪些新特性？（根据项目回答）

• 新增各种CSS选择器 （:not(.input)：所有class不是“input”的节点）

• 圆角 （border-radius:8px）

• 多列布局 （multi-column layout）

• 阴影和反射 （Shadow\Reflect）

• 文字特效 （text-shadow）

• 文字渲染 （Text-decoration）

• 线性渐变 （gradient）

• 旋转 （transform）

• 缩放，定位，倾斜，动画，多背景

13. 请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？

相关知识点：

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。

以下6个属性设置在容器上：

• flex-direction属性决定主轴的方向（即项目的排列方向）。

• flex-wrap属性定义，如果一条轴线排不下，如何换行。

• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• justify-content属性定义了项目在主轴上的对齐方式。

• align-items属性定义项目在交叉轴上如何对齐。

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

以下6个属性设置在项目上：

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

• flex-grow属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex属性 是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。

• align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。

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

采用的是相邻边框连接处的均分原理。将元素的宽高设为0，只设置 border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

15. 一个满屏品字布局如何设计?

16. CSS 多列等高如何实现？

17. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

18. li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

19. 为什么要初始化 CSS 样式？

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-ZywAth6l-1713017452755)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！