随笔分类 - CSS
摘要：在开发中，如果没有动画的话，整个页面内容的显示和隐藏会非常的生硬！不好看，为了给予一定的用户体验，进入今天的主题 目录 一、Transition组件 1.Transition组件的原理 进入 离开 2、Transition组件中使用transition 代码 效果 说明 3、Transition组件
阅读全文
摘要：Unocss 简单使用首先初始化一个vite项目 使用pnpm安装 pnpm create vite unocss-demo -- --template vue-ts 使用npm 安装 npm init vite@latest my-vue-app -- --template vue 使用yarn
阅读全文
摘要：CSS 样式太多，重复写 在学习 UnoCSS 之前，我提出几个问题： 你是否有过写完了 HTML 之后，跳转到 style 写 CSS 这样来回跳转的痛苦？ 你是否有过不知道如何给节点取类名的痛苦（有的节点确实没啥必要取类名，但就是需要写 CSS）？ 你是否有过管理重复、繁杂、繁多的 CSS 而痛
阅读全文
摘要：🔖 好玩的 CSS - 40 个有趣的 CSS 网站 🌐 基础学习 cssreference.io/ CSS 参考书 chokcoco.github.io/CSS-Inspira… CSS 灵感 www.awwwards.com/sites/zero-… UI 设计师的灵感源泉 htmlchea
阅读全文
摘要：简介 <canvas> 是 HTML5 新出的一个元素用于图形的绘制，但是 <canvas> 只是图形的容器，所有的绘制工作需要在 JavaScript 内部完成。 浏览器 IE8 及以下不支持 <canvas> 标签元素。 创建 canvas 元素 // 设置其 ID 待会通过 JavaScrip
阅读全文
摘要：本文思维导图，欢迎补充 前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。想到哪写到哪，请各位
阅读全文
摘要：有的时候element提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用 第一种方法 原因：scoped 解决方法：去掉scoped 注意：此时该样式会污染全局样式，可以把它放在公共的css里面 为了不让所有的 el-input标签都是该样式，可以在HTM
阅读全文
摘要：在项目中为了避免页面间样式污染常用scoped组件私有化，如果要改变element-ui的样式时需要用样式穿透才可复写样式。 1./deep/ 在vue3.0之前可使用，例如(复写样式前加/deep/)，vue3.0及后使用就会报错 /deep/ .el-input { width: 60px; }
阅读全文
摘要：一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可
阅读全文
摘要：如果你觉得困难，那也许就是在进步 css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一
阅读全文
摘要：@mixin定义@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}12345678父选择器 @mixin clearfix { display: inline-block; &
阅读全文
摘要：操作函数 1、for循环 @for … from … through @for $var from <start> through <end> // 范围包括<start>和<end>的值 1 @for … from … to @for $var from <start> to <end> // 范
阅读全文
摘要：scss自出来之后，广受欢迎，如何能快速写出想要的css呢，可自定义一些scss方法，本人罗列了一些最近用到的scss函数，其实包括文本超出范围的格式化、弹性盒子居中、左浮动、右浮动、鼠标上移样式改变等 1、文本超出范围，显示省略号 /*文本格式化，超出范围，显示省略号*/@mixin textOv
阅读全文
摘要：一、 <li v-for="(chatting,index) in item" :key="index" :class="{'user_right':chatting.user_id}"> 判断chatting中是否有user_id，如果有就追加user_right类名 二、 <p :class="
阅读全文
摘要：背景 在使用弹性布局实现两侧宽度固定，中间宽度自适应的效果时，发现自己理解的和实际效果不一致，所以亲自实践验证了一个flex属性的诸多场景的表现，不仅解开了我之前使用过程遇到的疑惑，而且发现了许多自己以前理解有偏差的地方。第一章节有点绕，第二，三章节结论比较清晰。如果啃不动第一章节，建议直接跳到第二
阅读全文
摘要：一、表格 1、表格标签 a、table 表格 b、thead 表格头 c、tbody 表格主体 d、tr 表格行 e、th 元素定义表头 f、td 元素定义表格单元 2、表格样式重置 a、table{border-collapse：collapse；}单元格间隙合并（默认：separate分隔） b
阅读全文
摘要：今天做开发遇到一个问题，经过努力还是解决了，这次让我认识了div中一个新的属性tabindex，下面结合例子谈一下该属性的作用： 代码1： <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"
阅读全文
摘要：只针对谷歌 width: 100%; //height: 58px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; //三行 -webkit-line-clam
阅读全文
摘要：Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }
阅读全文
摘要：前言：nth-of-type与nth-child的区别，对于初学者来说是一个比较头疼的问题，也是一个初级前端常见的面试题，那么nth-of-type与nth-child有什么区别呢？下面带你彻底弄懂它们之间的区别。 MDN上的概念： 某个元素:nth-of-type(n)这个CSS 伪类是针对具有一
阅读全文
浙公网安备 33010602011771号