2024年前端面试题HTML+CSS篇

xiaoliyo_

已于 2024-04-28 13:26:50 修改

阅读量902

点赞数 27

分类专栏：面试题文章标签：前端 html css3

于 2024-04-28 13:26:14 首次发布

本文链接：https://blog.csdn.net/xiaoliyo_/article/details/138273494

版权

面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2024年前端面试题HTML+CSS篇

我希望我的解释和答案都是通俗易懂的

HTML部分

canvas和svg

canvas用来绘制图片的，可以保存png和jpg格式，是位图；svg是在HTML里面绘制矢量图
canvas是在画布中进行绘制图片，而这个画布是canvas的一部分，不支持js事件处理；svg是通过dom节点形式插入到页面中，可以通过js事件进行操作
canvas的工作机制是逐像素渲染，svg是操作dom，会有大量的重绘

HTML5离线缓存

首先，要创建一个cache.manifast文件，文件格式如下：

CACHE MANIFEST
# 版本号
CACHE MANIFEST VERSION 1

# 要缓存的资源
CACHE:
index.html
style.css
script.js
image.jpg

# 在浏览器无法连接到服务器时使用的回退页面
FALLBACK:
/ offline.html

# 需要在线检查更新的资源
NETWORK:
*

# 清空缓存并重新下载所有资源的操作
# 注意：该操作会删除所有已缓存的资源
# 如果不需要强制更新，请注释掉该行
# 请谨慎使用
# CACHE MANIFEST VERSION 2

然后在html标签中有一个manifast属性，指向创建好的manifast文件，当用户访问网页的时候会触发manifast文件中的数据进行资源缓存，如：

<html manifest="cache.manifest"></html>

高度塌陷

这个涉及到css了，但我还是决定放在这里
通俗的来说，高度塌陷就是元素脱离了文档流，那怎么解决呢。方法有以下几种：

最简单的就是给元素套一个父级盒子
给父元素设置overflow:hidden
万能清除浮动法（很少用）

HTML5新特性

语义化标签：比如 / 这种，被称作语义化标签，有助于更清晰的定义页面结构、提高可读性和可维护性
响应式设计：新增了media查询
多媒体支持：video和audio

元数据

元数据指用来描述html的数据，提供文档信息，但不会显示在文档上

title标签，定义页面标题
meta标签，设置字符编码，页面描述、关键词、作者
link标签，引入外部文件
base标签，指定页面的默认地址或者默认来源目标

CSS3部分

新增特性

新增选择器：:last-chlid、:nth-chlid、:only-chlid、:first-of-type、:last-of-type等等
新增样式：边框阴影：box-shadow、边框图片：box-image、圆角：border-radius、背景图片属性：background-size等等
新增布局
- flex弹性布局
  display
  flex-direction
  flex-warp
  justify-content
  align-item
  alig-content
  flex
- 栅格布局
  display
  grid-template-columns/grid-template-rows：定义Grid容器的列/行的大小和数量
  grid-gap：定义网格之间的间隔，
  justify-items：定义网格内单元格内容在列方向上的对齐方式
  align-items：定义网格内单元格内容在行方向上的对齐方式
  justify-content：定义网格内单元格在列方向上的对齐方式。
  grid-column-start/grid-column-end/grid-row-start/grid-row-end：定义单个网格元素的起始和结束位置。可以使用具体的数字表示网格线的位置，也可以使用关键字（如span）表示跨越多个单元格。
媒体查询：@media
teanstion过渡
- transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
annimation动画
- animation-name：动画名称
  animation-duration：动画持续时间
  animation-timing-function：动画时间函数
  animation-delay：动画延迟时间
  animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
  animation-direction：动画执行方向
  animation-paly-state：动画播放状态
  animation-fill-mode：动画填充模式
calc函数
- calc函数：用来计算局部固定大小其他区域自适应大小的方法 width: calc( 100% -100px);

隐藏元素

display
opacity（透明度）
overflow：hidden

rem/px/em/vh/vw/%的区别

px是精准像素，em和rem都是相对长度单位，相对于父元素的font-size来决定1rem的大小，%是根据父级元素大小的比例，vw是屏幕宽度的1%，vh是屏幕高度的1%

flex布局属性及说明：

父元素：
flex-direction：决定排列的方向方式（row | row-reverse | column | column-reverse）
flex-wrap：是否允许换行（nowrap | wrap | wrap-reverse）
flex-flow：上面两个属性的简写：默认值是 row nowrap
justify-centent：决定子元素以什么方式对齐（flex-start | flex-end | center | space-between | space-around）
align-items：决定子元素在交叉轴的对齐方式（flex-start | flex-end | center | baseline | stretch）
子元素：
order：排名序号，从0开始
flex-grow：子元素是否放大，占比
align-self：在交叉轴的对齐方式（auto | flex-start | flex-end | center | baseline | stretch）