H5、CSS3面试题，带走不用谢

H5篇

 

新特性、移除了哪些元素？如何处理新标签兼容？

新特性

1. 语义化标签，header、nav 、footer、section、aside、dialog
2. 增强型表单，Input新增date、email、color、number、tel类型
3. 视频和音频
4. Canvas绘图
5. 本地存储，sessionStorage、localStorage
6. WebSocket

移除的元素

<font> 字体标签

<center> 水平居中

<u> 下划线

<big> 大字体

新标签兼容方案

1. 通过js动态创建新标签，实现兼容
2. 使用h5框架, Bootstrap、MUI、uni-app等，实现兼容

 

标签语义化

1. 便于阅读以及维护
2. 结构更清晰，便于浏览器、搜索引擎解析
3. 便于爬虫爬取，有利于SEO

 

离线储存

localStorage长期存储，浏览器关闭后数据不丢失

sessionStorage会话存储，当前页关闭后自动删除

 

 cookie,localStorage,sessionStorage三者区别

1. cookie 数据可在浏览器和服务器间来回传递，而sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
2. cookie大小不超过 4k，sessionStorage 和 localStorage可达到5M或更大
3. cookie在设置的过期时间之前一直有效，即使窗口或浏览器关闭；sessionStorage在当前窗口关闭后自动删除，localStorage除非主动删除数据

 

cookie和session区别

1. 存放位置不同，cookie数据存放在客户端，session数据放在服务端
2. 安全性能不同，session比cookie更安全
3. 存储大小不同，cookie不能超过4K，而session存储在服务端，浏览器对其无限制

 

实现浏览器多个标签页的通信

1. websocket
2. 调用localstorge、cookies等本地存储方式

 

盒模型

浏览器将元素解析成一个个具有空间大小的盒子，包含content、padding、border、margin四部分

 

 

C3篇

 

新增伪类

nth-child，子元素选择器

first-of-type，选择其父元素的首个元素

last-of-type，选择其父元素的最后元素

enabled、disable，表单控件的禁用状态

checked，单选框或复选框被选中

 

元素垂直水平居中

1. 先absolute定位，left、top都设为50%，再margin设定宽高一半的负值，可用来居中浮动元素
2. 先absolute定位，left、top、bottom、right都设为0，再margin：auto
3. 先absolute定位,，left、top都设为50%，再设置偏移量transform: translate(-50%, -50%)

 

图片等比缩放

img设置max-width: 100%;max-height: 100%

 

flex常用属性

flex-direction，值row、column等，决定主轴方向

justify-content，值flex-start、flex-end、center等，决定主轴对齐方式

align-items，值flex-start、flex-end、center等，决定交叉轴上对齐方式

 

display: none与visibility: hidden区别

display：none不显示对应的元素，在文档布局中不再分配空间（重排+重绘）
visibility：hidden隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

 

清除浮动方式

1. 在结尾处添加空标签，再clear:both（不推荐）
2. 父级元素定义overflow:hidden（不推荐）
3. 使用after伪元素清除浮动（推荐）
4. 使用before和after双伪元素（推荐）