HTML5和CSS3常见面试题

😊HTML5和CSS3常见面试题

• • • 1.HTML5有哪些新特性？
    • 2.你是如何理解语义化标签的？
    • 3.CSS3有哪些新特性？
    • 4.rem和em的区别是什么？
    • 5.如何实现自适应布局？
    • 6.清除浮动的方法有哪些？
    • 7.伪元素清除的原理是什么？
    • 8.BFC是什么，它可以解决什么问题？

😊各位小伙伴们，本专栏新文章出炉了！！！

---

1.HTML5有哪些新特性？

1. 语义化标签
   1. <aside>定义域页面主要信息相关的辅助信息，如侧边连。
   2. <dialog>定义对话框或子窗口。
   3. <footer>定义页面或节（section）的底部。
   4. <header>定义页面或节的头部。
   5. <main>定义页面的主要内容。
   6. <section>定义文档中的节（section），如章节，页眉或页脚。
2. 媒体支持
   1. <audio>用于嵌入音频文件。
   2. <vadio>用于嵌入视频文件。
3. 表单控制增强，改善用户体验和数据验证。
   1. 新的输入类型：如<input type="email">、<input type="date">等。
   2. 新的属性：如required、pattern、placeholder等。用于表单验证和提示。
   3. <datalist>定义输入字段的建议列表。
   4. <output>定义计算结果的输出。
4. 绘图与动画
   1. <canvas>用于绘制图形和动画，结合JavaScript使用。
   2. <svg>用于嵌入可缩放的矢量图形。
5. 本地存储（LocalStorage和SessionStorage）
6. WebSocket
7. Web Workers（允许在后台线程中执行JavaScript脚本，避免阻塞用户界面）

2.你是如何理解语义化标签的？

语义化标签是指具有明确含义和用途的HTML标签。使用语义化标签有助于提高代码的可读性和可维护性，并且能提升网站的SEO（搜索引擎排名）排名和无障碍访问。

3.CSS3有哪些新特性？

1. 选择器增强（属性选择器、伪类选择器、伪元素选择器、通用兄弟元素选择器、相邻兄弟选择器）
2. 圆角属性（border-radius）
3. 盒阴影（box-shadow）
4. 渐变背景（linear-gradient、radial-gradient）
5. 过渡（transition）
6. 动画（animation）
7. Flexbox布局
8. Grid布局
9. 媒体查询（@media是响应式设计的核心）
10. 自定义字体（@font-face）
11. 透明度
12. 变形（transform）
13. 计算（calc用于计算长度、频率、角度、时间等属性）
14. 多列布局（column-count）

4.rem和em的区别是什么？

rem和em都是用来设置字体大小或其他长度单位的相对单位，但是它们相对于不同的基点。

em

em是相对于父元素的字体大小，如果一个元素没有明确的父元素，那么他会相对于根元素html的字体大小。当应用于非字体大小的属性时（如边距），em单位仍然相对于父元素的字体大小。

rem

rem是相对于根元素html的字体大小。使用rem设定的尺寸不会受到父元素字体大小的影响。

/* 设置根元素字体大小 */
html {
  font-size: 16px;
}

/* 使用rem设置 */
p {
  font-size: 1rem;
  /*等于16px*/
}

/* 使用em设置 */
div {
  font-size: 1em;
  /*默认情况下也等于16px*/
}

/* 如果div有一个父级元素设置了字体大小 */
div.parent {
  font-size: 20px;
}

/* 此时子元素使用em单位 */
div.child {
  font-size: 1em;
  /*现在就等于20px*/
}

5.如何实现自适应布局？

1. 媒体查询

媒体查询是根据不同的设备特性（如视口宽度、分辨率等）然后应用不同的样式规则。

/* 默认样式 */
body {
  font-size: 16px;
}

/* 屏幕宽度小于600像素时的样式 */
@media screen and (max-width:600px) {
  body {
    font-size: 14px;
  }
}

/* 屏幕宽度大于等于600像素且小于900像素时的样式 */
@media screen and (min-width:600px) and (max-width:900px) {
  body {
    font-size: 15px;
  }
}

/* 屏幕宽度大于等于900像素时的样式 */
@media screen and (min-width:900px) {
  body {
    font-size: 16px;
  }
}

2. 流式布局

流式布局使用百分比或视口单位（vw/vh）来定义宽度和高度，使布局可以根据容器的大小自动调整。

.container {
  /* 宽度为容器宽度的90% */
  width: 90%;
  /* 居中 */
  margin: 0 auto;
}

.column {
  /* 浮动并排显示 */
  float: left;
  /* 每列占据容器的一半 */
  width: 50%;
}

3. FlexBox布局

FlexBox提供了灵活的方式来排列、对其和分配空间给元素。

.container{
  /* 使用Flexbox布局 */
  display: flex;
  /* 元素超出容器时换行 */
  flex-wrap: wrap;
  /* 水平方向上均匀分布剩余空间 */
  justify-content: space-between;
}

.item{
  /* 自动增长、收缩系数和初始宽度 */
  flex: 1 0 30%;
  /* 最大宽度限制 */
  max-width: 300px;
}

4. Grid布局

CSS Grid布局属于二维网格布局，此布局方式使得控制元素的位置和大小变得更加容易。

.container{
  /* 使用Grid布局 */
  display: grid;
  /* 自动填充列 */
  grid-template-columns: repeat(auto-fill,minmax(200xp,1fr));
  /* 列间距 */
  grid-row-gap: 10px;
}

.item{
  /* 项目列表 */
}

5. 视口单位（如vw、vh、vmin、vmax等根据视口的大小来定义高宽）
6. 第三方UI框架（如Bootstrap）

6.清除浮动的方法有哪些？

清除浮动是为了避免由于元素浮动导致的布局问题。当一个元素浮动时，他会被移除正常的文档流，可能会导致周围元素重叠或者布局错乱。清除浮动的目的是为了确保后续元素能够正常地出现在浮动元素之后，而不是被浮动元素影响布局。

1. 使用**clear**属性

可以在元素上使用clear属性来指定该元素的哪一侧不允许有浮动元素。常用的值有left、right、both

.clear{
  clear: both;
}

2. 使用**overflow**属性

通过设置overflow属性为auto或者hidden，可以使包含浮动元素的父容器重新获得高度，从而包裹住浮动元素。

.container{
  overflow: auto;
}

3. 使用**::after**伪元素

这种方法被称为clearFix技巧。目的是在包含浮动元素的父容器之后插入一个空的内容，并设置clear:both或display:block来清除浮动。

<style>
  .clearfix{
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="clearfix">
  <div style="float: left;">左侧浮动元素</div>
  <div style="float: right;">右侧浮动元素</div>
</div>

4. 使用Flexbox

在使用Flexbox布局的情况下，通过将父容器设置为display:flex来避免浮动的问题。

.container{
  display:flex;
  flex-direction:row;
}

5. 使用Grid布局

在使用Grid布局的情况下，通过设置display:grid创建网格容器，并通过定义网格行和列来安排子元素的位置，避免了元素的浮动。

.container{
  display:grid;
  grid-template-column:repeat(3,1fr);
}

6. 使用**display:table**或**display:table-cell**

将包含浮动元素的父容器设置为表格行或表格单元格，也可以清除浮动。

.container{
  display:table-cell;
}

7.伪元素清除的原理是什么？

伪元素清除浮动的原理是利用CSS伪元素::before或::after在包含浮动元素的父容器后面插入一个内容为空的伪元素，并对该伪元素应用clear:both属性，确保这个伪元素不会与任何浮动元素重叠，并且使的包含浮动元素的父容器能够正确地包裹住这些浮动元素。

8.BFC是什么，它可以解决什么问题？

BFC（Block Formatting Context，块格式上下文）是一个用于描述CSS布局中块级元素如何相互作用的术语。当一个元素被创建为BFC时，它内部的元素布局不会影响外部的元素，反之亦然。BFC可以有效的隔离元素的布局，从而解决一些常见的布局问题。

BFC的特点

• 垂直方向上的元素不会互相影响：例如，一个元素的浮动影响到了另一个元素的位置，可以创建一个BFC来隔离这种影响。
• 水平方向上的元素不会互相影响：例如，当一个元素的浮动影响到另外一个元素的宽度时，可以创建BFC来隔离影响。
• 浮动元素不会影响BFC内的元素：一个元素是浮动的，那么它是不会影响到同一个BFC内的其他元素位置的。
• BFC内的元素不会影响外部元素：一个元素的浮动并不会影响到另一个BFC内的元素。
• BFC可以包含浮动元素：一个元素被创建为BFC后，可以包含浮动元素，并且这些浮动元素不会影响到BFC外部的其他元素。
• BFC内的块级元素的高度会包含其子元素的浮动：如果一个块级元素内部有浮动元素，那么这个块级元素的高度会自动拓展到包含所有的浮动子元素。

创建BFC的方法

1. 使用overflow属性

当overflow的值为auto、scroll或hidden时，该元素会创建一个新的BFC。

.bfc{
  /* 或者auto、scroll */
  overflow:hidden;
}

2. 使用display属性

当display的值为table、inline-block或flex时，该元素也会创建一个新的BFC。

.bfc{
  /* 或者inline-block、flex */
  display:table;
}

3. 使用position属性

当position的值为absolute或fixed时，该元素也会创建一个新的BFC。

.bfc{
  /* 或者fixed */
  position:absolute;
}

4. 使用float属性

当float属性为left或right时，该元素也会创建一个新的BFC。

.bfc{
  /* 或者right */
  float:left;
}

BFC解决的问题

• 清除浮动

当一个元素内部有浮动元素时，如果不进行清除，该元素的高度可能会塌陷（即不包含浮动元素）。通过创建BFC，可以自动包含浮动元素，从而使父元素的高度正确。

• 防止元素重叠

如果一个元素内部有浮动元素，这些浮动元素可能会影响其他元素的位置，通过创建BFC，可以隔离这种影响。

• 控制元素的布局

在某些情况下，需要控制元素的布局，例如，使一个元素在另一个元素的下方，而不是在旁边。通过创建BFC，可以实现这样的布局。

---

🎨觉得不错的话记得点赞收藏呀！！🎨

😀别忘了给我关注~~😀