前端常见面试题总结——HTML和CSS部分（一）

最新推荐文章于 2024-08-23 16:42:59 发布

叶解语

最新推荐文章于 2024-08-23 16:42:59 发布

阅读量233

点赞数

分类专栏：前端面试题

前端面试题专栏收录该内容

6 篇文章

订阅专栏

本文探讨了前端布局技巧，包括多种垂直和水平居中方法，如绝对定位、弹性盒子等。同时，深入介绍了H5新增属性和元素，如contextmenu、contenteditable及<article>、<video>等，提升了网页功能性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.怎么实现垂直居中，水平居中，说出2-3种方式？

方法一：绝对定位 + left：50%，top: 50% + margin-left:(自身宽度的一半),margin-top:(自身高度的一半)

缺点：要自己计算容器的宽高，万一容器的宽高改变还要修改css样式

.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box1 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
}
方法二：绝对定位 + left：50% ，top: 50%+ translate(-50%,-50%)

缺点：兼容性问题，必须要带上兼容性前缀。

.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box2 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法三：绝对定位 + left: 0，right: 0, top: 0, bottom: 0 + margin：auto

.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box3 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
方法四：弹性盒子。给父标签设置属性，display: flex; justify-content: center; align-items: center;

.parent { /*父标签*/
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.box4 {
width: 100px;
height: 100px;
border: 1px solid red;
background: red;
}
方法五：固定定位position:fixed;并设置一个较大的z-index层叠属性值。

.box5 {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
z-index: 999;
}

方法六：要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：

#view-child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
2.H5熟悉吗，H5都有哪些新增属性和新增元素？

H5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。

新增属性如下表（部分）：

新增属性

说明

contextmenu

指定右键菜单。label：菜单项显示的名称，icon：在菜单项左侧显示的图标，onclick：点击菜单项触发的事件

contenteditable

规定是否可编辑元素的内容。值：true/false/inherit

hidden

用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示。

draggable

元素是否可拖拽。值：true/false/auto

data-*

让用户自定义属性的方式来存储数据。

placeholder

占位属性，规定可描述输入字段预期值的简短的提示信息。

required

约束表单元在提交前必须输入值。

pattern

正则属性，约束用户输入的值必须与正则表达式匹配。

autofocus

让指定的表单元素获得焦点。

autocomplete

自动补全属性，会记录用户输入过的内容，双击表单元素会显示历史输入。

novalidate

规定在提交表单时不应该验证 form 或 input 域。

multiple

规定输入域中可选择多个内容。

新增元素如下表：

新增元素   说明
<article>   定义一个文章区域。
<aside>
定义 <article> 标签外的内容。aside 的内容应该与附近的内容相关。

<audio>   定义声音，比如音乐或其他音频流。
<bdi>    允许您设置一段文本，使其脱离其父元素的文本方向设置。
<canvas>    通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<command>   可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
<datalist>    规定了 <input> 元素可能的选项列表。
<dialog>   定义一个对话框、确认框或窗口。
<embed>   定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<figcaption>   为 <figure> 元素定义标题。
<figure>    规定独立的流内容（图像、图表、照片、代码等等）。
<footer>    定义文档或者文档的一部分区域的页脚。
<header>    定义文档或者文档的一部分区域的页眉。
<keygen>   规定用于表单的密钥对生成器字段。
<mark>   定义带有记号的文本。
<meter>    定义度量衡。仅用于已知最大和最小值的度量。
<nav>    定义导航链接的部分。
<output>    作为计算结果输出显示(比如执行脚本的输出)。
<progress>   定义运行中的任务进度（进程）。
<rp>   在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>    定义字符（中文注音或字符）的解释或发音。
<ruby>   定义 ruby 注释（中文注音或字符）。
<section>   定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<source>   为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
<summary>    为 <details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。
<time>   定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
<track>    为媒体元素（比如 <audio> and <video>）规定外部文本轨道。
<video>   定义视频，比如电影片段或其他视频流。
<wbr>      (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。
3.说一下都有哪些本地存储方式，区别是什么？