css
基础
努力学习前端的77
如果文章对你有帮助或有什么差错,请点赞或留言告知
你走的每一步路都算数,保持学习热情能获得最易得的幸福感
展开
-
vue组态实现矩形在画布内移动和缩放
<!-- vue组态实现矩形在画布内移动: --><template> <div id="test" @mousemove="get" :style="{'left':fastartLeft+'px','top':fastartTop+'px'}"> <h1>测试vue组态--实现移动和拖拽</h1> <p>鼠标坐标:</p> <p>原创 2020-11-12 15:08:44 · 1237 阅读 · 0 评论 -
自定义字体包过大,导致页面加载缓慢的问题解决
// 字体包过大,在渲染页面客户端时加载缓慢,导致页面加载缓慢影响用户体验。需要处理字体包:// 1. 转码,使得不受不同浏览器之间的限制 2.压缩:使得加载更迅速// 使用中文字体压缩器:font-spider// 1,npm install font-spider -g全局安装// 2,使用font-spider的话,一定要注意,必须有ttf格式的本地字体文件// 其他格式的字体文件没有没关系,font-spider会自动生成//在线字体转换压缩工具:https://www.fontk原创 2020-11-16 16:44:08 · 4180 阅读 · 0 评论 -
重绘和回流
重绘和回流重绘:回流:重绘:元素样式的改变【元素的宽高,大小,位置不变】会引发浏览器重绘渲染树;回流:元素的大小或位置发生改变,会触发重新布局,导致渲染树重新计算布局和重新渲染。回流一定会触发重绘,重绘不一定会触发回流。重绘和回流会影响性能,因为会增加浏览器负担。所以性能优化考虑,应尽量减少或者避免重绘和回流,所以要尽量减少操作DOM。具体的方法可以是:1,使用vue/react等框架,2,分离读写:需要注意的是,offsetTop,clientTop,scrollTop,getComp原创 2020-11-12 14:28:24 · 299 阅读 · 0 评论 -
纯css实现流向性/动态线条效果
思路:一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子移动demo:css部分:@keyframes mymove { from{left:0px;} to{left:70px;}}.father{background: #748096;border-radius:5px;position: relative;top: 70px;left: -5px;}.moveson {width:20px;height:8px;background:#原创 2020-09-03 16:20:35 · 3326 阅读 · 0 评论 -
CSS Sprites有什么优缺点?什么时候使用?
CSS Sprites: css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;CSS Sprite...原创 2020-04-03 09:46:14 · 149 阅读 · 0 评论 -
鼠标样式:小手箭头帮助忙碌调整移动等
cursor样式效果图css参考链接原创 2020-04-28 15:00:14 · 147 阅读 · 0 评论 -
css选择器,优先级,权重计算
参考权重计算规则第零等:!important, 大过了其它任何设置。第一等:代表内联样式,如: style=””,权值为1000。第二等:代表ID选择器,如:#content,权值为0100。第三等:代表类,伪类和属性选择器,如.content,权值为0010。第四等:代表标签选择器和伪元素选择器,如div p,权值为0001。第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。第六等:继承的样式没有权值。计算规则:!important 和内联样式style都属原创 2020-05-12 11:07:55 · 160 阅读 · 0 评论 -
flex弹性布局0基础理解---属性解读
参考原创 2020-05-12 13:07:36 · 219 阅读 · 0 评论 -
css设置盒子居中
position: absolute;left: 50%;/*先平移50%*/top: 50%;/*平移回来元素宽高的一半*/transform: translate(-50%,-50%);原创 2020-06-03 13:45:17 · 296 阅读 · 0 评论