一些前端面试题CSS 选择器的优先级是如何计算的?CSS 如何清除浮动?什么是 JSON?它与 XML 有何不同?解释一
解释一下什么是 HTML?
1. HTML (超文本标记语言)
- 定义:HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。
- 作用:HTML 被用来定义网页的结构和内容,是前端开发的基础。
- 地位:HTML 与 CSS 和 JavaScript 组成了现代 Web 开发的“三剑客”。
- 形象比喻:如果把一个网页比作一个人的话,HTML 就像是这个人的骨骼和肌肉,提供了基本的结构;CSS 则像是衣服和化妆,负责外观和样式;而 JavaScript 就像是大脑和神经系统,赋予网页动态行为和交互能力。
HTML 的基本结构
- 文件扩展名:HTML 文件通常使用 .html 作为扩展名。
- 根标签:所有 HTML 文档都必须包含一个根标签
<html>
,所有的其他 HTML 标签都必须位于此标签内。 - 标签类型:如
<div>
,它通常独占一行,可以包含其他块级元素或行内元素,如<span>
,它不会独占一行,通常与其他行内元素并排显示。 - 语义化标签:
<header>
页面头部,例如logo、搜索栏等
<nav>
导航模块,例如菜单栏
<main>
主要内容区域
<article>
独立的内容区块
<section>
独立且与主体相关的,例如页眉、章节
<aside>
与主要内容相关的辅助信息,例如侧边栏、注释
<footer>某个页面或者区域的底部,例如版权信息、联系方式</footer>
</aside>
</section>
</article>
</main>
</nav>
</header>
这些标签不仅提高了网页的可读性和可访问性,还帮助搜索引擎更好地理解页面结构和内容。
HTML 在框架中的使用
- Vue.js:Vue 使用
<template>
标签来定义模板结构,通常在单文件组件 (SFC) 中使用。 - React.js:
- React 使用 JSX(一种 JavaScript 的语法扩展)来定义组件结构,但在实际编译后的代码中会转换为标准的 HTML。
- 在 React 中,
<></>
代表的是一个 Fragment,也称为 片段。它是一种特殊的 React 元素,用于包裹一组子元素,而不会在 DOM 中生成额外的节点。这使得你可以在返回多个元素时不引入额外的 DOM 结构,从而保持组件的输出干净且高效。
CSS 有哪些盒模型?它们之间的区别是什么?
css 的盒子模型分为标准盒子模型和怪异盒子模型
-
标准盒子模型:
- 这是 W3C 定义的盒模型,也是默认的盒模型。
- 标准盒模型是现代浏览器默认采用的模型。
box-sizing:content-box;
使用标准盒模型。- 宽度只包括内容区。例如:向外计算,宽度 100px + 内边距 10px = 当前宽度(120px)
-
怪异盒子模型(IE 盒子模型):
- 这个盒模型最初是由 Internet Explorer 5 实现的,在一些特定情况下使用。
- IE 盒模型主要用于处理一些旧版浏览器的兼容性问题,例如在某些 IE 版本中的非严格模式。
box-sizing: border-box;
使用 IE 盒模型。- 宽度包括内容区、边框、内边距。例如:向内计算,宽度 100px + 内边距 10px = 当前宽度(100px)
JavaScript 中 var, let, const 的区别是什么?
-
var 具有函数作用域,可以被提升,可以在同一作用域声明多次
- var 声明的函数作用域,在函数内部声明的只能在函数内部访问;函数外部声明的变量是全局作用域
- var 的变量会提升到作用域的顶部,意味着可以在声明之前引用
- 可以在同一作用域多次声明相同的 var,但是这会导致 var 的值会更新
- 在全局作用域声明 var 变量会变成全局对象(window)的属性
-
let 具有块作用域,意味着只在当前声明的代码块中有效,例如在
{...}
- let 声明的变量不会提升,如果在声明之前访问会抛出一个
ReferenceError
- 不能在同一作用域声明多个相同的 let,这样做会导致
SyntaxError
- let 的变量可以重新被赋值
- let 声明的变量不会提升,如果在声明之前访问会抛出一个
-
const 常量,声明后不可修改,但是声明的值为对象和数组时,其中的值可修改
具有块作用域,不会被提升,不能在同一作用域多次声明,不能被重新赋值
- 不能在同一作用域内多次使用 const 重新声明同一个变量。
解释一下什么是 BOM 和 DOM?
-
BOM(浏览器对象模型)
BOM 并不是一个具体的标准,而是浏览器厂商方便开发者更好的操作浏览器窗口提供的 API。BOM 允许 javascript 访问浏览器的各种特性,可以进行一些基本的浏览器操作,例如打开新的窗口,修改浏览器状态栏等等
BOM 的主要组成部分是:
- window:浏览器的窗口,是 BOM 的核心,几乎所有的 BOM 都是 window 的属性。
- location:提供当前页面 URL 的访问和控制,例如读取 URL 中携带的参数
- navigator:提供浏览器的信息,例如平台、版本号
- history:运行脚本操作浏览器的历史记录,例如回退到上一页、下一页
- screen:提供用户的的屏幕信息、分辨率
-
DOM(文档对象模型)
DOM 是一个跨平台(不同操作系统、不同设备、不同浏览器)和语言中立(不同编程语言,例如 Python、PHP)的接口,它将 HTML 和 XML 文档表现为树结构,使程序和脚本能更轻松的更改文档的结构、样式和内容。DOM 规范由 W3C 维护的一个标准。
DOM 的主要概念
-
node(节点):DOM 中的基本构建单元,包括元素节点、属性节点、文本节点等。
-
element(元素):HTML 或 XML 文档中的标签,每个标签都是一个元素节点。
-
attribute(属性):附加在元素上的键值对,用于指定元素的特性。
-
document(文档):整个 HTML 或 XML 文档的顶级节点。
DOM 的主要功能是对元素的选删改查。
- 选取:使用 getElementById、getElementsByClassName 等方法获取节点。
- 修改:改变元素的内容、属性、样式
- 添加:向文档中添加元素
- 删除:将文档中现有的元素移除
-
-
BOM 和 DOM 的区别在哪里?
BOM 关注的是浏览器: 它提供了一种与浏览器交互的方式,如窗口弹出、关闭等。DOM 关注的是文档: 它关注文档本身,即 HTML 或 XML 文档的结构和内容,允许开发者通过 JavaScript 操作这些文档。
什么是 JSON?它与 XML 有何不同?
- JSON 是一种轻量级的数据交换格式,易于阅读和编写,也易于机器解析和生成。
- JSON 和 XML 的不同有哪些?
- JSON 是键值对的形式表示数据,XML 是标签形式表示数据的。
- JSON 不支持添加注释,XML 支持。
- JSON 轻量级、解析深度块、易读性强,适合现代 Web 开发(例如在前端开发中有着广泛的应用,从数据交换、配置管理到数据存储,都是非常有用的工具)。XML 语法复杂、支持注释,适用于一些特定领域及场景(企业级应用和传统系统、技术文档和出版物、需要层次结构和注释的配置)。
CSS 如何清除浮动?
-
使用 clear 属性,在浮动元素之后添加一个清除浮动的元素。
这种方法通过在浮动元素之后添加一个空的 div 或其他元素,并设置其 clear 属性为 both,来确保浮动元素不会影响其后的元素布局。
<style> .box { width: 400px; height: 400px; background-color: #efe388; } .float1, .float2 { width: 100px; height: 100px; background-color: #ffadad; float: left; /* 添加浮动 */ } .float1 { background-color: #8beecf; margin: 20px 0 0 0; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="float1"></div> <div class="float2"></div> <div class="clear"></div> </div> </body>
为什么有效?
- 浮动元素:.float1 和 .float2 由于设置了 float: left;,会脱离正常的文档流,导致 .box 容器的高度塌陷。
- 清除浮动:.clear 元素通过设置 clear: both;,确保其之前的浮动元素不会影响其后的元素布局。这样,.box 容器的高度会包含浮动元素的高度,避免了高度塌陷的问题。
-
使用 overflow 属性,将包含浮动元素的容器的 overflow 属性设置为 auto 或 hidden。
优点:简单易用(直接设置)、兼容性好(ie8 以上都支持)、自动调整高度
缺点:可能引起滚动条(auto 内容超出容器的高度时)、隐藏溢出内容(hidden 超出容器会裁剪)、可能影响其他样式
-
使用 ::after 伪元素,通过在包含浮动元素的容器上使用 ::after 伪元素,并设置 content 属性为空字符串,可以清除浮动。(推荐)
最好的解决方法
<style>
.box {
width: 400px;
height: 400px;
background-color: #efe388;
}
/* 使用 .clearfix 类来清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* 真正清除浮动的伪元素 */
.clearfix::after {
clear: both;
}
/* 额外的处理,防止 IE6/7 的兼容性问题 */
.clearfix {
zoom: 1; /* 仅在 IE6/7 下生效 */
}
.float1,
.float2 {
width: 100px;
height: 100px;
background-color: #ffadad;
}
.float1 {
background-color: #8beecf;
margin: 50px 0 0 0;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="float1"></div>
<div class="float2"></div>
</div>
</body>
.clearfix::before
和.clearfix::after
: 这两个伪元素的作用是创建一个匿名表格单元格(display: table;),这有助于解决某些情况下可能出现的外边距塌陷问题。content: '';
用于生成一个空的内容,这是伪元素存在的必要条件。display: table;
使得这些伪元素像表格单元格一样行为,这有助于它们在布局中正确地占据空间,主要是为了兼容性和保险起见。.clearfix::after:{clear: both;}
clear: both:这是清除浮动的关键。它确保了 .clearfix 容器内的所有浮动元素都被正确地包含在其父容器中,防止父容器的高度塌陷。换句话说,clear: both 告诉浏览器:“从这个点开始,不要再让任何元素绕过前面的浮动元素”。
-
使用 Flexbox 布局可以避免使用浮动,从而自然地解决浮动带来的问题
简单粗暴,直接给父元素添加
display: flex;
即可
CSS 选择器的优先级是如何计算的?
优先级由四个部分组成,按照从高到低的顺序分别是:
- 内联样式 :直接写在 HTML 元素的 style 属性中的样式。
- ID 选择器 :每个 ID 选择器增加一个计数。
- 类选择器、属性选择器和伪类 :每个类选择器、属性选择器和伪类增加一个计数。
- 标签选择器和伪元素 :每个标签选择器和伪元素增加一个计数。
!important 可以覆盖任何优先级。
转载自:https://juejin.cn/post/7426886728059928611