前端面试八股文(HTML + CSS系列)

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

盒模型是CSS中用于布局和定位元素的概念。它将每个HTML元素视为一个矩形的盒子，其中包含了内容、内边距、边框和外边距。

普通盒模型（也称为W3C盒模型）是CSS标准规定的盒模型，其中盒子的宽度和高度仅包括内容的尺寸，不包括内边距、边框和外边距。换句话说，元素的宽度和高度设置的是内容框的尺寸。

而怪异盒模型（也称为IE盒模型）是在早期版本的Internet Explorer浏览器中使用的盒模型。在怪异盒模型中，盒子的宽度和高度包括了内容、内边距和边框，而不包括外边距。换句话说，元素的宽度和高度设置的是内容框加上内边距和边框的总尺寸。

主要区别在于普通盒模型和怪异盒模型计算宽度和高度的方式不同。普通盒模型只考虑内容框，而怪异盒模型考虑了内容框、内边距和边框。

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

使用普通盒模型时，元素的宽度和高度需要额外考虑内边距和边框的尺寸，而使用怪异盒模型时，元素的宽度和高度包括了内边距和边框。选择合适的盒模型取决于设计需求和布局要求。

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

块元素（Block-level elements）和行内元素（Inline elements）是HTML元素的两种基本类型，它们在布局和显示上有一些区别。

区别如下：

布局特性：
- 块元素在页面中以块的形式显示，独占一行，可以设置宽度、高度、内边距和外边距。
- 行内元素不会独占一行，它们会根据内容的大小自动排列，不能设置宽度、高度，水平方向上的内边距和外边距有效，垂直方向上的内边距和外边距不会影响行内元素所占的空间。
默认行为：
- 块元素默认情况下会换行，即在前后都有一个换行符。
- 行内元素默认情况下不会换行，它们会在同一行上按照顺序排列。
内容模型：
- 块元素可以包含其他块元素和行内元素，可以形成父子关系的层次结构。
- 行内元素通常包含在块级元素内部，它们不能包含块级元素。

常见的块元素包括：

<div>
<p>
<h1> - <h6>
<ul> 和 <ol>
<li>
<header>
<footer>
<section>
<article>

常见的行内元素包括：

<span>
<a>
<strong>
<em>
<img>
<input>
<label>
<button>
<select>
<textarea>

需要注意的是，HTML5中一些元素的显示方式可能根据CSS样式的设置而有所变化，比如通过CSS的display属性可以将行内元素转换为块元素，反之亦然。但上述列举的元素通常具有上述的默认行为和特性。

3HTML语义化标签有哪些？

HTML语义化标签是指在HTML文档中使用具有明确含义的标签，以表达文档结构和内容的含义，提高页面的可读性和可访问性。以下是一些常见的HTML语义化标签：

<header>：定义页面或区域的头部，通常包含标题、导航等信息。
<nav>：定义导航部分，用于包含页面的导航链接。
<main>：定义页面的主要内容，表示文档的主体部分。
<article>：定义独立的文章或内容块，比如博客文章、新闻报道等。
<section>：定义文档中的一个区块或部分，通常包含相关的内容。
<aside>：定义页面的侧边栏内容，通常包含与主要内容相关但可选的附加信息。
<footer>：定义页面或区域的底部，通常包含版权信息、联系方式等。
<figure>：定义一段独立的内容，通常包含图像、图表、照片、代码示例等。
<figcaption>：定义<figure>元素中的标题或说明性文本。
<blockquote>：定义引用的块级内容，通常用于引用其他来源的内容。
<cite>：定义引用或参考的作品的标题。
<time>：定义日期、时间或时间范围。
<mark>：定义文本的高亮显示。

这些语义化标签可以更好地描述页面的结构和内容，使得页面更具有可读性和可访问性，并提供更好的语义化信息给搜索引擎和辅助技术使用。同时，它们也可以被CSS样式和JavaScript脚本更好地选择和操作。

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

伪类（Pseudo-classes）和伪元素（Pseudo-elements）是CSS中用于选择和样式化特定元素的一种方式，它们有以下区别：

伪类：

伪类用于选择满足特定条件的元素，可以通过在选择器中使用冒号（:）来表示，例如:hover、:focus等。
伪类可以选择元素的特定状态或行为，如用户的交互动作、元素的位置关系等。
伪类一般用于选择已有的元素，无法通过CSS样式直接创建新的元素。
伪类在选择器中出现的位置通常在真实类选择器之后。

伪元素：

伪元素用于创建并样式化元素中的特定部分，可以通过在选择器中使用双冒号（::）来表示，例如::before、::after等。
伪元素允许我们在元素的内容之前或之后插入额外的内容，并对其进行样式设置。
伪元素创建的部分是文档树中不存在的虚拟元素。
伪元素在选择器中出现的位置通常在真实元素选择器之后。

总结：

伪类用于选择元素的特定状态或行为，而伪元素用于创建并样式化元素的特定部分。
伪类选择已有的元素，而伪元素创建虚拟的、不存在于文档树中的元素部分。
伪类使用冒号（:）表示，伪元素使用双冒号（::）表示。
伪类在选择器中出现的位置通常在真实类选择器之后，伪元素在选择器中出现的位置通常在真实元素选择器之后。

5CSS如何实现垂直居中？

在CSS中，可以使用多种方法来实现垂直居中，以下是一些常用的方法：

使用Flexbox布局：将容器设置为display: flex;，然后使用align-items: center;来使子元素垂直居中。
```
.container {
  display: flex;
  align-items: center;
}
```
使用表格布局：将容器设置为display: table;，然后使用vertical-align: middle;来使子元素垂直居中。
```
.container {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}
```
使用绝对定位和transform属性：将容器设置为相对定位，然后使用绝对定位和transform属性将子元素居中。
```
.container {
  position: relative;
}

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

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

CSS常见的选择器包括：

元素选择器（Element Selector）：通过元素名称选择元素，如div、p等。
类选择器（Class Selector）：通过类名选择元素，以.开头，如.container。
ID选择器（ID Selector）：通过元素的唯一ID选择元素，以#开头，如#header。
属性选择器（Attribute Selector）：通过元素的属性选择元素，如[type="text"]。
伪类选择器（Pseudo-class Selector）：通过元素的特定状态或位置选择元素，以:开头，如:hover、:first-child等。
后代选择器（Descendant Selector）：通过选择元素的后代元素，使用空格分隔，如.container p选择.container内的所有p元素。
直接子元素选择器（Child Selector）：通过选择元素的直接子元素，使用>符号分隔，如.container > p选择.container下的直接子元素p。
相邻兄弟选择器（Adjacent Sibling Selector）：选择与指定元素相邻的下一个兄弟元素，使用+符号分隔，如.container + div选择.container后面相邻的兄弟元素div。
通用兄弟选择器（General Sibling Selector）：选择与指定元素后面的所有兄弟元素，使用~符号分隔，如.container ~ p选择.container后面的所有兄弟元素p。

以上是一些常见的CSS选择器，通过不同的选择器可以选择并操作HTML文档中的各种元素，实现样式和行为的控制。

7CSS的优先级如何计算？

CSS优先级是用来确定多个选择器应用于同一个元素时，哪个选择器的样式规则将优先生效。CSS优先级的计算基于不同类型选择器的权重。

以下是CSS优先级的计算规则，按优先级从高到低的顺序：

!important：添加在样式规则后面的!important标记具有最高的优先级。应谨慎使用!important，因为它可能导致样式难以维护和覆盖。
内联样式（Inline Styles）：使用style属性直接应用于元素的样式规则具有较高的优先级。
ID选择器（ID Selectors）：使用ID选择器（以#开头）选择元素的样式规则具有较高的优先级。
类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）：使用类选择器（以.开头）、属性选择器（以[]包裹）和伪类选择器（以:开头）选择元素的样式规则。
元素选择器和伪元素选择器（Element Selectors and Pseudo-element Selectors）：使用元素选择器（如div、p等）和伪元素选择器（以::开头）选择元素的样式规则。
通配选择器（Universal Selector）：使用通配选择器*选择元素的样式规则。
继承样式（Inherited Styles）：某些样式属性会从父元素继承给子元素，继承的样式规则具有较低的优先级。

如果有多个选择器具有相同的优先级，最后定义的样式规则将优先生效。

需要注意的是，选择器中的选择器类型和数量会影响优先级的计算，具体的优先级计算规则可以参考CSS规范中的相关内容。

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

长度单位px、em和rem在CSS中用于定义元素的尺寸，它们有以下区别：

px（像素）：px是相对于显示设备的屏幕分辨率的长度单位。1px等于屏幕上的一个物理像素。px是固定的单位，不会随着元素的父元素或其他样式的变化而改变大小。
em：em是相对长度单位，它的值相对于元素自身的字体大小（font-size）。例如，如果一个元素的字体大小（font-size）为16px，那么1em等于16px。如果应用于父元素，em的值将相对于父元素的字体大小计算。
rem：rem也是相对长度单位，它的值相对于根元素（即<html>元素）的字体大小（font-size）。与em不同，rem不会继承父元素的字体大小，它始终相对于根元素的字体大小计算。

主要区别：

px是绝对长度单位，不受其他样式的影响，具有固定的值。
em是相对于元素自身的字体大小计算，如果应用于父元素，它会继承父元素的字体大小。
rem是相对于根元素的字体大小计算，不会继承父元素的字体大小。

在使用长度单位时，可以根据需求和设计考虑选择合适的单位。px适合用于固定尺寸的元素，em和rem适合用于相对尺寸的元素，可以根据元素的字体大小来调整其它尺寸。rem在响应式设计中常被用于实现相对于根元素的自适应布局。

9讲一下flex弹性盒布局？

Flexbox（弹性盒布局）是一种用于页面布局的CSS模块，它提供了一种灵活的方式来排列、对齐和分布元素。Flexbox的目标是让容器内的元素能够以可预测的方式对齐、扩展和收缩，以适应不同的屏幕大小和设备。

Flexbox的主要概念包括以下几个部分：

Flex容器（Flex Container）：通过将元素的display属性设置为flex或inline-flex来创建Flex容器。Flex容器可以包含一组Flex项（Flex Items）。
Flex项（Flex Items）：Flex容器内的每个子元素都是一个Flex项。Flex项可以在Flex容器中自由排列和定位。
主轴（Main Axis）和交叉轴（Cross Axis）：Flex容器具有主轴和交叉轴两个方向。主轴是Flex项排列的方向，默认为水平方向（左到右），交叉轴是垂直于主轴的方向。
主轴对齐方式（Main Axis Alignment）：用于控制Flex项在主轴上的对齐方式，例如居中对齐、起始对齐、末尾对齐等。
交叉轴对齐方式（Cross Axis Alignment）：用于控制Flex项在交叉轴上的对齐方式，例如居中对齐、起始对齐、末尾对齐等。

通过设置Flex容器和Flex项的相关属性，可以实现各种布局需求，例如：

等分剩余空间：通过设置Flex项的flex属性为1，可以让多个Flex项平均分配剩余空间。
自适应布局：通过设置Flex项的flex属性为自动（auto），可以让Flex项根据内容的大小自适应调整宽度或高度。
对齐方式：通过设置Flex容器的justify-content属性和align-items属性，可以控制Flex项在主轴和交叉轴上的对齐方式。
排列顺序：通过设置Flex项的order属性，可以改变Flex项在Flex容器中的排列顺序。

Flexbox的优势在于它简化了页面布局的操作，提供了更灵活、响应式的布局方式。它可以替代传统的浮动和定位布局，减少了对固定尺寸和位置的依赖，使页面布局更加适应不同屏幕大小和设备的需求。

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

浮动塌陷（Float Collapse）是指当父元素包含了浮动元素，且没有显式设置高度时，父元素的高度会塌陷（collapsed）为0的情况。

解决浮动塌陷问题的常用方法是使用清除浮动（Clear Float）的技术。以下是几种常见的清除浮动的方法：

使用空的<div>元素清除浮动：在浮动元素的后面添加一个空的<div>元素，并为其设置clear: both;样式。这会创建一个空元素，将浮动元素的影响清除。
```
<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div style="clear: both;"></div> 
</div>
```

使用伪元素清除浮动：使用伪元素::after在浮动元素容器的最后添加一个清除元素，并设置clear: both;样式。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

使用overflow: hidden;清除浮动：为浮动元素的容器设置overflow: hidden;样式。这会创建一个包含浮动元素的块级格式化上下文，从而清除浮动。
```
.clearfix {
  overflow: hidden;
}
```
```
<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>
```

这些方法中，使用伪元素清除浮动是较为常用和推荐的方式，因为它不需要添加多余的HTML元素。

需要注意的是，清除浮动可能会对布局产生一些影响，例如导致容器的宽度扩大、触发父元素的边距合并等。在使用清除浮动时，需要根据具体情况进行调整和处理。此外，现代的布局技术，如Flexbox和Grid，也提供了更灵活和强大的布局方式，可以更好地避免浮动塌陷问题。

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

CSS中的position属性有以下几个常用的值：

static（默认值）：元素的位置遵循正常的文档流布局。忽略top、right、bottom和left属性。
relative：元素的位置相对于其正常位置进行定位。使用top、right、bottom和left属性可以调整元素的位置，但它仍然占据原来的空间，不会影响其他元素的布局。
absolute：元素的位置相对于其最近的已定位（position值不是static）的父元素进行定位，如果没有已定位的父元素，则相对于文档的初始包含块进行定位。使用top、right、bottom和left属性可以精确控制元素的位置，元素不再占据原来的空间，不会影响其他元素的布局。
fixed：元素的位置相对于浏览器窗口进行定位，始终保持在视口的固定位置，不随页面滚动而变化。使用top、right、bottom和left属性可以指定元素的精确位置。
sticky：元素根据用户的滚动位置进行定位。当元素在可视区域内时，表现为relative；当元素即将滚出可视区域时，表现为fixed。

此外，还有一些不常用的position值，包括：

inherit：继承父元素的position属性值。
initial：将position属性重置为默认值static。
unset：将position属性重置为默认值或继承值。

这些position属性值用于控制元素的定位和布局，可以根据具体需求选择适当的值来实现所需的效果。

12BFC、IFC是什么？

BFC（块级格式化上下文）和 IFC（内联格式化上下文）是 CSS 中的两个重要概念。

BFC（块级格式化上下文）：

BFC 是一个独立的渲染区域，具有自己的布局规则。
BFC 中的元素在垂直方向上一个接一个地排列，可以包含浮动元素，阻止垂直外边距折叠。
BFC 的边界由其包含块的边界或者其内部的浮动元素所决定。
触发 BFC 的条件包括：根元素、浮动元素、绝对定位元素、display 属性为 inline-block、table-cell、table-caption、table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、或者 overflow 属性不为 visible 的元素。

IFC（内联格式化上下文）：

IFC 是一个水平的渲染区域，内联元素按照一行排列。
IFC 中的元素按照其基线对齐，可以通过 vertical-align 属性进行调整。
IFC 中的元素的高度由其包含的内容决定。
触发 IFC 的条件包括：包含块为块级元素、float 属性不为 none、display 属性为 inline-block、table-cell、table-caption 或者 table。

BFC 和 IFC 在布局上起到了重要的作用，可以影响元素的定位、相邻元素的排列和外边距的计算等。了解和正确使用 BFC 和 IFC 可以解决一些布局上的问题，并控制元素的显示效果。