探究 width:100-percent与width:auto区别
一、 width属性介绍 属性用于设置元素的宽度。 默认设置 的宽度，但如果 属性被设置为 ，就转而设置 的宽度。 二、 话不多说，直接上代码看效果 三、 分析比较 1. 我们给 parent 设置了 内边距，给两个 child 都设置了 的外边距。 child1 的 width 属性是 , child2 的 width 属性是 。 2. 很明显地看到两个child的不同表现，child1的宽度是可以适应的，不会溢出其父元素。 3. c...
UnoCSS给了我一个不用tailwindcss的理由
如果你没有听说过 或者 ，请先 return 先去了解一下😝。 开发上：可能为你甚至你们的前端团队 节省很多写样式的时间 ，也能让你或者你们的项目 开发体验有很大提升 生产上：你们的项目打出来的包体积中的 样式代码占比将突然骤降然后趋于不变 。 书接上回 之前我写过一篇文章 ，极力推荐使用 来提升开发效率和体验，尤其是样式代码的体验会有质的提升。当然样式代码打包体积的减少也可以起到优化我们整体前端项目的作用。但是为什么有这篇文章了呢？...
简述 pt、rpx、px、em、rem、百分比、vh、vw的区别
简述 pt、rpx、px、em、rem、%、vh、vw的区别 设备物理像素 pt：屏幕宽、分辨率，其中每一小份就是1pt。 css 像素 px： pc 机大屏幕显示器，1px约等于0.76个物理像素 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。 px 也是一个相对单位 px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。 手机屏幕大小不一，差异较大，所以反而不希望一个...
什么！一个项目给了8个字体包
在一个新项目中，设计统一了项目中所有的字体，并提供了字体包。在项目中需要按需引入这些字体包。 首先，字体包的使用分为了以下几种情况： 1. 无特殊要求的语言使用字体A，阿拉伯语言使用字体B； 2. 加粗、中等、常规、偏细四种样式，AB两种字体分别对应使用 、 、 、 四种字体包； 所以，我现在桌面上摆着 8 个字体包： 不同语言要使用不同的字体包，不同粗细也要使用不同的字体包！ 还有一个前提是，设计给的设计图都是以字体A为准，所以在 F...
单标签下的日间与黑夜模式切换按钮效果
前不久，在网上看到这么一张非常有趣的图： 想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。 其最终效果大致如下： 原完整代码在这里：[Night && Day Toggle ☀️/🌙 \[Completed It!\]](https://link.juejin.cn?target=https%3A%2F%2Fcodepen.io%2Fjh3y%2Fpen%2FLYgjpYZ "https://cod...
CSS 中哪些属性可继承，哪些不可以
一、能继承的属性 1. 字体系列属性:font、font family、font weight、font size、font style; 2. 文本系列属性: 2.1）内联元素：color、line height、word spacing、letter spacing、 text transform; 2.2）块级元素：text indent、text align; 3. 元素可见性：visibility 4. 表格布局属性：capt...
全面理解 requestAnimationFrame
一、requestAnimationFrame 的定义 官方的定义： <img width="756" height="422" src="../../ resources/c042ff4f7df14417a574db8dd80c0439 2908d126072f492cb.webp" class="jop noMdConv" 即请求动画帧，它是一个浏览器的宏任务。简单的说，这个api主要是用来做动画的。 二、关于前端动画的两个问题 1...
响应式和自适应的区别
<img width="756" height="431" src="../../ resources/17181d7145f042db83cc5da1806d2100 f314cbfd248b49ef9.webp" class="jop noMdConv" 响应式设计（Responsive design） 就是一个网站能够兼容多个终端一而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。 自适应设计（Adapti...
实现响应式布局的五种方式
一、定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的...