首页 > 其他分享 >前端

前端

时间:2023-11-02 21:56:11浏览次数:33  
标签:前端 元素 visibility link import hidden display

css sprite是什么,有什么优缺点

概念:
将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点:
1、减少HTTP请求数,极大地提高页面加载速度
新版,
2增加图片信息重复度,提高压缩比,减少图片大小
3、更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现

 

缺点:
图片合并麻烦
编程: 得取少
维护麻烦,修改一个图片可能需要从新布局整个图片,样式

 

display: none;与visibility: hidden;的区别
联系:它们都能让元素不可见
区别:

1、display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
2.display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示; visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
3修改常规流中元素的 display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
4、读屏器不会读取display; none;元素内容;会读取visibility: hidden;元素内容

 

link 与@import的区别

1 link 是HTML方式, @import是 CSS方式

2、link 最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC
3、-link可以通过rel="alternate stylesheet"指定候选样式
4、浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式
5、@import必须在样式规则之前,可以在css文件中引用其他文件
6、总体来说: link 优于@import

标签:前端,元素,visibility,link,import,hidden,display
From: https://www.cnblogs.com/1011-zslnb/p/17806413.html

相关文章

  • 前端基础之JavaScript
    前端基础之JavaScriptJavaScript概述ECMAScript和JavaScript的关系1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称......
  • 面试题: 前端处理滚动穿透这个顽疾
    诚如你所知:滚动穿透是指在移动端滑动页面的过程中,页面滚动受到了触摸事件的干扰,导致无法流畅地滚动,这主要是由于事件冒泡造成的。解决方法如下:监听touchmove事件,阻止默认行为监听touchmove事件,阻止事件的默认行为,防止事件冒泡到父元素上。禁止滚动可以通过over......
  • Docker打包前端vue代码推送镜像到远程仓库
    Docker打包前端vue代码推送镜像到远程仓库目录Docker打包前端vue代码推送镜像到远程仓库业务场景:......
  • 前端歌谣的刷题之路-第六十七题-this指向
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 前端歌谣的刷题之路-第六十八题-js动态创建节点
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 前端package文件依赖版本号^符号
    在`package.json`文件中,版本号前面的`^`符号表示允许自动更新到当前主版本号下的次版本号。例如,如果当前主版本号是1,次版本号是0,那么`^1.0.0`将允许安装`1.x.x`范围内的任何版本,但不会安装2.x.x或更高版本的包。......
  • 纯前端实现图片验证码
    前言之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的,想了下,前端其实可以直接canvas实现,减轻服务器压力。实现子组件,允许自定义图片尺寸(默认尺寸为100*40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调用(......
  • 后端处理一个较大的json文件返回数据给前端太慢该如何优化?
    要优化后端处理较大JSON文件并提高返回数据给前端的速度,可以尝试以下几种方法:优化数据库查询:如果你的后端从数据库中提取数据并将其转换为JSON格式,可以优化数据库查询来提高效率。确保使用适当的索引和优化查询语句。逐步加载数据:将大型JSON文件分割成较小的块,并使用分页或滚动加载......
  • overflow溢出属性 前端基础之JavaScript
    今日内容详细overflow溢出属性visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪,并且其余内容是不可见的。scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。●over......
  • 如何在 Web 前端做 3D 音效处理
     一、背景在社交元宇宙、大逃杀等类型的游戏场景下,用户在通过简单语音交流外,结合场景也需要一些立体声效果来让用户感知游戏角色周围其他用户的存在及其对应的距离和方位,提高语音互动的趣味性。为了满足上述需求 ZEGOExpressWebSDK 从 v2.10.0(Native为v2.11.0)开始加入范......