zoukankan      html  css  js  c++  java
  • 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- 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双伪元素(推荐)
  • 相关阅读:
    POJ 3261 Milk Patterns (求可重叠的k次最长重复子串)
    UVaLive 5031 Graph and Queries (Treap)
    Uva 11996 Jewel Magic (Splay)
    HYSBZ
    POJ 3580 SuperMemo (Splay 区间更新、翻转、循环右移,插入,删除,查询)
    HDU 1890 Robotic Sort (Splay 区间翻转)
    【转】ACM中java的使用
    HDU 4267 A Simple Problem with Integers (树状数组)
    POJ 1195 Mobile phones (二维树状数组)
    HDU 4417 Super Mario (树状数组/线段树)
  • 原文地址:https://www.cnblogs.com/wx3091/p/12785571.html
Copyright © 2011-2022 走看看