前端常见面试题之html和css篇

文章目录

• 一、html
• • [1. 如何理解html语义化](#1. 如何理解html语义化)
  • [2. 说说块级元素和内联元素的区别](#2. 说说块级元素和内联元素的区别)
• 二、css
• • [1. 盒模型的宽度offsetWidth如何计算](#1. 盒模型的宽度offsetWidth如何计算)
  • [2. box-sizing:border-box有什么用](#2. box-sizing:border-box有什么用)
  • [3. margin的纵向重叠问题](#3. margin的纵向重叠问题)
  • [4. 谈谈你对BFC的理解和应用](#4. 谈谈你对BFC的理解和应用)
  • [5. 清除浮动有哪些方式](#5. 清除浮动有哪些方式)
  • [6. 使用flex布局实现骰子3](#6. 使用flex布局实现骰子3)
  • 7.position的absolute和relative定位问题
  • [8. 水平居中的实现方式](#8. 水平居中的实现方式)
  • 9.水平垂直居中的实现方式
  • [10. line-height继承问题](#10. line-height继承问题)
  • [11. rem，em，px](#11. rem，em，px)
  • [12. vw和vh](#12. vw和vh)

一、html

1. 如何理解html语义化

HTML语义化是指在编写HTML代码时，使用适当的标签来描述内容的含义和结构。

语义化的好处包括：

1. 增强代码的可读性;
2. 提高搜索引擎的理解能力;
3. 方便开发者阅读和维护代码;
4. 以及更好地支持无障碍访问等。

理解HTML语义化的关键在于正确使用HTML标签来表示内容的含义。以下是一些常见的HTML标签和它们的语义含义：

1. <header> 标签用于表示页面或区块的头部，比如页面的标题或导航栏。

2. <nav> 标签用于表示导航栏。

3. <main> 标签用于表示页面的主要内容。

4. <article> 标签用于表示独立的文章内容。

5. <section> 标签用于表示页面或文章的分段内容。

6. <aside> 标签用于表示与主要内容相关但不属于主要内容的附加信息。

7. <footer> 标签用于表示页面或区块的底部，比如版权信息或联系方式。

8. <h1> - <h6> 标签用于表示标题，其中 <h1> 表示最高级别的标题。

9. <p> 标签用于表示段落。

10. <ul> 和 <ol> 标签用于表示无序列表和有序列表。

11. <li> 标签用于表示列表中的每一项。

12. <a> 标签用于表示链接。

13. <img> 标签用于表示图片。

14. <table> 标签用于表示表格。

举例对比说明，假设有一个网页包含一个标题、一段文字内容和两张图片：

1. 非语义化的HTML代码：

<div class="header">网页标题</div>
<div class="content">这是内容</div>
<div class="image"><img src="image1.jpg" alt="图片1"></div>
<div class="image"><img src="image2.jpg" alt="图片2"></div>

这段代码使用了一些无具体含义的<div>标签来表示页面的结构。这样的代码在没有样式的情况下很难理解页面结构，也不利于搜索引擎对页面内容的分析。

2. 语义化的HTML代码：

<header>网页标题</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>这是内容</p>
  </article>
  <figure>
    <img src="image1.jpg" alt="图片1">
    <figcaption>图片1的描述</figcaption>
  </figure>
  <figure>
    <img src="image2.jpg" alt="图片2">
    <figcaption>图片2的描述</figcaption>
  </figure>
</main>

这段代码使用了具有明确含义的HTML标签来描述页面结构和内容。<header>表示网页的标题，<main>表示主要内容，<article>表示一篇文章等等。这样的代码清晰易读，有助于理解网页结构和内容。

通过对比可以看出，语义化的HTML代码更直观、易理解，也更便于网页的维护和SEO优化。

2. 说说块级元素和内联元素的区别

在HTML中，块级元素和内联元素是两种不同的元素类型。

块级元素 （Block-level elements）：

• 块级元素通常会在页面中生成一个独立的块，占据一行或者多行的空间。
• 常见的块级元素有<div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>等。

内联元素 （Inline elements）：

• 内联元素不会在页面中生成一个独立的块，而是与其他元素在一行显示。
• 常见的内联元素有<span>, <a>, <strong>, <em>, <img>, <input>, <br>等。

块级元素和内联元素的区别主要体现在以下几个方面：

1. 显示方式：块级元素以块的形式显示，即自动换行且占据一整行或多行的宽度；内联元素则与其他元素在一行上显示，不会换行。
2. 盒模型：块级元素可以设置宽度、高度、内外边距等样式属性，可以直接控制元素的盒模型；内联元素的宽度和高度由其内容决定，不能直接设置。
3. 默认样式 ：块级元素的默认样式是display: block;，而内联元素的默认样式是display: inline;。
4. 嵌套规则：块级元素可以包含其他块级元素和内联元素；内联元素不能包含块级元素，只能包含其他内联元素或者文本内容。

需要注意的是，可以通过CSS的属性display来改变元素的显示方式，将块级元素设置为内联元素或将内联元素设置为块级元素。

二、css

1. 盒模型的宽度offsetWidth如何计算

盒模型的宽度offsetWidth是指一个元素的整体宽度，包括内容区域的宽度(content) 、内边距 （padding）以及边框 （border）。

在计算offsetWidth时，浏览器会将元素的内容区域宽度、内边距宽度和边框宽度都考虑在内。
举例说明：

假设有一个 div 元素，设置了如下样式：

div {
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

这个 div 元素的盒模型宽度可以这样计算：

1. 内容宽度：指定的宽度为 300px。

2. 内边距和边框宽度：左右两侧的内边距为 10px，上下两侧的内边距为 10px；四条边的边框宽度为 1px。

因此，盒模型的总宽度为 300px + 2 * 10px + 2 * 1px = 322px。

2. box-sizing:border-box有什么用

"box-sizing: border-box;"是一个用于 CSS 的属性，它指定了元素的盒子模型计算方式，并将CSS的宽度（width）和高度（height）的计算方式修改为包括边框（border）和内边距（padding）的计算。

举例来说，如果一个元素宽度被设置为200px并且应用了一些边框和内边距，如果没有使用"box-sizing: border-box;"属性，那么元素的实际宽度将会变大，以包括边框和内边距的大小。而如果使用了"box-sizing: border-box;"属性，元素的实际宽度将会保持为200px，并且边框和内边距将会减少自动适应。

下面是一个示例，展示了使用和不使用"box-sizing: border-box;"属性的区别：

HTML:

<div class="example"></div>

CSS:

.example {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  background-color: lightgray; 
  box-sizing: border-box;
}

在上述例子中，使用了"box-sizing: border-box;"属性，因此元素的实际宽度仍然为200px，包括边框和内边距。如果没有使用该属性，元素的实际宽度将会变为230px（宽度 + 左右边距 + 左右边框），因为默认的"box-sizing"属性值是"content-box"，即只包括内容。

这个属性特别有用的一个场景是当需要制作一个带有固定宽度的网格系统时，可以使用该属性确保每列总宽度都是固定的，而不会因为边框和内边距的存在而超出指定的宽度范围。

3. margin的纵向重叠问题

纵向重叠问题是指当相邻的元素都设置了上下边距（margin），并且上一个元素的下边距与下一个元素的上边距之和超过了一定的阈值（常为负数），则两者之间的垂直间距会取两个边距值中的较大者。

举一个具体的例子，假设有两个相邻的块级元素，分别是div1和div2，它们的CSS样式如下：

div1 {
  margin-bottom: 20px;
}

div2 {
  margin-top: 30px;
}

在正常情况下，div1和div2之间的垂直间距应该是20px+30px=50px。然而，因为它们的边距之和超过了一定的阈值，实际渲染结果会取两个边距值中的较大者，即30px，所以div1和div2之间的垂直间距为30px。

这种纵向重叠问题通常出现在嵌套的块级元素中，比如一个列表中的每个列表项（li）都设置了上下边距，而整个列表外又设置了上下边距。当边距值的和超过了阈值时，列表项之间会出现较大的垂直间距，而不是累加所有边距值的和。为了避免这个问题，可以使用其他的方式来实现元素之间的间距，如padding、border等。

4. 谈谈你对BFC的理解和应用

BFC是块格式化上下文 （Block Formatting Context）的缩写，BFC可以看作是一个封闭的容器，容器内的元素布局不会影响到容器外的元素。

形成bfc的条件

条件	描述
根元素	根元素（html）默认就是一个 bfc
浮动元素	浮动元素（float不为none）
绝对定位元素	绝对定位元素（position为absolute和fixed）
display为inline-block、table-cell等	display为inline-block、table-cell等
overflow不为visible	overflow不为visible的块级元素

常见的bfc应用场景：

1. 清除浮动 ：当容器内部有浮动元素时，容器的高度会塌陷，不会撑开容器。我们可以通过创建一个BFC来清除浮动，使得容器能够正常显示高度。可以通过给容器设置overflow: hidden或者display: table来创建BFC。

2. 防止外边距合并 ：在正常流布局中，相邻的块级元素的垂直外边距会发生合并，导致元素之间的间距变大。但是在BFC中，相邻块级元素的垂直外边距不会合并。可以通过给元素创建BFC来防止外边距合并，可以通过设置float、position: absolute、overflow: hidden等属性来创建BFC。

3. 实现多列布局 ：BFC可以实现多列布局，通过给容器设置column-count或者column-width属性，可以将容器内的内容按照多列进行布局。由于每一列都处于独立的BFC中，因此列与列之间的布局互不影响。

5. 清除浮动有哪些方式

清除浮动的方式有以下几种：

1. 使用clearfix
   需要在浮动元素的父元素中添加clearfix类，然后通过该类设置clear:both属性来清除浮动。示例代码如下：

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

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

2. 使用空元素添加clear属性
   在浮动元素的父元素中添加一个空元素，然后使用clear属性来清除浮动。示例代码如下：

<div class="clear-float">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div style="clear: both;"></div>
</div>

3. 使用overflow:hidden
   在浮动元素的父元素中设置overflow属性为hidden，可以使父元素自动包含浮动子元素，从而清除浮动。示例代码如下：

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

.float-parent {
  overflow: hidden;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

6. 使用flex布局实现骰子3

效果如下：

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子三点布局</title>
    <style>
      .dice {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .dot {
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
        margin: 2px;
      }

      .dot:nth-child(1) {
        align-self: flex-start;
      }

      .dot:nth-child(3) {
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <div class="dice">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </body>
</html>

主要考察的是交叉轴的align-self属性。

7.position的absolute和relative定位问题

position:absolute使元素的位置相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。使用position:absolute时，可以使用top、bottom、left和right属性来指定元素相对于其定位父元素的偏移位置。绝对定位的元素会完全从正常的文档流中脱离，并且不保留其空间

position:relative则使元素相对于正常文档流进行定位。在使用position:relative时，可以使用top、bottom、left和right属性来指定元素相对于其原始位置的偏移。相对定位不会从元素在正常文档流中的位置中删除元素。相对定位的元素仍然占据其原始的空间，因此周围的元素不会发生布局变化

为什么常用"子绝父相"进行定位布局？

"子绝父相"是指子元素使用position:absolute进行定位，父元素使用position:relative进行定位的布局方式。这种方式常用于构建复杂的页面布局，具有一些优点：

1. 父元素的position:relative会创建一个新的定位上下文，使得子元素相对于其定位，而不会影响其他元素的布局。
2. 子元素的position:absolute允许完全自由的定位。可以通过指定top、bottom、left和right属性来控制子元素在父元素中的精确位置。
3. 可以方便地创建重叠和层叠效果，使得布局更加灵活。

举个例子，假设我们有以下HTML代码：

<div class="parent">
  <div class="child"></div>
</div>

CSS代码如下：

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  background-color: lightblue;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 50px;
  width: 50px;
  background-color: red;
}

在这个例子中，父元素（class="parent"）被设置为position:relative，这意味着子元素（class="child"）将相对于父元素进行定位。子元素使用position:absolute进行定位，并且设置top和left属性使其与父元素的左上角偏移50像素。

8. 水平居中的实现方式

1. 使用text-align属性：可以在父元素上设置text-align属性为"center"，将其子元素水平居中对齐。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

2. 使用margin属性 ：通过设置子元素的左右margin值为"auto"，可以将其水平居中对齐。

.parent {
  width: 300px;
}

.child {
  margin-left: auto;
  margin-right: auto;
}

3. 使用flexbox布局：使用flexbox布局可以轻松实现水平居中对齐。

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* no additional styling needed */
}

4. 使用grid布局：通过将子元素放置在父元素的中心单元格中，可以实现水平居中对齐。

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

.child {
  /* no additional styling needed */
}

5. 使用绝对定位与transform属性 ：通过将子元素的左右偏移设置为50%并且使用transform属性的translateX(-50%)将其平移回来可以实现水平居中对齐。

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

9.水平垂直居中的实现方式

1. 使用绝对定位和transform属性：

   <div class="container">
     <div class="centered">
       <!-- 内容 -->
     </div>
   </div>
   
   .container {
     position: relative;
   }
   
   .centered {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
   

   将父容器设置为相对定位，然后将子容器设置为绝对定位，通过设置left和top为50%，再使用transform属性将内容向左和向上平移50%的宽度和高度，从而实现水平垂直居中对齐。

2. 使用Flexbox布局：

   <div class="container">
     <div class="centered">
       <!-- 内容 -->
     </div>
   </div>
   
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

   将父容器设置为Flex布局，并使用justify-content: center;和align-items: center;属性使内容在水平和垂直方向上都居中对齐。

3. 设置容器的text-align属性为center，使文本在容器中水平居中

   根据目标元素的高度，调整line-height的值，使得目标元素在容器中垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直居中</title>
    <style>
      .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 1px solid black;
      }

      .target {
        border: 1px solid red;
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="target">居中文本</div>
    </div>
  </body>
</html>

4. 绝对定位加margin:auto 实现
   可以使用绝对定位和margin:auto来实现水平垂直居中，可以按照以下步骤进行操作：

• 父元素需要设置position: relative，用于作为相对定位的基准。
• 子元素需要设置position: absolute，以便于进行绝对定位。
• 子元素设置top: 0，left: 0，bottom: 0，right: 0，这样可以将子元素拉伸至父元素的边界。
• 子元素设置margin: auto，让子元素在父元素中居中。

效果如下:

示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin:auto居中</title>
    <style>
      .parent {
        position: relative;
        width: 600px;
        height: 500px;
        background-color: lightgray;
      }

      .child {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 100px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">垂直水平居中</div>
    </div>
  </body>
</html>

10. line-height继承问题

1.当父元素的line-height属性设置为具体像素值50px时，子元素会继承父元素的line-height属性值。无论子元素的font-size属性值是多少，它的行高将始终是50px。

例如，假设父元素的line-height设置为50px，子元素的font-size设置为20px，那么子元素的行高也将是50px。

<div class="parent">
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS样式如下：

.parent {
  line-height: 50px;
}

.child {
  font-size: 20px;
}

2.当父元素的line-height属性设置为数值3时，子元素会继承该比例。具体取决于子元素的font-size属性值。

假设父元素的line-height属性值为3，子元素的font-size属性值为16px。那么子元素的行高计算如下：

1. 子元素的行高计算公式是：line-height = 父元素的line-height * 子元素的font-size。
2. 父元素的line-height属性值是3，子元素的font-size属性值是16px，所以子元素的行高计算公式是：line-height = 3 * 16px。
3. 子元素的行高计算结果是48px。
   因此，子元素的行高为48px。这意味着子元素的文本内容将在每行之间保留48px的空白区域。

如下

<div class="parent">
  <p class="child">这是子元素</p>
</div>

CSS代码：

.parent {
  font-size: 20px;
  line-height: 3;
}

.child {
  font-size: 16px;
}

3.当父元素的line-height属性设置为百分比200%时，子元素会继承父元素的line-height属性计算后的结果。具体取决于父元素的font-size属性值。

<style>
    .parent {
        font-size: 20px;
        line-height: 200%;
    }
    .child {
        font-size: 16px;
    }
</style>

<div class="parent">
    <div class="child">子元素的文本内容。</div>
</div>

在上述代码中，父元素的line-height属性值设置为200%（即2倍的字体大小），父元素的font-size属性值为20px。子元素的font-size属性值为16px。

根据继承机制和计算规则：

1. 父元素的line-height属性值会以父元素的font-size属性值为基准进行计算。即父元素的line-height计算结果为20px * 200% = 40px。
2. 子元素会继承父元素的计算后的line-height属性值。因此，子元素的line-height属性值也为40px。

11. rem，em，px

在CSS中，rem、em和px都是用于指定元素大小的单位。

1. rem（根元素相对单位） ：rem单位是相对于根元素（即元素）的字体大小的单位。如果根元素的字体大小为16px，则1rem等于16px。rem单位的主要优势是能够根据根元素的字体大小进行自适应调整，适用于响应式设计。

2. em（相对父元素单位）：em单位是相对于最近的父元素的字体大小的单位。如果父元素的字体大小为16px，则1em等于16px。em单位与rem单位不同之处在于，它是根据父元素的字体大小而不是根元素的字体大小进行计算的。因此，em单位也可以用于实现相对父元素的布局。

3. px（像素单位） ：px单位是像素单位，1px表示屏幕上的一个物理像素，不受其他因素影响。px单位是固定大小的单位，无法根据用户设置进行调整。由于设备显示的物理像素不同，使用px单位可能导致在不同设备上显示不一致的问题。

总结：

• rem单位根据根元素的字体大小进行调整，适用于响应式设计。
• em单位根据父元素的字体大小进行调整，适用于相对布局。
• px单位是固定的像素单位，不受其他因素影响，适用于精确布局。

12. vw和vh

在CSS中，vw（Viewport Width）和vh（Viewport Height）是相对于视口大小的单位。

• vw：1vw等于视口宽度的1%。例如，如果视口的宽度是1000px，那么1vw就等于10px。
• vh：1vh等于视口高度的1%。例如，如果视口的高度是800px，那么1vh就等于8px。

vw 和 vh 单位的用途是根据设备的视口大小（即浏览器窗口大小）来调整元素的尺寸。这对于创建响应式布局非常有用，可以使元素在不同设备和窗口尺寸下保持一致的比例。

例如，如果你希望一个元素的宽度占据视口宽度的 50%，你可以使用以下代码：

.element {
  width: 50vw;
}

同样地，如果你希望一个元素的高度占据视口高度的 30%，你可以使用以下代码：

.element {
  height: 30vh;
}

通过使用 vw 和 vh 单位，你可以创建具有自适应性质的布局，使得网页在不同大小的屏幕上都能良好地展示。