CSS
关注
分享
扫一扫
文章平均质量分 60
c
MINO吖
代码就是一门艺术.
展开
-
大屏可视化适配方案
核心思想：动态调整 HTML 根字体大小和 body 字体大小，结合百分比或vw/vh单位，实现容器宽高、字体大小、位移的动态适配。核心思想：通过将像素值（px）转换为视口宽度（vw）和视口高度（vh）来适配不同尺寸的屏幕，实时计算图表尺寸、字体大小等。缺点：在地图、Canvas 等带有交互的组件中，可能会出现点击事件错位问题，需针对性调整。核心思想：根据屏幕宽高比例动态缩放，代码简洁，几行代码即可实现适配。优点：基于比例缩放，能够灵活适应不同分辨率和屏幕尺寸。优点：实现简单，特别适合基本的大屏展示场景。原创 2024-09-11 13:35:38 · 1411 阅读 · 0 评论 -
CSS 实现新拟态(Neumorphism) UI 风格
什么是新拟态(Neumorphism) UI 风格？网上似乎还没有一个准确统一的定义。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」原创 2023-11-14 09:25:28 · 923 阅读 · 0 评论 -
如何使用Javascript实现缓动特效
虽然缓动特效这个词你可能没有听说过，但是绝大部分人都使用过。最典型的场景是在实现动画的过程中，无论是早期的jQuery还是CSS3里的transition，都允许你添加一个缓动特效参数，例如 linear, ease-in, ease-out等等。添加参数的效果就是让物体的变化（速度、大小或者颜色）伴随着一定的节奏，可以是均匀的，也可以是由慢至快的。为什么要研究这件事？因为我在使用Unity编写游戏的过程中需要使物体拟真，例如一辆汽车在移动到目标位置时通常是缓慢启动，随之加速，最后缓慢减速。原创 2023-11-02 13:35:39 · 329 阅读 · 0 评论 -
CSS 纵横比属性：aspect-ratio
aspect-ratio纵横比可以用于计算 auto 尺寸以及其他布局函数。原创 2023-09-13 17:44:54 · 769 阅读 · 0 评论 -
Flex布局使最后一行居左
如何解决在使用flex布局时，最后一行没有居左展示，并产生错位的问题？原创 2022-07-10 14:43:49 · 3752 阅读 · 2 评论 -
CSS下镜像翻转（水平/垂直翻转）
css下镜像翻转两种写法：利用css动画属性rotate旋转来实现：.mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical { transform: rotateX(180deg); /* 垂直镜像翻转 */}此处，rotateY(180deg)这里的 Y 表示元素以Y轴镜像翻转，也即水平翻转；同理，rotateX(180deg)表示以X轴为镜像翻...原创 2021-07-06 10:19:03 · 14863 阅读 · 0 评论 -
父元素设置flex：1；子元素内容过程导致被撑开
<div class="box"> <div class="a"></div> <div class="b"></div></div>.box { display: flex;}.b { flex: 1; }.a {width: 100px;}正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: 0;，就可以解决...转载 2021-05-08 10:28:02 · 2723 阅读 · 0 评论 -
CSS中content可以用到的字符编码
基本形状▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8▣ 9635 25A3标点,特殊符号« 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D‘ 8216 201.原创 2020-12-21 09:55:20 · 1633 阅读 · 0 评论 -
CSS - media query样式不生效，被划掉
问题：@media only screen and (max-width: 1200px) { .car-list { width: 300px; background-color: white; }}.car-list { width: 350px; height: calc(100vh - 80px); display: flex; flex-direction: column; background-color: #01183f; positi原创 2020-11-09 09:46:20 · 1633 阅读 · 0 评论 -
CSS-使用Flex实现元素以宽高比缩放
问题：元素宽度随着浏览器改变时， 高度仍然保持不变，致使内部图片变形；上下padding的值，相对于最近父级的宽2：flex布局，未设置高的具体值的时候，其值等于子级内容最大的高度3: 伪类，content为空，宽高为0，不占据位置，也不产生多余的标签<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css定宽高比 flex + 伪类 + p原创 2020-08-10 20:23:41 · 3104 阅读 · 0 评论 -
CSS position属性
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、posit...原创 2020-04-13 20:06:48 · 245 阅读 · 0 评论 -
使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;...原创 2020-02-02 10:19:31 · 1085 阅读 · 0 评论 -
安装Sass遇到的问题（2019新）
安装Ruby环境这里安装的是Ruby 2.3.3（x64）安装后，启动命令窗口测试是否成功；安装Sass使用命令：gem install sass报错解决方法解决方法：升级你的SSL证书下载 http://curl.haxx.se/ca/cacert.pem 这里把这个文件保存到D:\Program_Files\Ruby23-x64文件夹下 打...原创 2019-04-28 15:36:51 · 397 阅读 · 0 评论