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

简介: 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> 大字体
AI 代码解读

新标签兼容方案

  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双伪元素(推荐)
目录
打赏
0
0
0
0
87
分享
相关文章
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
555 8
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
90 0
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
CSS面试考点:盒模型、选择器、单位和像素概念
【4月更文挑战第2天】 CSS面试考点:盒模型、选择器、单位和像素概念
101 12
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
108 10
CSS常见的面试题以及答案 500字以上
【4月更文挑战第1天】 CSS常见的面试题以及答案 500字以上
78 0

热门文章

最新文章

  • 1
    云计算运维工程师面试技巧
    917
  • 2
    【机器学习】面试问答:PCA算法介绍?PCA算法过程?PCA为什么要中心化处理?PCA为什么要做正交变化?PCA与线性判别分析LDA降维的区别?
    326
  • 3
    【机器学习】面试问答:决策树如何进行剪枝?剪枝的方法有哪些?
    243
  • 4
    【机器学习】SVM面试题:简单介绍一下SVM?支持向量机SVM、逻辑回归LR、决策树DT的直观对比和理论对比,该如何选择?SVM为什么采用间隔最大化?为什么要将求解SVM的原始问题转换为其对偶问题?
    219
  • 5
    【深度学习】Pytorch面试题:什么是 PyTorch?PyTorch 的基本要素是什么?Conv1d、Conv2d 和 Conv3d 有什么区别?
    740
  • 6
    【深度学习】TensorFlow面试题:什么是TensorFlow?你对张量了解多少?TensorFlow有什么优势?TensorFlow比PyTorch有什么不同?该如何选择?
    580
  • 7
    【机器学习】面试题:LSTM长短期记忆网络的理解?LSTM是怎么解决梯度消失的问题的?还有哪些其它的解决梯度消失或梯度爆炸的方法?
    512
  • 8
    【数据挖掘】XGBoost面试题:与GBDT的区别?为什么使用泰勒二阶展开?为什么可以并行训练?为什么快?防止过拟合的方法?如何处理缺失值?
    570
  • 9
    【数据挖掘】 GBDT面试题:其中基分类器CART回归树,节点的分裂标准是什么?与RF的区别?与XGB的区别?
    192
  • 10
    【机器学习】过拟合和欠拟合怎么判断,如何解决?(面试回答)
    1026
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问