前端总结——HTML + CSS

---

一、HTML + CSS

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

盒模型：是CSS中用来描述和布局元素的一种模型。它将每个元素看作是一个矩形的盒子，该盒子由内容区域、内边距、边框和外边距组成。

普通盒模型：（Content Box）是默认的盒模型，在普通盒模型中，元素的宽度和高度仅包括内容区域的尺寸，不包括内边距、边框和外边距。换句话说，元素的实际尺寸是由内容区域的尺寸加上内边距、边框的尺寸来确定。

怪异盒模型：（Border Box）是另一种盒模型，它与普通盒模型不同。在怪异盒模型中，元素的宽度和高度包括内容区域、内边距和边框的尺寸，但不包括外边距。换句话说，元素的实际尺寸是由内容区域、内边距和边框的尺寸来确定，而外边距不会改变元素的尺寸。

   可以通过CSS的box-sizing属性来指定元素使用的盒模型。默认情况下，box-sizing属性的值是content-box，表示使用普通盒模型。如果将box-sizing的值设置为border-box，则表示使用怪异盒模型。

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

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

区别如下：

• 显示方式：块元素在默认情况下会以块级显示，即每个块元素独占一行，它会自动换行。而行内元素则会在同一行内水平排列，不会独占一行，允许其他元素与其在同一行内显示
• 宽度和高度：块元素可以设置宽度（width）和高度（height），默认情况下宽度会自动填充父容器的宽度，高度会根据内容的大小自动调整。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。
• 盒模型：块元素使用普通盒模型（Content Box），即宽度和高度只包括内容区域，不包括内边距和边框。行内元素的宽度和高度会根据内容、内边距和边框的大小来决定，使用怪异盒模型（Border Box）。
• 支持布局属性：块元素支持使用常见的布局属性，如margin、padding、display、position等，可以通过这些属性进行布局和定位。行内元素的布局属性有限，只能设置水平方向的margin和padding，不能设置垂直方向的margin和padding。

常见的块元素包括：

• <div>：用于组合其他元素或创建块级容器。
• <p>：表示段落。
• <h1>-<h6>：表示标题。
• <ul>：表示无序列表。
• <ol>：表示有序列表。
• <li>：表示列表项。
• <header>：表示文档或节的头部。
• <footer>：表示文档或节的页脚。
• <section>：表示文档中的一个节。
• <article>：表示独立的文章内容。

常见的行内元素包括：

1. <span>：用于标记文本的一部分。
2. <a>：表示链接。
3. <strong>：表示加重强调的文本。
4. <em>：表示斜体强调的文本。
5. <img>：表示图像。
6. <input>：表示输入字段。
7. <button>：表示按钮。
8. <label>：表示表单标签。
9. <code>：表示计算机代码。

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

  HTML语义化标签是指在HTML中使用具有明确含义的标签来描述文档结构和内容，以便更好地理解和解释页面的结构和内容。以下是一些常见的HTML语义化标签：
10. <header>：表示文档或节的头部，通常包含导航、标题等元素。
11. <nav>：表示导航链接的部分。
12. <main>：表示文档的主要内容区域，每个文档只应包含一个标签
13. <article>：表示独立的文章内容，比如博客文章、新闻报道等。
14. <section>：表示文档中的一个节，通常可以视为一个主题或相关内容的
15. <aside>：表示文档的附加或侧边栏内容，通常包含与主要内容相关但不是必需的信息。
16. <footer>：表示文档或节的页脚，通常包含版权信息、联系方式等元素。
17. <figure>：表示与文档主要内容相关的图像、图表、照片等媒体对象
18. <figcaption>：用于为<figure>元素提供标题或描述。
19. <time>：表示日期、时间或时间范围。
20. <mark>：表示被高亮或标记的文本。
21. <cite>：表示引用或参考的作品或文献的标题。
22. <blockquote>：表示长引用的块级元素。
23. <q>：表示短引用的行内元素。
24. <abbr>：表示缩写或首字母缩写。
25. <code>：表示计算机代码片段。
26. <kbd>：表示键盘输入。
27. <var>：表示变量。
28. <samp>：表示示例输出或计算机程序运行的示例。
29. <datalist>：表示输入字段的预定义选项列表。

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

  伪类（Pseudo-classes）是一种选择器，用于选择处于特定状态的元素或满足特定条件的元素。它们以冒号（:）开头，紧跟在选择器后面。常见的伪类包括:hover（鼠标悬停）、:active（活动状态）、:visited（已访问链接）、:nth-child(n)（选择某个父元素的第n个子元素）等。伪类可以通过给选中的元素应用特定的样式来改变其外观或行为。
  伪元素（Pseudo-elements）则是用于在选择器中创建并样式化特定元素的部分或生成内容。它们以双冒号（::）开头，紧跟在选择器后面。常见的伪元素包括::before（在选中元素之前插入内容）、::after（在选中元素之后插入内容）、::first-line（选择元素的第一行文本）等。伪元素可以通过给生成的内容应用样式或插入新的内容来改变元素的呈现。

区别如下：

1. 语法：伪类以冒号（:）开头，伪元素以双冒号（::）开头。
2. 功能：伪类选择特定状态或条件的元素，而伪元素用于样式化特定元素的部分或生成内容。
3. 兼容性：伪类得到广泛支持，可以在大多数浏览器上使用。而伪元素在较早的浏览器版本中可能不被支持或需要特定的前缀。

代码如下（示例）：

/* 伪类 */
a:hover {
  color: red;
}

input[type="text"]:focus {
  border-color: blue;
}

ul li:nth-child(2) {
  font-weight: bold;
}

/* 伪元素 */
p::before {
  content: "前缀内容";
  font-style: italic;
}

div::after {
  content: "后缀内容";
  color: gray;
}

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

  在CSS中，可以使用多种方法实现垂直居中，取决于具体的布局需求和元素类型。以下是几种常用的实现垂直居中的方法：

1. 使用flexbox布局：将父容器设置为display: flex;，并使用align-items: center;将子元素在垂直方向上居中对齐。

.container {
  display: flex;
  align-items: center;
  justify-content: center; /* 可选，水平居中对齐 */
}

2. 使用table布局：将父容器设置为display: table;，并使用display: table-cell;和vertical-align: middle;将子元素在垂直方向上居中对齐。

.container {
 display: table;
}

.centered-element {
 display: table-cell;
 vertical-align: middle;
}

3. 使用绝对定位和负边距：将子元素设置为绝对定位，然后使用负边距和transform: translateY(-50%);将元素在垂直方向上居中对齐。这需要父容器有一个确定的高度。

.parent {
 position: relative;
 height: 300px; /* 确定的高度 */
}

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

4. 使用网格布局：将父容器设置为display: grid;，并使用align-items: center;将子元素在垂直方向上居中对齐。

.container {
 display: grid;
 place-items: center;
}

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

  CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类：

• 元素选择器（Element Selector）：通过元素名称选择元素，例如p选择所有<p>元素。
• 类选择器（Class Selector）：通过类名选择元素，以.开头，例如.container选择所有class属性为container的元素。
• ID选择器（ID Selector）：通过ID选择元素，以#开头，例如#header选择ID为header的元素。
• 属性选择器（Attribute Selector）：通过元素的属性选择元素，例如[type="text"]选择所有type属性值为text的元素。
• 后代选择器（Descendant Selector）：通过父元素和子元素的层级关系选择元素，例如.container p选择所有在class为container的元素内部的<p>元素。
• 相邻兄弟选择器（Adjacent Sibling Selector）：选择紧接在指定元素后面的相邻兄弟元素，例如h2 + p选择紧接在<h2>元素后面的<p>元素。
• 通用兄弟选择器（General Sibling Selector）：选择在指定元素后面的所有兄弟元素，例如h2 ~ p选择所有在<h2>元素后面的<p>元素。
• 伪类选择器（Pseudo-class Selector）：选择元素的特定状态或条件，以:开头，例如:hover选择鼠标悬停在元素上的状态。
• 伪元素选择器（Pseudo-element Selector）：选择元素的特定部分或生成的内容，以::开头，例如::before在元素前插入内容。

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

  在CSS中，当多个样式规则应用于同一个元素时，会根据优先级来确定哪个规则的样式将被应用。CSS优先级的计算基于不同选择器和声明的特定权重。

以下是计算CSS优先级的一般规则（从高到低）：

• 内联样式（Inline Styles）：直接在HTML元素上使用style属性的样式具有最高的优先级，它们会覆盖其他所有样式规则。
• ID选择器（ID Selectors）：通过ID选择器选择的元素具有较高的优先级。例如，#header会优先于类选择器或元素选择器。
• 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）：通过类选择器、属性选择器或伪类选择器选择的元素具有中等优先级。
• 元素选择器（Element Selectors）和伪元素选择器（Pseudo-element Selectors）：通过元素选择器或伪元素选择器选择的元素具有较低的优先级。

注意以下几点：

• 选择器的权重是根据其组合和特定性来计算的，例如ID选择器的权重高于类选择器。
• 如果具有相同的权重，则最后定义的样式将优先应用。
• 继承的样式通常具有较低的优先级，因为它们可以被后代元素的其他样式覆盖。
• !important声明具有最高的优先级，应谨慎使用，因为它会覆盖其他所有样式规则。

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

• px（像素）：px是绝对长度单位，它表示屏幕上的物理像素。px的值固定，不会根据其父元素或文本大小的改变而自动调整。
• em：em是相对长度单位，它相对于其父元素的字体大小来计算。如果没有设置父元素的字体大小，则em将相对于浏览器的默认字体大小。例如，如果父元素的字体大小为16px，那么1em将等于16px。如果子元素的字体大小也设置为1em，则其大小将相对于父元素的字体大小。
• rem：rem也是相对长度单位，但是它相对于根元素（即HTML元素）的字体大小来计算。与em不同，rem的值不受其父元素的影响，它始终相对于根元素的字体大小。这使得rem在构建响应式布局时特别有用，因为可以在根元素上设置一个基准字体大小，然后使用rem定义其他元素的大小。

总结来说：
px是绝对长度单位，固定值。
em是相对于父元素字体大小的单位。
rem是相对于根元素字体大小的单位。

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

  Flex弹性盒布局（Flexbox）是一种CSS布局模型，旨在提供一种灵活的方式来布局和对齐元素。它通过使用容器（Flex容器）和其内部的子元素（Flex项目）之间的关系来实现。

以下是Flex弹性盒布局的一些关键概念和属性：

1. Flex容器：使用display: flex;或display: inline-flex;将一个元素标记为Flex容器。Flex容器可以水平或垂直排列其子元素。
2. Flex项目：Flex容器内的每个子元素都是Flex项目。这些项目根据容器的主轴和交叉轴进行排列和对齐。
3. 主轴和交叉轴：Flex容器定义了一个主轴和一个交叉轴。主轴是Flex项目在Flex容器中的主要方向，可以是水平方向（默认）或垂直方向。交叉轴是垂直于主轴的轴线。
4. Flex项目属性：Flex项目可以使用各种属性来控制其在Flex容器中的布局和行为，其中一些常见的属性包括：
5. flex-grow：定义项目的放大比例，默认为0，表示不放大。
   flex-shrink：定义项目的缩小比例，默认为1，表示可以缩小。
   flex-basis：定义项目在分配多余空间之前的初始大小。
   flex：是flex-grow、flex-shrink和flex-basis的缩写。
   align-self：定义单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。
6. Flex容器属性：Flex容器可以使用各种属性来控制其内部Flex项目的布局和对齐，其中一些常见的属性包括：
7. flex-direction：定义项目在主轴上的排列方式，可以是水平（row）或垂直（column）。
8. justify-content：定义项目在主轴上的对齐方式。
9. align-items：定义项目在交叉轴上的对齐方式。
10. align-content：定义多根轴线（当项目超过一行时）在交叉轴上的对齐方式。
    使用Flex弹性盒布局，可以实现灵活的自适应布局，轻松控制项目的对齐和排序，以及应对不同设备和屏幕尺寸的布局要求。它已经成为现代Web开发中常用的布局工具之一。

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

  浮动塌陷（Float Collapsing）是指当父元素包含浮动元素时，父元素的高度无法正确地被计算，导致父元素无法包裹其内部的浮动元素，从而产生布局问题。
  解决浮动塌陷问题的常用方法是清除浮动（Clearing Floats）。以下是一些常见的清除浮动的方法：

1. 使用clearfix类：在父元素上添加一个clearfix类，这个类包含以下CSS样式：

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

然后将clearfix类应用于包含浮动元素的父元素。

• 使用clear属性：在父元素的样式中，添加clear: both;属性，确保父元素的两侧都没有浮动元素。
• 使用伪元素清除浮动：在父元素的样式中，添加一个伪元素并应用clear: both;属性。例如：

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

• 使用overflow属性：在父元素上设置overflow: auto;或overflow: hidden;，这会创建一个新的块级格式化上下文（Block Formatting Context），从而解决浮动塌陷问题。

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

position属性用于指定元素在文档中的定位方式，有以下几个常用的取值：
static（默认值）：元素按照正常的文档流进行布局，不受其他定位属性的影响。

• relative：元素相对于其正常位置进行定位，通过使用top、right、bottom和left属性来调整元素的位置。相对定位不会影响其他元素的布局，如果不指定偏移属性，元素将保持在正常文档流中。
• absolute：元素相对于其最近的非static定位祖先元素进行定位，如果不存在非static定位的祖先元素，则相对于文档的初始包含块进行定位。使用top、right、bottom和left属性来确定元素的位置。绝对定位会从正常文档流中脱离，不占据文档流中的空间，会影响其他元素的布局。
• fixed：元素相对于视口进行定位，始终保持在固定的位置，即使页面滚动也不会改变其位置。也使用top、right、bottom和left属性来确定元素的位置。固定定位同样会脱离文档流，不占据文档流中的空间，会影响其他元素的布局。
• sticky：元素根据正常文档流进行定位，直到滚动到特定的阈值（容器的顶部、底部、左侧或右侧）时，元素将固定在该位置。在滚动期间，元素的定位将根据滚动位置动态变化。
    除了以上的常用取值外，还有一些非常特殊和不常用的取值，例如inherit、initial、unset等，它们用于继承父元素的定位属性、使用初始值或重置为默认值。
    使用不同的position取值可以实现元素的精确定位和布局控制，根据具体的需求选择合适的取值。

12. BFC、IFC是什么

BFC（Block Formatting Context）：块级格式化上下文。BFC是一个独立的渲染区域，它决定了内部块级元素如何布局并与外部元素发生交互。BFC具有以下特性：

• BFC中的块级元素垂直排列，每个元素占据一行。
• BFC中的块级元素在水平方向上，它们的边界不会重叠。
• BFC中的块级元素可以包含浮动元素，并阻止浮动元素溢出到BFC之外。
• BFC中的块级元素可以通过设置overflow属性为非visible值来创建。

IFC（Inline Formatting Context）：内联格式化上下文。IFC是一种元素内部文本和内联元素布局的环境。IFC具有以下特性：

• IFC中的内联元素在水平方向上排列，一个接一个地放置。
• IFC中的内联元素按照其基线对齐。
• IFC中的内联元素可以通过设置text-align属性来对齐。
• IFC中的内联元素可以通过设置vertical-align属性来垂直对齐。
  方法。