HTML&css面试题HTML 一、说说对 html 语义化的理解？依据内容本身的性质和结构，恰当地选用最能反映其意义

持续更新中

HTML

一、说说对 html 语义化的理解？

依据内容本身的性质和结构，恰当地选用最能反映其意义的HTML标签及属性。其目标在于使HTML文档不仅能够被浏览器解析成可视化的网页，更重要的是，使得人和搜索引擎都能更有效地处理和理解页面内容。

二、src和href的理解？

src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。src 用于嵌入资源作为当前元素内容的一部分，通常会导致阻塞渲染的加载行为；而 href 主要用于创建文档与外部资源之间的链接或引用关系，通常是非阻塞的，并且不会直接改变元素自身的呈现内容。

三、什么是严格模式与混杂模式？

严格模式：是以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

四、iframe的作用以及优缺点？

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。

优点：

可以用来处理加载缓慢的内容，比如：广告

缺点：

iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面，不易管理
浏览器的后退按钮没有作用
无法被一些搜索引擎识别

CSS

一、CSS选择器与优先级？

CSS选择器：

通配选择器 (*)：匹配文档中的所有元素。优先级最低。
标签选择器：直接使用HTML元素名称（如 div, p, h1 等）来选择相应的元素。
类选择器：以点号 (.) 开头，后跟类名（如 .main, .highlight）。用于选择具有指定类属性的元素。
属性选择器：根据元素的属性及属性值来选择元素，如 [type="text"] 选择所有 type 属性为 "text" 的元素。
ID选择器：以井号 (#) 开头，后跟ID名（如 #header, #content）。用于选择具有指定ID属性的元素。
伪类：用于根据元素状态（如 :hover, :focus）或结构位置（如 :first-child, :nth-of-type()）选择元素。
伪元素：用于选择元素的特定部分或创建虚拟元素，如 ::before, ::after, ::first-letter。
内联样式：通过HTML元素的 style 属性直接定义在元素上的样式。

优先级：

内联样式 (style 属性定义的样式)：最高优先级。
ID选择器 (#id)：基于元素ID的独特性，具有很高的优先级。
类选择器、属性选择器和伪类 (.class, [attr], :pseudo-class)：中等优先级。
标签选择器和伪元素 (element, ::pseudo-element)：较低优先级。
通配选择器 (*) 和继承：优先级最低。

二、隐藏元素的方法？

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

三、link和@import的区别？

两者都是外部引用CSS的方式，它们的区别如下：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要HTML文档完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

四、transition和animation的区别？

transition是过渡属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

五、display:none与visibility:hidden的区别？

空间占用：
- display:none: 元素不仅视觉上不可见，而且在页面布局中不占用任何空间。这意味着该元素就像是完全从DOM中移除一样，不会影响周围元素的位置和布局。
- visibility:hidden: 元素视觉上不可见，但在页面布局中仍然保留其原有空间。周围的元素不会因为这个元素隐藏而重新排列，就像元素在那里，只是透明了一样。
渲染过程：
- display:none: 不会参与页面的渲染过程，也就是说在生成渲染树（Render Tree）时，该元素不会被包含进去。这导致不会进行元素的绘制和布局计算，从而节省了渲染性能。
- visibility:hidden: 仍然参与渲染过程，会被加入到渲染树中，进行布局计算，但它在绘制阶段被标记为不可见。因此，虽然内容不可见，但浏览器仍需计算其位置和大小。
对事件的影响：
- display:none: 隐藏的元素不会接收到任何用户交互事件，如鼠标悬停或点击。
- visibility:hidden: 元素虽然不可见，但仍能接收用户交互事件，因为它在布局中仍然存在。

六、伪元素和伪类的区别和作用？

伪类：

作用：伪类用于选择元素基于用户行为或特定状态的样式，例如，:hover 用于当鼠标悬停在元素上时改变样式，:active 用于激活（如点击）状态，:visited 用于访问过的链接等。它们描述的是元素的动态状态，而非实际的DOM结构。
特点：
- 可以应用于任何元素。
- 可以同时使用多个伪类于同一元素上。
- 它们代表元素生命周期中的某个特定状态。

伪元素：

作用：伪元素用于创建或修饰元素的某些部分，这些部分在文档树中并不存在，如为元素添加装饰性的前后内容（如首行、首字、前后插入内容等）。常见的伪元素有 ::before, ::after, ::first-line, ::first-letter 等。
特点：
- 在页面中并不真实存在，是通过CSS生成的。
- 每个元素最多只能同时使用一个指定类型的伪元素（如一个::before和一个::after）。
- 通过 content 属性来定义伪元素的内容。
- 它们用于样式化元素的特定部分或添加额外的装饰内容。

七、对盒模型的理解？

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型。

标准盒模型（W3C盒模型）：在标准盒模型中，width和height仅指内容区域的尺寸。边框和内边距是在内容区域之外额外增加的，因此，一个元素的总宽度或高度等于内容宽度/高度加上左右内边距、上下内边距、左右边框宽度和上下边框宽度。
IE盒模型（怪异盒模型）：使用特定CSS声明（如box-sizing: border-box;）的情况下，width和height包括内容区域、内边距和边框的宽度。这意味着设置的宽度或高度是元素的总宽度，内边距和边框不会进一步增加元素的总尺寸。

八、CSS 优化和提高性能的方法有哪些？

合并CSS文件：将多个CSS文件合并成一个文件，减少HTTP请求的数量，从而加快页面加载速度。
压缩CSS代码：使用自动化工具（如CSS Nano、UglifyCSS）去除空格、注释、缩短选择器和属性名，减小CSS文件的大小。
使用外部CSS文件：相比于内联样式，外部CSS文件可以被浏览器缓存，减少后续页面加载的资源请求。
避免使用@import：@import会导致额外的HTTP请求，并且会阻塞页面渲染直到CSS文件加载完毕。使用标签代替。
减少选择器的复杂度：简化CSS选择器，避免过深的嵌套和不必要的组合，因为复杂的CSS选择器会影响渲染性能。
利用继承和层叠：合理利用CSS的继承特性，减少重复定义样式。利用层叠规则，避免过度使用ID选择器和!important声明。
使用CSS预处理器（如Sass、Less）：它们可以帮助组织和维护CSS代码，同时通过编译过程自动优化代码。
媒体查询优化：将媒体查询放在样式表的底部，或拆分成独立的文件，确保非匹配的查询不会阻塞渲染。
利用CSS变量（Custom Properties）：减少重复值，便于维护和修改，同时现代浏览器对CSS变量的解析效率较高。
懒加载CSS：对于非首屏内容，可以延迟加载对应的CSS文件，优先加载关键CSS，提升首屏加载速度。
避免使用CSS表达式：CSS表达式在页面渲染和每次重绘时都会计算，可能导致性能问题。
监控CSS性能：使用开发者工具中的性能分析功能，定期检查CSS对页面渲染性能的影响，及时发现并优化瓶颈。

九、z-index属性在什么情况下会失效？

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

十、水平垂直居中的实现方式？

使用flexbox（推荐）

Flexbox是现代布局中最简单且强大的方式之一，适用于单一元素或容器内的多个元素居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 示例高度，可根据需要调整 */
}

绝对定位 + 变换（Transform）

适用于已知宽高的固定元素。

.container {
  position: relative;
  height: 100vh; /* 示例高度，可根据需要调整 */
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 calc() 和 translateY()

适用于动态高度的容器。

.container {
  position: relative;
  height: 100vh; /* 示例高度，可根据需要调整 */
}

.centered-element {
  position: absolute;
  top: calc(50% - /* 元素高度的一半 */);
  left: 50%;
  transform: translateX(-50%);
}

十一、对BFC的理解，如何创建BFC？

块级格式化上下文定义了一个独立的渲染区域，其中的元素布局不受外界影响，同时也不会影响到外面的元素。

BFC内部的元素会按照一定规则进行排列，具体表现为：

边距折叠：在BFC内部，相邻的块级元素垂直外边距不会折叠，而在BFC外部，这种情况下的外边距可能会合并。
包含浮动：BFC可以包含其内部浮动元素，使得浮动元素不会溢出到外部，而是撑开BFC的高度。
布局隔离：BFC内部元素的布局不会影响到外部元素，反之亦然，提供了某种程度的布局隔离。
块级元素排版：BFC中的块级元素从顶部开始垂直排列，且块级盒模型的margin不会与浮动元素重叠。

要创建一个新的BFC，可以通过以下任意一种方式：

浮动（float）：设置元素的 float 属性为 left 或 right。
绝对定位（position）：将元素的 position 属性设置为 absolute 或 fixed。
overflow：给元素设置 overflow 属性为 auto、hidden 或 scroll（注意：visible 不会触发BFC）。
display：使用 display: flow-root、display: flex、display: grid 或 display: inline-block （当元素不是浮动元素也不是绝对定位元素时）。

创建BFC常常用于解决布局问题，如清除浮动、防止外边距折叠等。

十二、sass和less是什么，有什么区别？

sass有两种语法版本：

原始的sass语法，使用缩进来代替大括号，并且不需要分号，这种语法类似于Python的风格；
scss（sassy css），它与css完全兼容，使用大括号{}和分号；，类似于传统css的结构；

less的语法与css相似，使用大括号和分号，但增加了预处理器的功能。

以下是sass和less的一些主要区别：

语法:
- Sass 的原始语法使用缩进而不是大括号来表示嵌套，SCSS 则使用大括号。
- Less 使用大括号来表示嵌套规则。
变量:
- Sass 使用 $ 符号定义变量。
- Less 使用 @ 符号定义变量。
混合（Mixins）:
- Sass 使用 @mixin 关键字定义混合，调用时使用 @include。
- Less 中使用 .mixin() 函数式的语法调用。
条件语句和循环:
- Sass 支持 if/else 条件语句和 for/each 循环。
- Less 不直接支持条件语句或循环，但可以通过递归调用混合来实现类似的功能。
导入方式:
- 在 Sass 中，你可以使用 @import 或 @use 来导入其他文件。
- Less 使用 @import 导入其他样式表，但没有像 @use 这样的语义化导入。
运行环境:
- Less 可以在客户端浏览器中运行，使用 JavaScript 编译器。
- Sass 主要在服务器端编译，虽然也有 JavaScript 版本的编译器，但通常推荐在构建过程中使用 Node.js 的工具链。

十三、less与sass有哪些用法？

共同用法：

变量：
- 在 Sass 中，变量以 $开头，例如$ color: #333;。
- 在 Less 中，变量以 @ 开头，例如 @color: #333;。
- 变量可以用于存储颜色、字体大小、边距等值，这样可以在整个项目中重复使用和轻松修改。
嵌套选择器：
- 嵌套选择器让你能够按照 DOM 结构书写 CSS 规则，提高可读性和减少冗余。
- 在 Sass 和 Less 中，嵌套规则看起来像是子级选择器，例如 div > span { color: #333; } 可以写为 div { span { color: #333; } }。
混合（Mixins）：
- Mixins 允许你创建可复用的 CSS 块，可以包含属性和参数。
- 在 Sass 中，使用 @mixin 和 @include 来定义和使用 Mixins。
- 在 Less 中，使用 .mixinName(args) 形式来定义和调用 Mixins。
继承：
- Sass 和 Less 都支持继承，可以定义一个基础样式块，然后在其他选择器中引用它。
函数和操作符：
- 可以进行数学计算、颜色操作、字符串处理等，这有助于动态生成样式。
条件逻辑：
- Sass 支持 if/else 语句和 for/each 循环，使你能够在预处理器中编写更复杂的逻辑。
导入：
- 可以导入其他 Sass 或 Less 文件，帮助组织大型项目的样式代码。

Sass 特有的用法：

Sass 的两种语法：
- 原始 Sass 语法使用缩进来表示嵌套。
- SCSS 语法与 CSS 类似，使用大括号 {} 和分号 ;，更易于从 CSS 迁移。
部分导入：
- _filename.scss 允许你导入不输出到最终 CSS 文件的部分样式。
TypeScript-like 功能：
- Sass 的 Dart Sass 编译器提供了类似 TypeScript 的类型安全和错误检查。

Less 特有的用法：

客户端编译：
- 尽管在服务器端编译更为常见，Less 可以在客户端通过 JavaScript 编译，这意味着样式可以在运行时动态生成。
递归 Mixins：
- Less 的 Mixins 可以递归调用自身，这可以用来实现简单的循环逻辑。

十四、移动端适配策略？

响应式设计：使用流式布局和媒体查询，使页面能够根据屏幕尺寸自动调整，内容会重新排列和缩放以适应不同大小的屏幕。
自适应设计：为不同类型的设备提供特定的布局和样式，可能会使用不同的HTML代码或CSS样式表来适应预定义的设备类型或屏幕尺寸。特点是，更注重于设备检测，提供定制化的体验。
使用REM和EM单位：在CSS中，rem 和 em 是两种相对单位，它们可以用来创建响应式和可缩放的布局。rem（root em）是相对于根元素（通常是）的字体大小，而em是相对于其父元素的字体大小，这样可以创建更灵活的字体和布局尺寸。
Viewport Meta标签：特点是，设置视口的宽度和缩放级别，以确保页面正确显示在移动设备上
弹性盒子模型
使用媒体查询：根据不同设备的特性应用不同的样式规则。