2023最新前端面试题3（持续更新）

46、HTML语义化

HTML 语义化就是让页面内容结构化，它有如下优点
1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于 SEO，搜索引警根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页。
4、有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐。

如：

<header>代表头部
<nav>代表超链接区域
<main>定义文档主要内容
<article>可以表示文章、博客等内容
<aside>通常表示侧边栏或嵌入内容
<footer>代表尾部

47、HTML5 新标签

有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等

CSS

48、盒子模型

盒模型分为标准盒模型和怪异盒模型(IE 模型)

box-sizing: content-box //标准盒模型
box-sizing: border-box  //怪异盒模型

标准盒模型: 元素的宽度等于 style 里的 width+margin +border+padding 宽度

如下代码，整个宽高还是 120px

div{box-sizing: content-box;margin: 10px;width: 100px;height: 100px;padding: 10px;
}

怪异盒模型: 元素宽度等于 style 里的 width 宽度

如下代码，整个宽高还是 100px

div{box-sizing: border-box;margin: 10px;width: 100px;height: 100px;padding: 10px;
}

注意: 如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing 是什么，最好在引用 reset.css 的时候，就对 border-sizing 进行统一设置，方便管理。

49、rem 与em 的区别

rem 是根据根的 font-size 变化，而 em 是根据父级的 font-size 变化

rem: 相对于根元素 html的 font-size，假如 html为 font-size: 12px，那么，在其当中的 div 设置为 font-size: 2rem,就是当中的 div 为 24px

em:相对于父元毒计算，假如某个 p 元素为 font-size:12px,在它内部有个 spanem :标签，设置 font-size: 2em,那么，这时候的 span 字体大小为: 12*2=24px

50、CSS 选择器

50.1、css 常用选择器

通配符: *
ID 选择器: #ID
类选择器: .class
元素选择器: p、a等
后代选择器: p span、div a 等
伪类选择器: a:hover 等
属性选择器: input[type="text"] 等

50.2、css 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 ->* -> 继承 -> 默认

51、CSS 新特性

transition: 过渡
transform: 旋转、缩放、移动或者倾斜
animation:动画
gradient: 渐变
shadow: 阴影
border-radius: 圆角

52、行内元素和块级元素

行内元素 (display: inline)：
宽度和高度是由内容决定，与其他元素共占一行的元素，我们将其叫行内元素，例如: <span> 、 <i> 、<a>等
块级元素 (display: block)：
默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素，例如: <p> 、<div> 、 <ul>等

在平时，我们经常使用 CSS 的 display: inline-block，使它们拥有更多的状态

53、绝对定位和相对定位的区别

position: absolute
绝对定位:是相对于元素最近的已定位的祖先元素
position: relative
相对定位: 相对定位是相对于元素在文档中的初始位置

Flex布局

54、BFC

54.1、什么是 BFC?

BFC 格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响

54.2、如何产生 BFC?

display: inline-block
position: absolute/fixed

54.3、BFC 作用

BFC 最大的一个作用就是: 在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响

解决上外边距重叠;重叠的两个 box 都开启 bfc
解决浮动引起高度塌陷;容器盒子开启 bfc
解决文字环绕图片;左边图片 div,右边文字容器 p,将 p 容器开启 bfc

55、水平垂直居中

Flex 布局

display:flex //设置 Flex 模式
flex-direction:column //决定元素是横排还是竖着排
flex-wrap:wrap//决定元素换行格式
justify-content:space-between //同一排下对齐方式，空格如何隔开各个元素
align-items:center//同一排下元素如何对齐
align-content:space-between//多行对齐方式

水平居中

行内元素: display: inline-block;
块级元素: margin: 0 auto;
Flex: display: flex; justify-content: center

垂直居中

行高 = 元素高: line-height: height
flex: display: flex; align-item: center

56、less,sass,styus 三者的区别

变量

Sass 声明变量必须是[S] 开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号: 分隔开。

Less 声明变量用 [@] 开头，其余等同 Sass。

Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有[等号]。

作用域

Sass :三者最差，不存在全局变量的概念。

Less: 最近的一次更新的变量有效，并且会作用于全部的引用!

Stylus: Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效;

嵌套

三种 CSS 预编译器的[选择器嵌套] 在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同

继承

Sass和 Stylus 的继承非常像,能把一个选择器的所有样式继承到另一个选择器上。使用[@extend] 开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass两者如出一辙。 Less 则又[独树一帜] 地用伪类来描述继承关系。

导入@Import

Sass 中只能在使用 url() 表达式引入时进行变量插值

$device: mobile;
@import url(styles.#($device).css);

Less 中可以在字符串中进行插值

@device: mobile;
@import "styles. @ ldevice).css";

Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现

device = "mobile";
@import "styles." + device + ".css

总结

Sass 和 Less 语法严谨、Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。

Sass 和 Compass、Stylus 和 Nib 都是好基友

Sass 和 Stylus 都具有类语言的逻辑方式处理: 条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus

Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用 (个人愚见)

57、link 与@import 区别与选择

<style type="text/css">@import url(CSS 文件路径地址);
</style>
<link href="CSSurl 路径" rel="stylesheet" type="text/css"/

link 功能较多,可以定义 RSS,定义 Rel 等作用,而@import 只能用于加载 css;

当解析到 link 时，页面会同步加载所引的 CSS，而@import 所引用的 CSS 会等到页面加载完才被加载;
@import 需要 IE5 以上才能使用;
link 可以使用 js 动态引入，@import 不行。

58、多行元素的文本省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient: vertical

2023最新前端面试题3（持续更新）相关推荐

2022年最新前端面试题，持续更新
[js面试题] 1.js数据类型基本数据类型 Number.String.Boolean.Null.Undefined.Symbol.bigInt 引用数据类型 object.Array.Date. ...
2023高频前端面试题（持续更新含答案）
1,es6有哪些新特性? ES6是2015年推出的一个新的版本.这个版本相对于ES5的语法做了很多的优化 let和const具有块级作用域,不存在变量提升的问题.新增了箭头函数,简化了定义函数的写法, ...
web前端面试题（持续更新）
此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
一阶段面试题: CSS浮动怎么理解的浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,也就是脱离文档流,所以文档的普通流中的块框表现得就像 ...
2022最全前端面试题（持续更新）
css部分如何水平垂直居中一个盒子? 已知高度可以使用 line-height 等于高度实现垂直居中:使用 text-align:center实现水平居中 display:flex; align- ...
前端面试题（持续更新中）
全家桶项目源码:Vue全家桶+SSR+Koa2全栈开发美团网[完整版] 链接:https://pan.baidu.com/s/1cwPDVkj_I5z568mYIHni4A 提取码:24g2 2020 ...
Web前端面试题汇总(持续更新...)
H5 的新特性有哪些?C3 的新特性有哪些? H5 新特性拖拽释放(Drap and drop) API ondrop 自定义属性 data-id 语义化更好的内容标签(header,nav,foo ...
前端面试题大全持续更新中……
目录 1.nextTick知道嘛,实现原理是什么? 2.检测数据类型的方法 3.vue切换路由不重新渲染_Vue路由切换时页面内容没有重新加载 4.JavaScript开发中的23种设计模式详解 5. ...
前端面试题(HTML) ----- 持续更新
1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 ,在ps以jpeg格式存储时,提供11级压缩级别 JPG(或是JPEG): 优点: 占内存小 ...

2023最新前端面试题3（持续更新）

2023最新前端面试题3（持续更新）相关推荐

最新文章

热门文章