2022年最新前端⾯试题（⼤前端时代来临卷起来吧⼩伙⼦们..持续维护⾛到哪记
到哪）
HTML和Css部分
1、对BFC规范（块级格式化上下⽂）的理解
BFC 块级格式化上下⽂ ⼀块独⽴的区域，有⾃⼰的规则，bfc中的元素与外界的元素互不影响
BFC是⼀块⽤来独⽴的布局环境，保护其中内部元素不受外部影响，也不影响外部。
怎么触发BFC
1. float的值left或right
2. overflow的值不为visible（默认）
3. display的值为inline-block、table-cell、table-caption
4. position的值为absolute（绝对定位）或fixed固定定位
规则：
1、BFC的区域不会与float box重叠。
2、BFC是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。
3、计算BFC的⾼度时，浮动元素也会参与计算。
4、内部的Box会在垂直⽅向上⼀个接⼀个放置。
5、Box垂直⽅向的距离由margin决定，属于同⼀个BFC的两个相邻Box的margin会发⽣重叠。
BEC的应⽤
1、可以⽤来⾃适应布局
利⽤BFC的这个原理可以实现两栏布局，左边定宽，右边⾃适应。不会相互影响，哪怕⾼度不相等。
给左边盒⼦加浮动，右边盒⼦加overflow:hidden；变成BFC，就可以消除外部左边盒⼦因浮动对他的影响
2、可以清除浮动
⼀个⽗元素中的⼦元素，设置浮动时，⽗元素没有设置⾼度，这时⼦元素脱离⽂档流，⽗元素感知不到⼦元素的⾼度，造成⽗元素的塌陷。 这时候给⽗元素添加overflow:hidden / auto，变成BFC就可以解决这种问题。
**3、**解决垂直边距重叠
1.⽗⼦关系的边距重叠
⽗⼦关系，如果⼦元素设置了外边距，在没有把⽗元素变成BFC的情况下，⽗元素也会产⽣外边距。
解决办法: 是给⽗元素添加⼀个 overflow:hidden，这样⽗元素就变为BFC，不会随⼦元素产⽣外边距
2.同级兄弟关系的重叠
同级元素在垂直⽅向上外边距会出现重叠现象，最后外边距的⼤⼩取两者绝对值⼤的那个
可通过添加⼀个空元素或伪类元素，设置overflow:hidden；解决
2、什么是渐进增强优雅降级
渐进增强：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后在针对⾼级浏览器进⾏效果、
交互等改进和追加功能达到更好的⽤户体验。
优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。
3、从浏览器地址栏输⼊url到显⽰页⾯的步骤
· 浏览器根据请求的 URL 交给 DNS 进⾏域名解析，到真实 IP 地址，向服务器发起请求；
· 服务器交给后台处理完成后返回数据，浏览器接收⽂件（HTML、CSS、JS、images等）；
· 浏览器对加载到的资源（HTML、CSS、JS、images等）进⾏语法解析，建⽴相应的内部数据结构（如HTML的DOM）；
· 载⼊解析到的资源⽂件，渲染页⾯，完成。
4、CSS特性：继承性，层叠，优先级
1、继承性：⼦标签会继承⽗标签的某些样式，如⽂本颜⾊和字号。(text- font- color)
2、层叠性：样式冲突，遵循的原则是就近原则。
3、优先级：定义CSS样式时，经常出现两个或更多规则应⽤在同⼀元素上，此时，谁的权重⾼显⽰谁的样式。
（选择器相同，则执⾏层叠性；选择器不同，就会出现优先级的问题。）
!Important > ⾏内式 > id > 类/伪类/属性 > 标签选择器 > 全局
（对应权重：⽆穷⼤∞>1000>100>10>1>0）
5、定位有哪⼏种？分别举例？Z-index熟悉在使⽤的时候注意什么？
static: 默认值 没有定位，元素出现在正常的流中
relative(相对定位):⽣成相对定位的元素，相对于其正常（原先本⾝）位置进⾏定位
absolute（绝对定位):⽣成绝对定位的元素，相对于static定位以外的第⼀个⽗元素进⾏定位
fixed（固定定位）:⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位
sticky 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。
z-index规则
1、值可以是正整数、负整数或0，数值越⼤，盒⼦越靠上；
2、如果属性值相同，则按照书写顺序，后来居上；
3、数字后⾯不能加单位。
4、z-index 只能应⽤于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位⽆效
6、页⾯导⼊时，使⽤link和@import有什么区别
页⾯中使⽤CSS的⽅式主要有3种：⾏内添加定义style属性值，页⾯头部内嵌调⽤和外⾯链接调⽤，其中外⾯引⽤有两种：Link引⼊和@import导⼊，两者都是外部引⽤CSS的⽅式，但是存在⼀定的区别：
1、从属关系: link是标签，@import是css提供的.
2. 加载差异: link： 结构和样式同时加载；⽽@import 先加载结构，后加载样式
3. 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.
4.可操作性: link可以通过js操作dom插⼊link标签改变样式，⽽@import不能
7、简述src和href的区别
src⽤于替换当前元素
href⽤于在当前⽂档和引⽤资源之间确⽴联系.
扩展： src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置 href是Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接
8、上下margin重合的问题
1、相邻块元素垂直外边距的合并
解决⽅案：尽量给只给⼀个盒⼦添加margin值
2、嵌套块元素垂直外边距的合并（塌陷）
解决⽅案：
可以为⽗元素定义上边框。
可以为⽗元素定义上内边距
可以为⽗元素添加overflow:hidden。
9、常见的兼容性问题？
1、不同浏览器margin和padding不同
2、ie6中，⽗级元素浮动以后，内部元素内容撑不开宽度
3、标签嵌套不规范，如p和h1-h6⾥⾯嵌套div
4、ie6⼩于19px，会当成19px处理，也就元素宽⾼⼩于19px的bug
5、图⽚3像素问题
6、IE8下给图⽚添加超链接时，图⽚会有蓝⾊边框
7、⿏标滑过时，不显⽰⼩⼿
10、li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？
1、浏览器的默认⾏为是把inline元素间的空⽩字符（空格换⾏tab）渲染成⼀个空格
2、为li设置左浮动
将li写在同⼀⾏ 中间不要有空格
将ul内font-size:0，但是单独li设置⽂字⼤⼩
将ul的letter-spacing:-8px，但是单独li设置字符间距normal
11、Html5新增的语义化标签。
头部标签：
导航标签：
内容区块表签：
页脚标签：
侧边栏：
页⾯内独⽴的内容区域：
12、flex弹性盒布局与传统盒模型布局的区别和优点？以及Flex布局哪些属性失效？
区别：css布局左边固定右边自适应
1. 普通盒模型中的⼦元素分配其⽗元素的空间，⽽弹性盒模型中的⼦元素分配其⽗元素的可⽤空间。
2. 普通盒模型主要针对块级元素和⾏级元素的布局，⽽弹性盒是建⽴在弹性流上，也就是元素可以随着可视区域的变化⽽呈现流式布
局。
弹性盒的优点：
能为盒模型提供最⼤的灵活性，即使是不定宽⾼的元素依然好⽤，可以简便、完整、响应式地实现各种页⾯布局。
传统布局的特点：兼容性好、布局繁琐、局限性，不能在移动端很好的布局
设为 Flex 布局以后，⼦元素的float、clear和vertical-align属性将失效
13、什么是rem、px、em区别。
rem是⼀个相对单位，rem的是相对于html元素的字体⼤⼩，没有继承性
em是⼀个相对单位，是相对于⽗元素字体⼤⼩有继承性
px是⼀个“绝对单位”，就是css中定义的像素，利⽤px设置字体⼤⼩及元素的宽⾼等，⽐较稳定和精确。
14、什么是视⼝
在pc端中，视⼝指的是在pc端中浏览器的可视区域；
在移动端中，它涉及3个视⼝：1是布局视⼝，2是视觉视⼝，3是理想视⼝
移动端指的视⼝就是布局视⼝
15、什么是媒体查询。
媒体查询是CSS3新语法。
使⽤媒体查询，可以针对不同的媒体类型定义不同的样式
媒体查询可以针对不同的屏幕尺⼨设置不同的样式
当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯
⽬前针对很多苹果⼿机、Android⼿机，平板等设备都⽤得到多媒体查询
16、响应式布局有哪些实现⽅式？什么是响应式设计？响应式设计的基本原理是什么？
1.百分⽐布局，但是⽆法对字体，边框等⽐例缩放
2.弹性盒⼦布局 display:flex
<布局，1rem=html的font-size值的⼤⼩
4. css3媒体查询 @media screen and(max-width: 750px){}
5.vw+vh
6.使⽤⼀些框架（bootstrap，vant）
什么是响应式设计：响应式⽹站设计是⼀个⽹站能够兼容多个终端，智能地根据不同设备环境进⾏相对应的布局
响应式设计的基本原理：基本原理是通过媒体查询检测不同的设备屏幕尺⼨设置不同的css样式 页⾯头部必须有meta声明的17、什么叫CSS盒模型？有哪⼏种盒模型？有什么区别？box-sizing属性有什么⽤？
1、什么是CSS盒模型？
在我们的HTML页⾯中，每⼀个元素都可以被看成⼀个盒⼦，⽽这个盒⼦由：内容(content)、内边距(padding)、 边框(border)、外边距(margin) 四部分组成.
2、有哪⼏种盒模型？
对于盒模型，分为标准盒模型和怪异盒模型⼀下两种
标准(W3C)盒模型的范围包括margin、border、padding、content，并且宽⾼只包含content，不包含其他部分
怪异(IE)盒模型的范围包括margin、border、padding、content，和标准盒模型不同的是，怪异盒模型的宽⾼包含了padding和border
box-sizing作⽤
⽤来控制元素的盒⼦模型的解析模式，默认为content-box context-box标准盒模型 border-box怪异盒模型
18、 Doctype作⽤标准模式与兼容模式(兼容模式)如何区分？
⽂档声明；⽤于告知浏览器该以何种模式来渲染⽂档.
严格模式和混杂模式的区别：
严格模式：页⾯排版及 JS 解析是以该浏览器⽀持的最⾼标准来执⾏
混杂模式：不严格按照标准执⾏，主要⽤来兼容旧的浏览器，向后兼容
19、为什么会出现浮动？浮动会带来哪些问题？清除浮动的⽅式有哪些？哪种最好？
1、为什么会出现浮动：
由于浮动元素脱离了⽂档流，所以⽂档流的块框表现得就像浮动框不存在⼀样。浮动元素会漂浮在⽂档流的块框上.
2、浮动带来的问题：
⽗元素的⾼度⽆法被撑开，影响与⽗元素同级的元素
若⾮第⼀个元素浮动，则该元素之前的元素也需要浮动，否则会影响页⾯显⽰的结构.
与浮动元素同级的⾮浮动元素（内联元素）会跟随其后
3、清除浮动的⽅式:
⽗级div定义height
结尾处加空div标签clear：both
⽗级div定义伪类：after、before
⽗级div定义overflow：hidden
⽗级div定义overflow：auto。
⽗级div也浮动，需要定义宽度。
⽗级div定义display：table。
结尾处加br标签clear:both
⽐较好的是第3种，⽆需多余标签，⽅便维护，通过伪类就可以解决
20、元素的alt和title有什么异同
不同点: 元素的alt是表⽰图⽚加载失败显⽰的⽂本内容，⽽title是表⽰⿏标悬停图⽚时显⽰的⽂本内容.
相同点: 在alt和title同时设置的时候，alt作为图⽚的替代⽂字出现，title是图⽚的解释⽂字
21、Div+CSS较table相⽐有什么样的优点？
正常场景⼀般都适⽤div+CSS布局，Div+CSS优点:
开发中结构与样式分离，便于后期项⽬的维护和迭代
代码语义性好
更符合HTML标准规范
SEO友好
table缺点:
太深的嵌套，⽐如table>tr>td>h3，会导致搜索引擎读取困难，⽽且，最直接的损失就是⼤⼤增加了冗余代码量灵活性差，⽐如要将tr设置border等属性，是不⾏的，得通过td
代码臃肿，当在table中套⽤table的时候，阅读代码会显得异常混乱
混乱的colspan与rowspan，⽤来布局时，频繁使⽤他们会造成整个⽂档顺序混乱，不够语义化。
22、 ::before和:before有何异同？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。