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;}
}
  1. 流式布局

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

.container {/* 宽度为容器宽度的90% */width: 90%;/* 居中 */margin: 0 auto;
}.column {/* 浮动并排显示 */float: left;/* 每列占据容器的一半 */width: 50%;
}
  1. FlexBox布局

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

.container{/* 使用Flexbox布局 */display: flex;/* 元素超出容器时换行 */flex-wrap: wrap;/* 水平方向上均匀分布剩余空间 */justify-content: space-between;
}.item{/* 自动增长、收缩系数和初始宽度 */flex: 1 0 30%;/* 最大宽度限制 */max-width: 300px;
}
  1. Grid布局

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

.container{/* 使用Grid布局 */display: grid;/* 自动填充列 */grid-template-columns: repeat(auto-fill,minmax(200xp,1fr));/* 列间距 */grid-row-gap: 10px;
}.item{/* 项目列表 */
}
  1. 视口单位（如vw、vh、vmin、vmax等根据视口的大小来定义高宽）
  2. 第三方UI框架（如Bootstrap）

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

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

  1. 使用**clear**属性

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

.clear{clear: both;
}
  1. 使用**overflow**属性

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

.container{overflow: auto;
}
  1. 使用**::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>
  1. 使用Flexbox

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

.container{display:flex;flex-direction:row;
}
  1. 使用Grid布局

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

.container{display:grid;grid-template-column:repeat(3,1fr);
}
  1. 使用**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;
}
  1. 使用display属性

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

.bfc{/* 或者inline-block、flex */display:table;
}
  1. 使用position属性

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

.bfc{/* 或者fixed */position:absolute;
}
  1. 使用float属性

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

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

BFC解决的问题

  • 清除浮动

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

  • 防止元素重叠

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

  • 控制元素的布局

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


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

😀别忘了给我关注~~😀

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/58536.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

17. 从尾到头打印链表

17. 从尾到头打印链表

文章目录 QuestionIdeasCode Question 输入一个链表的头结点&#xff0c;按照 从尾到头 的顺序返回节点的值。 返回的结果用数组存储。 数据范围0≤链表长度 ≤1000。 样例 输入&#xff1a;[2, 3, 5] 返回&#xff1a;[5, 3, 2] Ideas 直接遍历链表&#xff0c;然后倒序…
阅读更多...
Games101 05~06 - Raterization 光栅化

Games101 05~06 - Raterization 光栅化

1.Viewport Transformation视口变换&#xff1a; 1.1Canonical Cube 之前我们通过MVP矩阵把物体坐标变换到正方体中&#xff08;每个顶点的x&#xff0c;y&#xff0c;z坐标都应该在-1.0到1.0之间&#xff09;也被称为裁剪空间clip space&#xff0c;接下来我们需要将该空间映…
阅读更多...
为Meta Spark准备3D模型

为Meta Spark准备3D模型

有许多工具可以帮助你为 Meta Spark Studio 创建 3D 对象&#xff0c;包括 Cinema4D、Blender 和 3ds Max。你还可以使用 Meta Spark Toolkit 优化 Blender 对象。 在本指南中&#xff0c;我们将介绍正确的设置&#xff0c;以便你可以成功地为 Meta Spark Studio 准备对象&…
阅读更多...
shodan7，shodan参数使用，常用端口，Google语法

shodan7，shodan参数使用，常用端口，Google语法

参数使用 alert shodan alert -h(查看帮助文档 这个就是怎么去配置ip监控)我们能在web页面上面去做&#xff0c;而且更加方便&#xff0c;所以就不多讲了 info shodan info(查看你查询的扫描的一些次数每个账户都是每个月有限制次数的)domain shodan domain(查询域名信息…
阅读更多...
MATLAB/Simulink学习|在Simulink中调用C语言-04使用C Function 实现PI运算(使用模块自定义代码-仿真自定义代码)

MATLAB/Simulink学习|在Simulink中调用C语言-04使用C Function 实现PI运算(使用模块自定义代码-仿真自定义代码)

在上一篇博客中&#xff0c;介绍了如何使用C Function 实现PI运算&#xff0c;但是在模块内编辑C代码&#xff0c;而不能直接调用已经写好了的C代码。 在Simulink中使用C Function调用自定义代码有两种方法&#xff0c;本篇博客介绍其中一种方法。 添加头文件和源文件 在实际…
阅读更多...
博图V19的DB块，批量导入组态王

博图V19的DB块，批量导入组态王

最近在使用组态王做一个厂区的DCS项目&#xff0c;plc选用西门子1500系列。一共用了3个1500&#xff0c;5个io站点。整个项目下来&#xff0c;点位大约有5000多个。把这5000多个点位&#xff0c;一个一个导入到组态王&#xff0c;无疑是一个非常非常非常难受的工作&#xff0c;…
阅读更多...
✨云桥计划✨

✨云桥计划✨

✨云桥计划✨ 希望通过本计划&#xff0c;可以达成网络&#xff0c;以此为桥。 现阶段开放收集到的公开链接~ 您可以通过分享扩大的网络~ 数据库下载&#xff08;不定时更新&#xff09; SHA1: - Records: - Update: 暂无 机器人接入 相关工具 使用 数据提交接口 开发 appi…
阅读更多...
Kafka相关API开发

Kafka相关API开发

(一)引入依赖 用API直接去操作kafka(读写数据)在实际开发中用的并不多&#xff0c;学习它主要还是为了加深对Kafka功能的理解。kafka的读写操作&#xff0c;实际开发中&#xff0c;是通过各类更上层的组件去实现。而这些组件在读写kafka数据时&#xff0c;用的当然是kafka的jav…
阅读更多...
微信小程序生成海报 / 两张图片合并生成一张

微信小程序生成海报 / 两张图片合并生成一张

一张背景图&#xff0c;一个二维码&#xff0c;生成一张全屏海报&#xff0c;二维码位于右下角&#xff08;二维码位置可以调整&#xff09; 方法思路&#xff1a;使用微信小程序的canvas组件 1、获取canvas组件定义一个canvas上下文 2、获取设备信息&#xff0c;将设备宽高…
阅读更多...
linux离线安装Ollama并完成大模型配置（无网络）

linux离线安装Ollama并完成大模型配置（无网络）

这篇文章主要分享两方面内容&#xff1a; 1&#xff09;在纯内网环境下如何部署ollama 2&#xff09;在纯内网环境下如何配置大模型 话不多说直接开始。 ①离线部署ollama 一、通过浏览器访问ollama官方安装脚本&#xff0c;获取脚本内容。复制里面的内容。 在Linux中执行…
阅读更多...
Centos安装配置Jenkins

Centos安装配置Jenkins

下载安装 注意&#xff1a;推荐的LTS版本对部分插件不适配&#xff0c;直接用最新的版本&#xff0c;jenkins还需要用到git和maven&#xff0c;服务器上已经安装&#xff0c;可查看参考文档[1]、[2]&#xff0c;本次不再演示 访问开始使用 Jenkins 下载jenkins 上传至服务器…
阅读更多...
【java数据结构】二叉树

【java数据结构】二叉树

【java数据结构】二叉树 一、 认识二叉树1.1 二叉树的概念1.2 二叉树的特性&#xff1a;1.3 两种特殊的二叉树&#xff1a;1.4 二叉树的性质&#xff1a;1.5 二叉树的存储&#xff1a; 二、 实现二叉树2.1 二叉树节点的定义&#xff1a;2.2 二叉树的基本操作&#xff1a;获取树…
阅读更多...
智源推出小时级超长视频理解大模型Video-XL

智源推出小时级超长视频理解大模型Video-XL

北京智源人工智能研究院联合上海交通大学、中国人民大学、北京大学和北京邮电大学等高校推出了一款名为Video-XL的超长视频理解大模型。这款模型是多模态大模型核心能力的重要展示&#xff0c;也是向通用人工智能&#xff08;AGI&#xff09;迈进的关键步骤。与现有多模态大模型…
阅读更多...
LINUX下使用SQLite查看.db数据库文件

LINUX下使用SQLite查看.db数据库文件

目录 1. 安装 SQLite 对于 Debian/Ubuntu 系统&#xff1a; 2.安装完成后操作 打开 SQLite 命令行工具并连接到数据库文件 查看表结构 查询表中的数据 执行其他 SQL 操作 3. 退出 SQLite 命令行工具 4. 使用图形化工具&#xff08;可选&#xff09; 总结 在 Linux 环…
阅读更多...
《链表篇》---两两交换链表中的节点（中等）

《链表篇》---两两交换链表中的节点（中等）

题目传送门 1.定义一个虚拟节点链接链表 2.定义一个当前节点指向虚拟节点 3.在当前节点的下一个节点和下下一个节点都不为null的情况下。 定义 node1和node2。保存当前节点后面两个节点的地址。cur.next node2;node1.next node2.next;node2.next node1;cur node1; 4.返回re…
阅读更多...
Oracle视频基础1.3.4练习

Oracle视频基础1.3.4练习

1.3.4 检查数据库实例启动情况&#xff0c;进程以及进程间通信 ps -ef | grep oracle ipcs启动数据库实例&#xff0c; 用缺省spfilewilson ls -l env | grep ORACLE sqlplus /nolog conn / as sysdba startup shutdown immediate exit clear新创建pfile和spfile指定pfile数…
阅读更多...
图书管理系统汇报

图书管理系统汇报

【1A536】图书管理系统汇报 项目介绍1.用户登录注册功能1. 1用户角色管理2.图书管理功能2.1 添加图书2.2 编辑图书2.3 删除图书 3.图书搜索和筛选3.1 图书搜索3.2 图书筛选 4.图书借阅、图书归还4.1 图书借阅4.2 图书归还 5.用户信息管理5.1上传头像5.2修改头像5.3 修改密码 项…
阅读更多...
MongoDB 部署指南：从 Linux 到 Docker 的全面讲解

MongoDB 部署指南：从 Linux 到 Docker 的全面讲解

一、MongoDB 简介 MongoDB 是一种 NoSQL 数据库&#xff0c;以文档模型存储数据&#xff0c;具备高性能、弹性扩展性和分布式架构等特点&#xff0c;非常适用于高并发和大数据量的场景。本文将从 Linux 和 Docker 环境开始讲解&#xff0c;帮助读者在不同环境下顺利部署 Mongo…
阅读更多...
JetCache启动循环依赖分析

JetCache启动循环依赖分析

问题呈现 项目性能优化&#xff0c;需要将本地内存&#xff08;JVM内存&#xff09;替换为本地Redis&#xff08;同一个Pod中的Container&#xff09;&#xff0c;降低JVM内存和GC的压力&#xff0c;同时引入了JetCache简化和统一使用&#xff08;对JetCache也做了扩展&#x…
阅读更多...
使用二进制安装K8S 多master节点 高可用集群

使用二进制安装K8S 多master节点 高可用集群

目录 1.初始化 1.1 配置静态IP 1.2 配置主机名 1.3 配置hosts文件 1.4 配置主机之间无密码登录&#xff0c;每台机器都按照如下操作 1.5 关闭firewalld防火墙&#xff0c;在xianchaomaster1、xianchaomaster2、xianchaomaster3、xianchaonode1上操作&#xff1a; 1.…
阅读更多...
最新文章

Copyright @ 2022~2023