有志者事竟成，破釜沉舟百二秦关终属楚苦心人天不负，卧薪尝胆三千越甲可吞吴。 📌博主介绍 💒首页:水香木鱼 🛫专栏：邂逅CSS ✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇” 🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。 🔋 小目标: 成为 会设计 、会开发的 “万能钥匙” 📝文章内容 小伙伴们，大家好！又一次和大家见面了，本期木鱼带来的是Cs

前言 在上一篇文章中，我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。 但其实那不是最优解决方案，因为字体文件不止有 TTF 格式，常见的字体格式还有 OTF、WOFF 和 WOFF2 等。 今天，我来总结一下最常见字体格式的相关概念，方便以后在使用的时候可以做出最优选择。 TTF（TrueType Font） TrueType 是由美国苹果公司和微软公司共同开发的一种电脑轮廓字体（曲线描边字）类型标准。 这种类型字体文件的扩展名是 .ttf，类型代码是 t

🎈 中秋快乐 中秋节在即，自古以来，中秋节便有寄托思念故乡、亲人之情、祈盼丰收、幸福之意 中秋节，又称：月节、仲秋节、月亮节、团圆节等 中秋节起源于上古时代，普及于汉代，定型于唐代，盛行于宋朝，是中国 四大传统 节日之一，也是现代国家法定节假日 作为程序员，工作一般都比较辛苦，好不容易有个三天假期，因为疫情很多人都好几年没有跟家人团聚了，正值中秋，作为技术人员，我们可以用自己的代码述说自己的相思之意 如下图所示，我们可以通过前端绘制出 但愿人长久，千里共婵娟 的中秋月

什么是伪类和伪元素 伪类和伪元素是用来修饰不在文档树中的部分伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。伪元素用于创建一些不在文档树中的元素，并为其添加样式。 其实也就是相当于一些特殊的选择器，在特定的情况下触发，css选择器可以选择HTML元素进行某一元素样式的改动。伪类伪元素也相当于此，不过比较特殊罢了。 CSS伪类 伪类用于表示元素的某种状态，主要有操作状态，选择器状态以及表单状态几种 常见的形式是单冒号: 表示伪类。 1.操作

1.定义和用法 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。 2.CSS 语法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; 默认值： 0 1 auto 属性值 3.flex：1代表什么 先看代码 <

平面转换 CSS3中动画效果包括3个部分：过渡（transition）、变形（transform）、动画（animation)。前面学习的CSS过渡（transition）呈现的是一个“过程”，而CSS变形（transform）呈现的仅仅是一个“结果”。 使用transform属性来实现元素的变形效果，变形分为平面转换和空间转换。 语法： transform:属性; 平面转换具有四个属性 属性 功能 translate() 平移 scale() 缩放 sk

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。页面css做图片滑动，滚动，特别是手机端，可能出现卡顿，闪白等情况，解决这些动画卡顿的情况，我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。 如何开启 GPU 加速 CSS 中的以下几个属性能触发硬件加速： transform opacity filter will-change 如果有一些元素不

1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。 <template> <view style="di

一、HTML怎么加载         在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML 标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体。         DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很 大，因为render tree能识别样式，render tree中每个NODE都有

      最近有人私信我 CSS 中的 transition (过渡) 和 transform (动画) 属性，这两个属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。 文章目录： 一：transition 过渡  1.1 transition-property 指定过渡属性  1.2 transition-duration 过渡时间  1.3 t

学习记录： 最近做了个文档相关的系统，其中用到了鼠标右键点击事件的处理，这里做个学习总结。 实现效果如下图所示：思路整理： 1.MenuList ：这数组中放的是显示的内容，我这里给了几个name展示效果，若是后台接口传输数据原理一致。 2.contextmenu.prevent ：这是鼠标右击的点击事件，还有一个oncontextmenu 鼠标右击事件，前者是只有火狐浏览器支持，后者是所有浏览器都支持。菜鸟教程解释链接（菜鸟教程右击事件） 3.openMenu ：自定义的方法，控制台输

前言：我这里只使用了html和css，js没有使用 项目源代码：https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果：   项目准备阶段： 1.准备项目相应的图片素材，设计稿。 2.创建项目: 2.1 项目名字为：xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素         common.css 这个是有公用部分的元素