![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
more名奇妙
青山不改,绿水长流。
展开
-
css文本字符的间距、标签单词之间的空格长度、元素行盒(line boxes)的最小高度、块元素首行文本内容之前的缩进量
CSS的属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。的正值会导致字符分布得更远,而的负值会使字符更接近。原创 2022-12-29 11:44:54 · 389 阅读 · 0 评论 -
前端性能优化
等到B运行结束,将结果返回到A,B的调用帧才会消失。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点。注意,只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。尾调用由于是函数的最后一步操作,所有不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。原创 2022-12-28 11:56:51 · 180 阅读 · 0 评论 -
看懂圣杯布局与双飞翼布局
圣杯布局是三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中,中间的部分要写在左右布局之前。当然,这种布局是面向PC端的,移动端由于屏幕宽度较小,不推荐多列布局。原创 2022-10-28 22:14:24 · 165 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号的实现方法
1,单行溢出,超出部分显示...或者截取。前提必须有宽度。2.多行溢出原创 2022-10-28 21:54:14 · 185 阅读 · 0 评论 -
前端rem适配如何具体去使用
rem是CSS3新增的一个相对单位,相对于根元素(html元素)的font-size的倍数。作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值,以此实现当屏幕分辨率变化时让元素也随之变化。rem(倍数) = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )= 网页的实际宽度(screenWidth)/rem(倍数)单位时,设置成相应的百分比即可。,即只需要设置根元素的。原创 2022-10-28 21:50:17 · 366 阅读 · 0 评论 -
css transform导致字体像素模糊的问题解决办法
直接给translate的Y轴偏移设为绝对单位,此时也是不会模糊的,此时不管你元素高度是奇数还是偶数 transform: translate(-50%,-201px);原本字体的父级为列子中的popup-box,我们可以看到该父级是参与定位偏移的,所以才会影响到里面的字体,因此我们让字体套多一层父级即可。偏移元素达到定位的效果,但是相继出现的是,如果元素内部有字体的话,会出现模糊的问题。3.给translate的Y值偏移设为绝对单位。1.给字体加多一个父级。原创 2022-10-28 21:41:18 · 1989 阅读 · 0 评论 -
前端图片上传发现图片倒置解决方案 图片镜像效果实现
scale(scaleX, scaleY):通过在 x 轴乘以 scaleX、在 y 轴乘以 scaleY 来缩放图像。scaleX和 scaleY 的默认值都是 1.0。前端使用canvas将颠倒的图片进行旋转矫正。scale(-1,-1):水平垂直翻转。scale(-1,1):水平翻转。scale(1,-1):垂直翻转。scale(1, 1) :默认。通过scale调整方向即可。通过以下设置可实现图片翻转。原创 2022-10-28 21:21:18 · 622 阅读 · 0 评论 -
transtion和animation的区别
主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from .... to,而animation可以一帧一帧的。原创 2022-10-28 21:14:17 · 723 阅读 · 0 评论 -
css属性选择器*=与~=的区别
=表示这个属性值必须是red不能多也不能少 只能是class="red"才可以选中。*=表示这个属性值包含red就可以 比如class="ared"原创 2022-10-28 21:04:27 · 574 阅读 · 0 评论 -
user-select
浏览器实现之间的区别之一是继承。原创 2022-10-27 22:20:07 · 91 阅读 · 0 评论 -
设置html按钮点击事件失效
pointer-events属性除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。语法:pointer-events:auto| none | visiblepainted | visiblefill | visiblestroke |想要按钮不能点击可以通过设置按钮点击事件失效来实现;而在CSS中,可以使用pointer-events属性来实现点击事件失效。原创 2022-10-27 22:14:58 · 1743 阅读 · 0 评论 -
vue中样式穿透
在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。原创 2022-10-27 21:27:51 · 210 阅读 · 0 评论 -
css 颜色的设置
css 颜色的设置 rgba rgb外还有什么原创 2022-10-19 13:57:12 · 75 阅读 · 0 评论 -
如何减少重绘和重排
浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果,此时是不会出发reflow的。2、尽量减少table使用,table属性变化使用会直接导致布局重排或者重绘。4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。原创 2022-09-27 19:55:52 · 1811 阅读 · 0 评论 -
rem优缺点
(3)rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚,还是为了看的更多的问题。在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,使得在设备上的展现都统一起来了。))表现效果不太好,比如一些华为的高端机型用rem布局会出现错乱。(4)rem在处理小数的时候会有误差,而且对小屏幕不友好。而且现在浏览器基本都已经支持rem了,兼容性也非常的好。(2)使用iframe引用也会出现问题。(1)在奇葩的dpr设备上(原创 2022-09-24 22:10:29 · 965 阅读 · 0 评论 -
实现移动端适配或者和响应式布局
本身设置html字体大小100px(1rem=100px),相对于设计图375px,计算出rem(比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置 width: 6.4rem,又比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置 font-size:0.16rem,从而达到rem适配。设计图是375px,根据设计图和1rem = 375px写出页面 200/375算出比例,因为rem是动态获取的,乘以rem就是相对于当前屏幕大小设置的大小。原创 2022-09-24 21:52:38 · 1291 阅读 · 0 评论 -
vw vh的兼容性 rem的使用
还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px,这样就是html{font-size:62.5%;},而不是html{font-size:10px;}因为浏览器(PC)最小就是12px。这样一来1rem = 10px;rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;一般将html的font-size设置为:20px或30px或50px或100px。浏览器的默认字体高都是16px。原创 2022-09-24 14:11:58 · 269 阅读 · 0 评论