-
什么是原子化CSS
原子化CSS是一种将CSS样式分解为小的、可重用的原子（或单元）的样式表设计模式。这些原子通常是单一目的的类名，用于表示特定的样式属性，例如颜色、字体大小、边距等。通过这种方式，开发者可以组合这些原子类来创建复杂的样式，而不需要编写大量的CSS规则。原子化CSS的主要优点包括：重用性：原子类可以在多个元素之间重用，减少样式的重复。可维护性：通过分...
-
浅谈团队开发中css的BEM命名风格
前端在项目开发中经常遇到的问题团队开发中css的命名冲突为css的命名而绞尽脑汁css的命名五花八门开发时如何规范css的书写什么是BEMBEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的缩写。它Yandex团队提出，这种命名方法让CSS便于统一团队开发规范和方便维护，提高c...
-
DOM元素属性快速查看器
先来看看下面要说的是一个什么东西？请下面效果：知道是啥东西了吗？没错，当鼠标悬停在元素上的时候，DOM元素的属性实时显示出来了。自己尝试一下将下面的代码复制到浏览器控制台中执行，然后将鼠标悬停到网页任意位置上，你看到了什么效果呢？下面是一段神器的代码：(functionSpyOn(){const_id='spyon-container',_pos...
-
CSS3 transition 实现抛物线动画
<!DOCTYPEhtml><html><head><title>CSS3水平抛物线动画</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width"><style&...
-
前端用到的那些单位
单位，在各个领域都是很常见的。那么在前端领域用到了哪些单位呢，这篇文章让我们细细了解一下！下面我讲列举：pt、px、em、rem、vh、vw、vmax、vmin、rpx、ch等单位的定义、用法及注意点。首先，来了解pt、px、em、rem这四个单位。pt单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等...
-
使用CSS完成元素居中的七种方法
在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知,在CSS中至少有六种实现居中的方法。...
-
浏览器兼容问题与解决方法汇总
浏览器兼容问题是指，不同厂商开发的浏览器针对同一段代码的不同解析，造成页面展示效果出现差异的情况，很多时候为了追求显示效果的一直，前端开发人员就要针对不同兼容问题应用相应的方法处理，达到效果一致的目的。下面这些是平时开发过程中遇到的，做个汇总，方便查阅。1、<!DOCTYPEHTML>文档类型的声明产生条件：IE6浏览器，当我们没有书...
-
CSS选择器集合
序号选择器例子例子描述CSS版本1.class（类名选择器）.table选择class='table'的所有元素。12#id#tabs选择id='firstname'的元素，具有唯一性13**通配符，选择所有元素24elementdiv选择所有div15element,elementdiv,p选择所有<div>元素和所有<p&g...