深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局篇做一个结尾，
转载
2023-11-01 17:57:08
243阅读
在现代前端开发中，Utility-First (功能优先) CSS 框架已经成为主流。其中，Tailwind CSS 无疑是市场的领导者和标杆。然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。Tailwind CSS: Utility-First 的黄金标准Tailwind CSS 是一个功能优先的 CSS 框架，它通过提供大量预设的、低层
原始css：border属性border-color:边框颜色border-width:边框宽度border-style:边框样式none : 无边框。与任何指定的border-width值无关hidden : 隐藏边框。IE不支持dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）dashed : 在MAC平台上IE4+与WIND
原创
2017-01-05 21:38:07
391阅读
网页设计一般用到三大技术 html ,css ,javascript； HTML： 相当于一个文档，里面是要给用户的信息。使用他提供的一些标签，来把你想传递给用户的信息进行合理编排，使信息更好的传递给用户。 CSS: 相当于把这个文档进行修饰，美化实现更好的交互性，是用户接收信息更加舒服，自然，修饰最好的是接近简洁，自然。JAVASCRIPT: 相当于更好的实现和用户的交互，是信息传递实现双向化。
转载
2023-09-30 10:30:12
97阅读
在众多解决方案中，没有绝对的优劣。还是要结合自己的场景来决定。 我们团队在使用过 scss 和 css modules 后，仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题，但是带来的使用成本也很大。尤其是在写动画（keyframe）的时候，语法尤其奇怪，总是出错
转载
2019-03-08 11:58:00
91阅读
2评论
曾经某个时期，大多数开发者使用 jQuery 给浏览器中的元素添加动画。让这个淡化，让那个扩大，很简单。随着互动的项目越来越复杂，移动设备的大量增加，表现性能变得越来越重要。Flash 被抛弃，有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得
转载
2018-05-01 20:55:00
55阅读
在 Vue.js 中，scoped是通过将样式限制在当前组件的范围内，来避免样式的全局污染。scoped使得组件内的 CSS 。
CSS 原子化是一种 CSS 架构方法，它将 CSS 拆分成最小的、不可再分的原子类，通过组合这些原子类来构建样式。Tailwind CSS 和 UnoCSS 都是流行的原子化 CSS 框架，下面从不同方面对它们进行性能对比分析。构建性能Tailwind CSS原理：Tailwind CSS 在构建时会生成大量的 CSS 类，默认配置下会生成一个包含所有可能类的大文件。为了优化构建性能，需要使用
通常就分为这三大类：* 选定所有对象。通配选择符(Universal Selector)通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用一、标签选择器，以开始标签作为选择器使用。二、id选择器以唯一标识符id属性识别（表示#name）#name{ font-si
原创
2022-09-09 09:05:25
356阅读
本文讲解的主要是 Scoped 样式和 CSS Module 的对比，对这两个概念已经熟悉的同学
转载
2022-08-29 22:18:22
154阅读
使用 html range input创建前后图像比较效果的分步教程。使用 CSS 和 JavaScript，JS 部分代码非常少，主要是 HTML、CSS，和实现思路。介绍如果你有两张图像进行比较，则“前后”图像滑块是一个有效而又简单的 UI 元素。该“slider”元素使你的用户可以控制两个图像在屏幕上的显示方式，并自由浏览两个不同的图像。你可能认为它需要一些库来创建这样的效果，但实际上，它
转载
2022-11-21 16:11:48
394阅读
响页面加载速度(PLT)和用户交互延迟(TTI)，在高并发场景下甚至可能导...
在现代 Web 前端开发中，动画已经成为用户体验中不可或缺的一部分。一个流畅、自然的动画，不仅能提升界面交互感，还能引导用户理解页面结构与操作逻辑。前端动画的实现方式多种多样，其中最常见的三种是 CSS 动画、Canvas 动画 和 GSAP 动画库。本文将从性能、控制粒度、使用场景等方面，对这三种动画实现方式进行深入对比，并配合代码示例展示它们的典型用法。
最近应公司需求，需要用css3做动画，终于把以前一直傻傻分不清楚的三个属性理解了。索性在这里进行一个简单的对比，加深自己的记忆。浏览器兼容性CSS3 transform 属性Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转
原创
2017-06-02 16:35:38
1085阅读
列举常用的CSS选择器语法和Xpath查询语法，以及二者的简单对比。
原创
2022-08-26 08:26:38
390阅读
本文深入探讨了CSS预处理器Sass和Less的核心特点、语法差异以及在实际项目中的应用，通过对比分析帮助开发者根据项目需求选择合适的预处理器，并结合实战案例展示它们如何提高CSS开发效率和可维护性。一、引言随着前端项目的日益复杂，传统的CSS编写方式在面对大量样式规则时，逐渐暴露出可维护性差、代码复用困难等问题。CSS预处理器应运而生，Sass和Less作为其中的佼佼者，为开发者提供了更强大、灵
CSS-in-JS 是一种将 CSS 代码封装在 JavaScript 中的技术方案，Emotion 和 styled-components 是其中两个颇受欢迎的库。下面从多个方面对它们进行深度对比，以探讨 CSS-in-JS 的未来走向。1. 基本用法EmotionEmotion 既支持使用 css 函数来创建样式对象，也支持使用 styled 函数创建带样式的组件。import React f
昨天很累也很烦
１．一大早就起床去练车，太阳暴晒，热的要死．
２．教练象吃了火药一般咆哮，要知道，本姑娘也非常的火大！
３．被八卦之人误会，听到让自己非常气愤＋恶心的谣言！
４．不小心牵出了自己的ＥＸ，然后被一挫人问了一个让我想扇他两巴掌的白痴问题！
５．晚上赶论文，弄到凌晨２点，超困！
原创
2008-06-01 17:27:20
414阅读
2评论
一、CSS3中网格布局,可以参考弹性盒子布局一样的传送门,分为容器属性和项目属性二、常见的容器属性1、display:grid定义一个容器属性为网格布局2、grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px3、grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配4、grid-te
原创
2021-06-15 16:12:08
943阅读
作者简介：郑建林，现任深圳市技研智联科技有限公司架构师，技术负责人。多年物联网及金融行业经验，对云计算、区块链、大数据等领域有较深入研究及应用。现主要从事 PaaS 平台建设，为公司各业务产品线提供平台底座如技术中台，数据中台，业务中台等。公司简介深圳市技研智联科技有限公司：为佛山技研智联科技有限公司子公司，前者为三技精密和研华合资公司。提供从工控设备，网关，云平台一体化的专业印染数字化工业互联网
