前端面试（HTML+CSS）篇HTML 和 CSS 是 Web 前端开发中非常重要的两个技术，HTML 负责网页结构，C

1. 讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

盒模型是指在网页设计中，每个 HTML 元素所占用的空间都可以看作一个矩形的盒子，其中包括了元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)。

普通盒模型和怪异盒模型的区别在于，它们计算元素宽度和高度的方式不同。

普通盒模型：元素的宽度和高度只包括了内容区域的大小，不包括内边距、边框和外边距。也就是说，盒子的总宽度 = 内容区域宽度 + 左右内边距 + 左右边框宽度 + 左右外边距，盒子的总高度 = 内容区域高度 + 上下内边距 + 上下边框宽度 + 上下外边距。

怪异盒模型：元素的宽度和高度包括了内容区域、内边距和边框，但不包括外边距。也就是说，盒子的总宽度 = 内容区域宽度 + 左右内边距 + 左右边框宽度，盒子的总高度 = 内容区域高度 + 上下内边距 + 上下边框宽度。

在 CSS 盒模型中，可以通过 box-sizing 属性来控制盒模型的计算方式。默认情况下，box-sizing 属性的值为 content-box，表示普通盒模型；如果将其设置为 border-box，则表示怪异盒模型。

2. 块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

块元素和行内元素是指在 HTML 中，各种 HTML 元素所具有的不同的显示属性。

块元素：块元素是指那些默认情况下在页面中占据一整行的 HTML 元素，它们会独占一行，不与其他元素并列显示。块元素可以设置宽度、高度、内边距和外边距，可以容纳其他块级元素或行内元素。例如 div、h1-h6、p、ul、ol、li、form 等。

行内元素：行内元素是指那些默认情况下在页面中不占据一整行的 HTML 元素，它们只占据它所包含的内容所需的空间，不能设置宽度、高度、内边距和外边距。行内元素只能容纳文本或其他行内元素。例如 span、a、b、i、img、input、select、textarea 等。

块元素和行内元素的主要区别：

块元素在页面中以块的形式展现，独自占据一行或多行，行内元素在页面中以行的形式展现，与其他行内元素并排显示。
块元素可以设置宽度、高度、内边距和外边距，而行内元素不能设置宽度、高度、内边距和外边距。
块元素可以容纳其他块级元素或行内元素，而行内元素只能容纳文本或其他行内元素。

常见的块元素有：div、h1-h6、p、ul、ol、li、form、table 等。

常见的行内元素有：span、a、b、i、img、input、select、textarea 等。

3. HTML语义化标签有哪些？

HTML 语义化标签是指在 HTML 中具有一定含义、表达一定语义的标签，这些标签不仅能够让网页的结构更加清晰、易于维护，而且对于搜索引擎的抓取、网页的可访问性和可读性也有很大的帮助。

常见的 HTML 语义化标签有：

标题标签：h1、h2、h3、h4、h5、h6
段落标签：p
列表标签：ul、ol、li、dl、dt、dd
链接标签：a
图像标签：img
文本标签：strong、em、b、i、u、s、sup、sub
表格标签：table、thead、tbody、tfoot、tr、th、td、caption、colgroup、col
表单标签：form、input、label、select、option、textarea、button、fieldset、legend
区块标签：header、footer、nav、aside、section、article
多媒体标签：audio、video
页面结构标签：html、head、body、meta、title、link、script

通过使用这些语义化标签，可以使得网页的结构更加清晰、易于维护，同时也更加符合搜索引擎的抓取规则、网页的可访问性和可读性。

4. 伪类和伪元素的区别是什么？

伪类和伪元素都是 CSS 中用于给特定元素添加样式的语法，它们的区别在于作用的对象不同。

伪类是用于选择元素的某个状态或行为的关键词，例如:hover、:active、:focus等，用于对元素的状态进行选择，可以在元素被点击、鼠标悬停、被选中等状态下应用不同的样式。

伪元素则是用于在元素的某个部分添加样式，例如::before、::after等，用于在元素的内容之前或之后插入一些内容，并对该内容进行样式的设置。伪元素可以用于创建一些特殊的效果，例如添加一些图标、装饰性元素等。

总的来说，伪类用于对元素的状态进行样式的设置，而伪元素则用于在元素的某个部分添加样式，两者在作用对象和语法上有所不同。

5. CSS如何实现垂直居中？

在 CSS 中，实现垂直居中的方式有多种，以下是其中的几种：

1. 使用 Flex 布局：使用 display: flex 和 align-items: center 属性可将子元素垂直居中。

.parent { 
  display: flex; 
  align-items: center; 
 }

2. 使用绝对定位：使用 top、bottom 和 margin 属性可将子元素垂直居中。

.parent { 
    position: relative; 
 } 
.child { 
    position: absolute; 
    top: 50%!;(MISSING) 
    margin-top: -25px; /* 子元素高度的一半 */ 
}

3. 使用表格布局：使用 display: table 和 display: table-cell 属性可将子元素垂直居中。

.parent { 
    display: table;
 } 
.child { 
    display: table-cell;
    vertical-align: middle;
}

4. line-height 属性：当父元素和子元素高度相等时，使用 line-height 属性可将子元素垂直居中。

.parent { 
    line-height: 50px; /* 父元素高度 */
 }

5. 使用 transform 属性：使用 transform 属性可将子元素垂直居中。

.parent { 
    position: relative;
 } 
 .child { 
    position: absolute; 
    top: 50%!;(MISSING) 
    transform: translateY(-50%!)(MISSING);
}

以上是一些常见的实现垂直居中的方法，需要根据具体的情况选择合适的方式。

6. CSS常见的选择器有哪些？

CSS 中常见的选择器有以下几种：

元素选择器（Element Selector）：通过 HTML 元素的名称进行选择，例如 p、h1、div 等。
ID 选择器（ID Selector）：通过元素的 ID 属性进行选择，使用 # 符号表示，例如 #header。
类选择器（Class Selector）：通过元素的 class 属性进行选择，使用 . 符号表示，例如 .box。
属性选择器（Attribute Selector）：通过元素的属性进行选择，例如 [type="text"]。
伪类选择器（Pseudo-class Selector）：通过元素的状态进行选择，例如:hover、:active、:focus 等。
后代选择器（Descendant Selector）：通过元素的父元素和子元素进行选择，例如 .parent .child。
相邻兄弟选择器（Adjacent Sibling Selector）：选择紧接在指定元素后面的同级元素，例如 h2 + p。
通用选择器（Universal Selector）：选择所有元素，使用 * 符号表示。

以上是 CSS 中常见的选择器，不同的选择器可以结合使用，以获取更精确的选择结果。

7. CSS的优先级如何计算？

CSS 中的优先级是用于决定当多个选择器作用于同一个元素时，哪个选择器的样式更具有优先级。

优先级的计算方式如下：

每个选择器都有一个优先级值，优先级值由以下三个级别的值叠加而来：
- 每个元素选择器的优先级值为 1。
- 每个类选择器、属性选择器和伪类选择器的优先级值为 10。
- 每个 ID 选择器的优先级值为 100。
例如，选择器 .box #header，其中类选择器的优先级值为 10，ID 选择器的优先级值为 100，所以该选择器的优先级值为 110。
如果两个选择器具有相同的优先级值，则比较它们的顺序，后定义的选择器优先级更高。
如果两个选择器具有不同的优先级值，则优先级值高的选择器优先级更高。

例如，以下选择器中：

.box { 
    color: red;
 } 
 #header { 
    color: blue;
}

当使用 <div class="box" id="header"> 元素时，最终的文本颜色将是蓝色，因为 ID 选择器的优先级值为 100，而类选择器的优先级值为 10，所以 ID 选择器的样式会覆盖类选择器的样式。

需要注意的是，当使用 !important 关键字时，将强制应用该样式，即使它的优先级比其他样式低。建议在实际开发中尽量避免使用 !important 关键字，以免出现样式覆盖问题。

8. 长度单位px、em和rem的区别是什么？

在 CSS 中，常用的长度单位有 px、em 和 rem，它们的区别如下：

px（像素）：是相对于显示器屏幕分辨率而言的单位，是固定的，无法调整大小。在不同的设备上，1px 的实际物理尺寸是不同的。
em：相对长度单位，相对于当前元素的字体大小。如果父元素设置了字体大小，子元素使用 em 作为长度单位时，它们的大小会相对于父元素的字体大小进行调整。例如，如果父元素的字体大小为 16px，子元素设置为 2em，则子元素的大小为 32px。
rem：相对长度单位，相对于根元素的字体大小。根元素的字体大小通常是浏览器默认的字体大小（通常为 16px），可以通过设置根元素的字体大小来影响整个页面中的 rem 单位大小。例如，如果根元素的字体大小为 16px，子元素设置为 2rem，则子元素的大小为 32px。

总的来说，em 和 rem 都是相对长度单位，可以根据父元素和根元素的字体大小进行调整，而 px 是固定的，无法调整。在实际开发中，可以根据具体情况选择使用不同的长度单位，以达到更好的样式效果。

9. 讲一下flex弹性盒布局？

Flex 弹性盒布局是一种 CSS 布局模式，用于实现复杂的布局结构。它可以让容器内的子元素自动排列，并且可以通过简单的属性设置来控制子元素在容器中的位置、大小和顺序等。以下是 Flex 弹性盒布局的一些概念和属性：

容器和项目：Flex 弹性盒布局是基于容器和项目的概念。容器是包含一组项目的父元素，而项目是容器的直接子元素。
主轴和交叉轴：Flex 弹性盒布局中有两个轴，一个是主轴，一个是交叉轴。主轴是项目排列的方向，可以是水平方向或垂直方向；交叉轴是与主轴垂直的轴线。
flex-direction 属性：用于设置主轴的方向，可以是从左到右（row）、从右到左（row-reverse）、从上到下（column）或从下到上（column-reverse）。
justify-content 属性：用于设置项目在主轴上的对齐方式，可以是居中对齐、两端对齐、开始对齐、结束对齐或分散对齐等。
align-items 属性：用于设置项目在交叉轴上的对齐方式，可以是居中对齐、顶部对齐、底部对齐、基线对齐或拉伸对齐等。
flex-wrap 属性：用于设置项目的换行方式，可以是不换行、按需换行或强制换行等。
flex-grow、flex-shrink 和 flex-basis 属性：用于设置项目的伸缩性和基础大小。flex-grow 属性定义项目在剩余空间中的放大比例，flex-shrink 属性定义项目在空间不足时的缩小比例，flex-basis 属性定义项目在分配多余空间之前的基础大小。
order 属性：用于设置项目的排列顺序，可以是正数或负数，数值小的项目排在前面。

总的来说，Flex 弹性盒布局是一种非常灵活和方便的布局模式，可以轻松地实现各种复杂的布局结构，减少了开发人员的工作量，提高了开发效率。

10. 浮动塌陷问题解决方法是什么？

浮动塌陷问题是指当一个父元素包含了一个或多个浮动元素时，父元素的高度无法被撑开，导致父元素的背景色或边框无法显示的问题。

浮动塌陷问题的解决方法有两种：

使用 clear 属性清除浮动。在父元素的末尾添加一个空元素，并设置 clear 属性为 both、left 或 right，可以清除浮动并撑开父元素的高度。例如：

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div style="clear: both;"></div> <!--这种方法的缺点是需要添加一个额外的空元素，不够优雅。-->
</div>

使用 overflow 属性触发 BFC。将父元素的 overflow 属性设置为 auto、hidden 或 scroll，可以触发 BFC（块级格式化上下文），从而清除浮动并撑开父元素的高度。例如：

<!--这种方法的优点是不需要添加额外的元素，
但需要注意的是，这种方法可能会影响父元素的布局，需要根据实际情况选择合适的方法。-->
<div class="parent" style="overflow: hidden;"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

能不用就别用浮动

11. position属性的值有哪些？各个值是什么含义？

CSS 中 position 属性用于设置元素的定位方式，常用的值有以下 5 种：

static：默认值，元素在文档流中正常排列，不受 top、bottom、left、right 等属性的影响。
relative：相对定位，元素在文档流中正常排列，但可以通过 top、bottom、left、right 等属性相对于自身原来的位置进行偏移。
absolute：绝对定位，元素从文档流中脱离，可以通过 top、bottom、left、right 等属性相对于最近的非 static 定位的祖先元素进行定位，如果没有非 static 定位的祖先元素，则相对于 body 元素进行定位。
fixed：固定定位，元素从文档流中脱离，可以通过 top、bottom、left、right 等属性相对于浏览器窗口进行定位，当页面滚动时，元素的位置不会改变。
sticky：粘性定位，元素在文档流中正常排列，当滚动到指定位置时，元素会固定在该位置，直到滚动到另一个指定位置才会解除固定。

在使用 position 属性时，需要注意以下几点：

绝对定位和固定定位的元素会脱离文档流，可能会对其他元素的布局产生影响，需要谨慎使用。
相对定位和绝对定位可以通过 z-index 属性设置元素的层级关系。
粘性定位目前还不是所有浏览器都支持，需要进行兼容性处理。

总的来说，position 属性是 CSS 中一个非常重要的属性，可以用于实现各种复杂的布局效果，但需要根据实际情况选择合适的定位方式，并注意其影响。

12. BFC、IFC是什么？

BFC 和 IFC 都是 CSS 中的布局概念。

BFC（块级格式化上下文）是一个独立的渲染区域，具有一定的布局规则，其中的元素按照一定的规则进行排列。BFC 的主要特点包括：

BFC 中的元素垂直方向上的边距会发生重叠。
BFC 可以包含浮动元素，防止浮动元素对其他元素的影响。
BFC 可以防止元素被父元素外面的浮动元素覆盖。
BFC 可以防止元素因为浮动元素高度不够而被挤到下一行。

IFC（行内格式化上下文）是一个独立的渲染区域，用于控制行内元素的排列。IFC 的主要特点包括：

IFC 中的元素按照一定的规则进行排列，可以通过 text-align 控制元素的水平对齐方式。
IFC 中的元素垂直方向上的对齐方式可以通过 vertical-align 属性控制。
IFC 中的元素的高度是由行高决定的。
IFC 中的元素可以和其他元素共享同一行，如果一行放不下，会自动换行。

在实际开发中，BFC 和 IFC 经常被用于解决布局问题，例如使用 BFC 来清除浮动，使用 IFC 来控制文本的对齐方式等。了解 BFC 和 IFC 的特点和用法，可以帮助我们更好地理解和应用 CSS 的布局机制。

前端面试（HTML+CSS）篇