HTML+CSS的小知识
文章平均质量分 59
前端碎碎念
请相信,这世界上真的有人过着你想要的生活;
愿你我既可以朝九晚五,又可以浪迹天涯;
最后,祝大家头发旺盛(笑脸)
展开
-
CSS小知识
box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。原创 2024-03-05 14:35:40 · 560 阅读 · 0 评论 -
js和css阻塞问题
- css 加载会不会阻塞 js 的加载?(不会)- css 加载会不会阻塞 js 的执行?(会)- css 加载会不会阻塞 DOM 的解析?(不会)- css 加载会不会阻塞 DOM 的渲染?(会)- js 加载会不会阻塞 DOM 的解析?(会)- js 加载会不会阻塞 DOM 的渲染?(会)- js 执行会不会阻塞 DOM 的解析?(会)- js 执行会不会阻塞 DOM 的渲染?(会)原创 2024-03-04 18:11:25 · 557 阅读 · 0 评论 -
CSS堵塞和JS堵塞
CSSJS。原创 2024-02-01 14:13:05 · 422 阅读 · 0 评论 -
移动端1px问题
在以前,css的1px就是物理像素1px,但是由于现在手机屏幕变为高清屏幕,屏幕尺寸没变,但是像素点变多了,导致CSS 中的 1px 并不能和移动设备上的 1px 划等号。:window.devicePixelRatio = 设备的物理像素 / CSS像素,意味着css中写的。,实际展示2个物理像素,看起来会粗一点。原创 2024-01-30 11:42:51 · 367 阅读 · 0 评论 -
实现一个比12px更小的字体,设置一个0.5px的边框
【代码】实现一个比12px更小的字体,设置一个0.5px的边框。原创 2024-01-30 11:33:47 · 341 阅读 · 0 评论 -
position sticky VS positon fixed, width:100% VS width:auto
所以,在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时,它将尽可能努力保持元素与其父容器的宽度相同。而width:100%将使元素与父容器一样宽。额外的间距将添加到元素的大小,而不考虑父元素。原创 2024-01-30 11:32:00 · 341 阅读 · 0 评论 -
GPU 和 CSS 硬件加速
将需要进行动画的元素提升到一个独立的层(layer),这样就可以避免浏览器进行重新布局(Reflow)和绘制(Repaint),将原先的浏览器使用CPU绘制位图来实现的动画效果转为让GPU使用图层合成(composite)来实现,如果两张图层内部没有发生改变,浏览器就不再进行布局和绘制,直接使用GPU的缓存来绘制每个图层,GPU只负责将各个图层合成来实现动画,这就可以充分利用GPU的资源和优势,减轻CPU的负载,可以使动画更流畅。最好的做法是对那些可能动画的元素设置属性,并在动画结束后就移除这个属性。原创 2024-01-30 11:29:03 · 522 阅读 · 0 评论 -
图片懒加载实现方案
和方案2大同小异,只是浏览器提供了getBoundingClientRect这个方法,是的计算更加方便了。:元素相对于其父元素的顶部内边距的距离。:浏览器可视窗口的高度。:可视窗口滚动过的距离。上述方法的测试实例为。原创 2023-11-16 20:42:45 · 107 阅读 · 0 评论 -
关于flex那些事儿
flex原创 2023-02-13 10:05:25 · 130 阅读 · 0 评论 -
js和css实现动画
js实现动画1、实现方式requestAnimationFrame:将执行动画的每一步传到requestAnimationFrame中,在每次执行完后进行异步回调来连续触发动画效果。setTimeout和setInterval+css改变(导致页面频繁性重排重绘,消耗性能)2、优点:JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaS原创 2022-03-22 21:02:10 · 117 阅读 · 0 评论 -
层叠上下文
HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。形成条件:(z-index不为auto)position除static之外所有值都可以(absolute、fixed、relative、sticky)根html元素grid、flex容器的子元素opacity 属性值小于 1 的元素transform不为nonefilter不为noneisolation: isolat.原创 2022-03-14 14:31:47 · 116 阅读 · 0 评论 -
关于鼠标USB插入电脑后,滚动条的变化
原本的样子:插入鼠标之后:overflow: hiddle至此很疑惑,工作中遇到的一个bug,还正在修正中原创 2020-07-16 15:21:11 · 231 阅读 · 0 评论 -
单页面和多页面
单页面SPA指的是项目中有一个整体的框架,页面跳转是使用js来进行局部跳转。优点:页面切换快,缺点:首屏速度慢,由于要加载必须的js,css导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)SEO(搜索引擎优化)差应用场景经常切换页面的场景和数据传递较多,多表单的场景,常用于PC端官网、购物等网站多...原创 2018-10-04 14:33:18 · 516 阅读 · 1 评论 -
关于圣杯模式和双飞翼模式
实现结果:左右俩边宽固定,中间自适应,中间要先渲染。但二者的实现方式不一样圣杯中间是自适应实现过程详解:1、设置三个div作为中间,左边,右边布局。由于要求middle(中间)先渲染,则将middle写在前面,并将基本样式写好,元素左浮动。 <style> .div{ height: 100px; fl...原创 2019-03-28 11:57:49 · 508 阅读 · 0 评论 -
绝对定位和相对定位
绝对定位当position设置为absolute时,就是绝对定位。会脱离文档流,相对于有相对定位或者绝对定位的父元素相对定位position设置为relative时,就是相对定位相对于原来的位置进行定位,不会脱离文档流,也不影响其他元素的定位...原创 2019-07-31 20:07:51 · 351 阅读 · 0 评论 -
两列等高
左右两列布局,左右内容不一样多,但是想要高度相同,怎么做呢?比如下面的,想要左右等高。<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title...原创 2019-09-10 11:22:29 · 231 阅读 · 0 评论 -
css3知识总结
css3新属性transition 浏览器的内核前缀 -webkit-transition 老版chrome和 Safari -moz-taransition 老版的firfox -o-transition 老版的orear trasition标准的写在最后 WebkitTransit...原创 2018-08-08 21:37:05 · 126 阅读 · 0 评论