HTML5和CSS3常见面试题

😊HTML5 和 CSS3 常见面试题

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

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

---

1.HTML5 有哪些新特性？

1. 语义化标签
   1. 


      定义域页面主要信息相关的辅助信息，如侧边连。

   2. 定义对话框或子窗口。
   3. 


      定义页面或节（section）的底部。

   4. 
      

      定义页面或节的头部。

   5. 定义页面的主要内容。
   6. 
      

      定义文档中的节（section），如章节，页眉或页脚。

2. 媒体支持
   1. 用于嵌入音频文件。
   2. 用于嵌入视频文件。
3. 表单控制增强，改善用户体验和数据验证。
   1. 新的输入类型：如 、 等。
   2. 新的属性：如 required、pattern、placeholder 等。用于表单验证和提示。
   3. 定义输入字段的建议列表。
   4. 定义计算结果的输出。
4. 绘图与动画
   1. 用于绘制图形和动画，结合 JavaScript 使用。
   2. 用于嵌入可缩放的矢量图形。
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;
}


p {
  font-size: 1rem;
  
}


div {
  font-size: 1em;
  
}


div.parent {
  font-size: 20px;
}


div.child {
  font-size: 1em;
  
}

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

1. 媒体查询

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

body {
  font-size: 16px;
}


@media screen and (max-width:600px) {
  body {
    font-size: 14px;
  }
}


@media screen and (min-width:600px) and (max-width:900px) {
  body {
    font-size: 15px;
  }
}


@media screen and (min-width:900px) {
  body {
    font-size: 16px;
  }
}

2. 流式布局

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

.container {
  
  width: 90%;
  
  margin: 0 auto;
}

.column {
  
  float: left;
  
  width: 50%;
}

3. FlexBox 布局

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

.container{
  
  display: flex;
  
  flex-wrap: wrap;
  
  justify-content: space-between;
}

.item{
  
  flex: 1 0 30%;
  
  max-width: 300px;
}

4. Grid 布局

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

.container{
  
  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{
  
  overflow:hidden;
}

2. 使用 display 属性

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

.bfc{
  
  display:table;
}

3. 使用 position 属性

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

.bfc{
  
  position:absolute;
}

4. 使用 float 属性

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

.bfc{
  
  float:left;
}

BFC 解决的问题

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

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

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

---

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

😀别忘了给我关注~~😀