随笔分类 -  css

color主题色相关
摘要：https://cccreate.co/ 生成各种主题色 阅读全文
posted @ 2023-05-19 07:49 kitebear 阅读(15) 评论(0) 推荐(0)
tailwindcss 生产环境按需加载样式原理
摘要：Tailwind CSS 的生产环境按需加载样式，是通过 PurgeCSS 插件和 Webpack 进行实现的。 在 Tailwind CSS 的生产环境构建配置中，会先使用 PurgeCSS 对项目中的 HTML、JavaScript 和 CSS 进行扫描，去除未使用的样式，生成一个经过优化的样式 阅读全文
posted @ 2023-05-19 07:49 kitebear 阅读(857) 评论(0) 推荐(0)
tailwindcss
摘要：语义化 样式复杂 好处：不用思考样式名称 坏处：className会显得非常长 阅读全文
posted @ 2023-05-19 07:48 kitebear 阅读(17) 评论(0) 推荐(0)
Grid简单介绍
摘要：CSS Grid 是一种基于网格的布局系统，用于在网页布局中创建复杂的、多列的、响应式网格。使用 CSS Grid，我们可以快速地创建强大的、灵活的布局，能够完全控制网页布局的行和列，同时还能够处理响应式布局。 在使用 CSS Grid 时，我们需要定义一个网格容器（也就是包含所有网格元素的 HTM 阅读全文
posted @ 2023-05-18 10:35 kitebear 阅读(155) 评论(0) 推荐(0)
Grid去做水平垂直居中
摘要：实现 grid 布局的水平居中和垂直居中可以使用以下两种方式： · 使用 align-items 和 justify-items 属性 可以将 grid 容器设置为网格项目在水平和垂直方向都居中，方法是将 align-items 和 justify-items 属性都设置为 center。例如： . 阅读全文
posted @ 2023-05-18 10:35 kitebear 阅读(4947) 评论(0) 推荐(0)
grid demo1
摘要：当然可以，这里提供一个基本的 CSS Grid 布局的案例。 HTML 部分： <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"> 阅读全文
posted @ 2023-05-18 10:35 kitebear 阅读(33) 评论(0) 推荐(0)
CSS三大特性
摘要：CSS 的三大特性包括： 层叠性（Cascading） 层叠性是指用于控制多个样式定义同时应用到某个元素时，如何决定哪个样式定义将被应用的机制。CSS 样式表中的规则可以根据其特定优先级与其他规则进行层叠，最终得到应用于元素的样式。常用的应用场景有： 通过应用不同的样式类来覆盖或扩展第三方 CSS 阅读全文
posted @ 2023-05-17 06:35 kitebear 阅读(106) 评论(0) 推荐(0)
rem和em区别及使⽤⽅法
摘要：rem和em都是CSS中用于设置字体大小的单位，它们之间的区别如下： rem单位 rem单位表示的是相对于根元素（即html元素）的字体大小。比如，如果html元素的字体大小是16px，那么设置1rem的大小就相当于设置为16px，2rem则相当于32px。因此，rem单位通常被用于响应式设计中，可 阅读全文
posted @ 2023-05-17 06:35 kitebear 阅读(224) 评论(0) 推荐(0)
flex：1表示哪三个属性？
摘要：flex: 1是 flex-grow: 1, flex-shrink: 1, flex-basis: 0 的合并写法。 flex-grow 属性规定项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间，如果一个项目的 flex 阅读全文
posted @ 2023-05-16 10:32 kitebear 阅读(1130) 评论(0) 推荐(0)
CSS选择器有哪些
摘要：CSS选择器是用来选择HTML或XML元素的一种方式，CSS选择器可以根据元素的标签名、类名、ID、属性值等特征进行选择。以下是一些常用的CSS选择器： 标签选择器：使用元素的标签名作为选择器，例如：p、h1、div等。 类选择器：选择具有指定类名的元素，使用“.类名”作为选择器，例如：.demo。 阅读全文
posted @ 2023-05-16 10:31 kitebear 阅读(194) 评论(0) 推荐(0)
重排和重绘
摘要：重排：指的是当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的过程。这个过程比较耗费 CPU 资源，因为它需要三种计算：布局计算、样式计算、分层和绘制计算。重排比重绘的代价更高。 重绘：指的是当渲染树中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不会影响 阅读全文
posted @ 2023-05-15 08:53 kitebear 阅读(83) 评论(0) 推荐(0)
CSS属性兼容写法
摘要：1. 一种是用js判断兼容性 2. 用CSS中的@supports 阅读全文
posted @ 2019-01-14 16:05 kitebear 阅读(736) 评论(0) 推荐(0)
css3 同时加载两个动画
摘要：最近在做H5，遇到这样的需求（如题） 先上一部分代码：    正常情况下基本思路是：   监听webkitAnimationEnd动画结束以后再add另一个class   这样的话两个 动画连接在一起（自己脑补效果），但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终 阅读全文
posted @ 2016-03-13 11:00 kitebear 阅读(1170) 评论(0) 推荐(0)
BFC
摘要：先看一下英文解释：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, a... 阅读全文
posted @ 2015-09-09 11:12 kitebear 阅读(142) 评论(0) 推荐(0)
CSS大杂烩(1)
摘要：box-sizing 有4种方式border-box 用来减去padding内边框和边框 前提是设置好固定宽高content-box 在宽和高之外内边距和边框 其实基本上和原来一样inherit 继承上级节点的box-sizing的属性设置initial 初始化默认设置b/i strong/em的区... 阅读全文
posted @ 2015-07-01 08:06 kitebear 阅读(174) 评论(0) 推荐(0)
display : -webkit-box-inline 我见
摘要：发现： 最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 d... 阅读全文
posted @ 2015-04-08 23:24 kitebear 阅读(4323) 评论(4) 推荐(0)