css

如今，网络上的每个网站或 Web 应用程序都需要大量的 CSS 代码来使事物看起来既漂亮又出众。 我认为如果不使用 CSS，我们将永远不会有一个可以脱颖而出的优秀网页设计。,CSS 是一种非常有用的样...

,实现思路,1、通过animation达到动起来的效果，具体变化似乎有两种可行方式：,2、在动画中，通过CSS-transform不断平移轮播图元素位置。,3、在动画中，设置不同的left值。,实现效...

,说明,1、flex的使用方法很简单，只需要将其display属性设置为flex就可以，也可以设置行内的flex。,记得Webkit内核的浏览器，必须加上-webkit前缀。,2、设为Flex布局以后...

,CSS是用来布局和格式化网页和其他媒体的语言。它是 Web 的三种主要语言之一，与HTML(用于结构)和JavaScript(用于行为)并列。每一年，我们都看到CSS的规模在增长，2022年也不例外...

,终于，在漫长的等待下，容器查询（CSS Container Queries）将在 Chrome 105 版本得到正式的支持！,,而目前，我们也能在 Chrome Canary 版本中，或者在 Chr...

大家好，我是前端西瓜哥。今天来学习 BFC。,BFC，为 Block Formatting Context 的缩写，中文翻译为 块格式上下文。,BFC 是 Web 页面 CSS 渲染的一个机制，是块级...

大家好，我是 CUGGZ。,自 Web 诞生以来，我们编写和思考 CSS 的方式发生了巨大变化。从基于 table 的布局到响应式网页设计，已经走过了漫长的道路，现在进入了由现代 CSS 功能提供支持...

,说明,1、BFC是页面上隔离的独立容器，容器中的子元素不会影响外部元素。反之亦然。,这一元素的垂直方向边距将重叠，垂直方向的距离由margin决定，取值。,2、BFC区域不会与浮动盒重叠(去除浮动原...

,作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性,格式：,注意： ,1、标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签。,2、标签选择器无论标签藏得多...

,在 WeGame[1] 的 PC 端官网首页，有着非常多制作精良的基于滚动的动画效果。,这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。转场动画 1：,,转场动画 2：,,是不是挺有意...

,说明,1、后代选择器又称为包含选择器，可以选择作为某元素后代的元素。,2、从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代。,即选中后代，不管是儿子还是孙子，只要是都会被选...

,CSS比较函数从2020年4月就开始支持了，我喜欢使用这些函数，但最喜欢的是 clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。,clamp() 函数的作用是把一个值限制...

,1、从属关系区别,@import是 CSS 提供的语法规则，只有导入样式表的作用；,link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。,2、加载顺序区...

译者 | 李睿,审校 | 孙淑娟,众所周知，全球互联网得以蓬勃发展在很大程度上归功于HTML和CSS。Javascript(JS)可以充当HTML和CSS之间的粘合剂，使页面更具动态性和交互性，但We...

,1、给所有选择器选中的标签设置属性。,格式：,2、并集选择器必须使用,来连接。选择器可以使用标签名称/id名称/class名称。,实例,以上就是CSS并集选择器的介绍，希望对大家有所帮助。更 多cs...

,本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。,本技巧源自于 Temani Afif[1] 的 CodePen CSS Only Puzzle game...

,说明,1、对于一个元素不确定宽度和高度，但是想按照一定的比例来显示，可以用padding来计算高度。,2、通过父元素的width属性，padding可以设定百分比，从而动态地确定高度。,实例,没有为...

,说明,1、 box-shadow支持逗号分隔语法，可以创建任意数量的投影。,当一个正值的扩展半径加上两个零偏差和零模糊值时，得到的投影就像一个实线框。,2、投影不会影响布局，也可以说投影不会占据真实...

,区别说明,1、link是XHTML标签，除了加载CSS外，还可以定义RSS等事务。,@import属于CSS范畴，只能加载CSS。,2、link引用CSS在页面加载时同时加载，@import需要完全...

,说明,1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。,2、后代选择器选中所有的特定后代标签，子元素选择器选中所有的特定的直接标签。,后代选择器会选中指定标签中, 所有的特...

,绘制方法,1、画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。,2、如果将宽度调的足够大，改变不同方向的颜色，就可以发现盒模型的border是四个梯形一样的线条。,实例...

,1、简单选择器，css选择器最底层的结构，组成了简单选择器。,简单选择器可以分为以下几种类型：,通配符*，*选择器可以命中所有的 html 元素,标签选择器（Type），命中如 div、span、p...

阿里矢量图标​在项目中都用使用，通常一般我们引入css​使用iconfont​,或者我们使用svg​加载图标，亦或我们可以使用Unicode​，除了第一种与第二种，今天分享第三种方式unicode加载...

,注意：,1、每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id,2、在同一个界面中id的名称是不可以重复的,3、在编写id选择器时一定要在id名称前面加上#,id的名称是有一定的...

如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。,在真机检查一下效果：,,酷! Git add, git commit, git push, oh...

,在上一篇 CSS 如何根据背景色自动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在一定局限性，比如：如果是背景是渐变色该怎么办？,,很容易想到的思路是将两个渐变色取过渡中间色，然后...

为了便于更好的理解本文，下面对像素相关概念进行梳理。,简单来说就是像素单位基本分为三种：设备像素(物理像素)、设备独立像素(逻辑像素)、CSS 像素。下文将会围绕相关概念展开讨论。,话不多说，正文开始...

,说明,1、如果一侧定值，包括不设定值取默认值0的情况，一侧auto，则auto为剩余空间大小。,2、如果两侧均是auto，则平分剩余空间。,实例,以上就是css margin:auto的填充规则，希...

,大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：,,当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。,像是...

最近，我学到了一些比较实用的CSS编程技巧，之前很多效果不得不求助于 JavaScript 来实现，但是今天，我学会了直接用CSS 来完成。相信看完这篇你也会爱上CSS，一起来看看吧！,,没想到用CS...

很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode。,vscode,抽象开来，其实就是这样一个布局，左右、上下...

CSS 生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分 CSS 效果，如阴影、边框、按钮颜色/形状等等。,在本文中，我将分享 19个实用的 CSS 代码生成器，每个开...

,本教程操作环境：windows7系统、CSS3、Dell G3电脑。,说明,1、浮动主要分为左浮动和右浮动，分别为float: left; float: right。,2、每次浮动后，元素本身都脱离...

,大家好，我是 CUGGZ。,CSS 变量由开发者自定义，它包含的值可以在整个文档中重复使用。下面就来通过这篇文章来更好地理解声明式 CSS 变量！,CSS变量即自定义属性，它包含的值可以在整个文档中...

,说明,1、行内样式，编写css代码。,即直接在 html中的style属性里编写css代码。,2、内嵌样式，编写class。,即在 html h中的style标签内编写class，提供给当前页面使用...

,说明,1、minmax()函数来创建行或列的最小或尺寸。,2、第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的值。,可以接受任何长度值，也接受 auto 值。auto 值允许网格轨道基于内容...

颜色对于 css 来说是非常重要的，网站之所以会呈现出五彩斑斓的样式，就是这些颜色样式起的作用。在 css 中，对于颜色样式有很多种表达方式，今天我们就来盘点下 css 中颜色的格式。,在 css 中...

,说明,1、译为块级格式化上下文，是Web页面可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域。,也是浮动元素与其他元素的交互限制区域。,2、只有Block-levelbox参与，它规定了Bl...

介绍一个 CSS 动画合成小技巧。先看效果：,,Kapture 2022-06-26 at 16.57.42,这是一个非常“动感”的倒计时效果，在一些活动开场中比较常见，分析一下整个动画过程，不难发现...

,说明,1、怪异盒设置的width/height不仅包含了content盒子内容的宽度/高度，还包含了padding和border的宽度/高度。,2、一个块的总宽度= width + margin(左...

大家好，我是 CUGGZ。,在 CSS 中颜色无处不在，它们可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 hex 和 RGB，其实表示颜色的方式有很多，下面...

​译者 | 李睿,审校 | 孙淑娟,如果开发人员使用级联样式表(CSS)有一段时间了，可能已经注意到采用一种更简单的CSS框架可以完成这项工作的趋势。本文介绍了一个更强大的示例。Pure CSS是一个...

,说明,1、CSS中in JS，意思就是使用js语言写css，完全不需要些单独的css文件，所有的css代码全部放在组件内部，以实现css的模块化。,2、CSS in JS其实是一种编写思想。,目前已...

,众所周知，高度在设置成auto​关键词时是不会触发transition过渡动画的，下面是伪代码。,效果如下：,,如果希望展开时有过渡动画，例如这样。,,Kapture 2023-01-31 at 1...

文字单行溢出:,多行文字溢出:,CSS变量又称CSS自定义属性，通过在css中自定义属性--var与函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下使用一个示例讲述...

,CSS容器查询终于来了! 它们目前在谷歌浏览器（105）中得到了支持，很快就会在Safari 16中得到支持。这对前端来说容器查询与媒体查询一样重要。,在这节课中，我们介绍一下容器查询是如何工作的...

我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。,创建...

,说明,1、当浮动元素浮动时，其margin不会超过包含块的padding。,如果想要超过元素，可以设置margin属性。,如果两个元素一个向左浮动，另一个向右浮动，左浮动元素的marginRight...

,原理其实很简单，content​虽然本身不支持 CSS 变量直接渲染，但是可以支持counter-reset。,通过一次中转，就可以让content也能支持CSS变量作为字符展示了。,,但是，这个方...

作者 | 李光毅,虽然开发工具早已经从 preprocessor 进化到了 styled component 甚至是 functional css，但在我看来新的工具并没有让我们的样式代码写的更好，只...

,粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。,当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而...

,1、条件注释法。是IE浏览器专有的Hack模式。,微软官方推荐hack模式。,只在IE下生效。,2、类内属性前缀法，属性前缀法是在CSS风格属性名称之前添加一些hack前缀。,只有特定浏览器才能识别...

,1、定义css文件。,2、在js模块中导入css文件。 ,3、配置css-loader打包。CSS Modules不能直接使用，而是需要进行打包。 ,一般通过配置 css-loader 中的modu...

大家好。我是 CUGGZ。,12 月 7 日，一年一度的 State of CSS 调查结果正式公布！2022 年 CSS 状况调查于 2022 年 10 月 1 日至 11 月 1 日进行，共收到了...

,水平居中还是比较容易的，先看子元素是固定宽度还是宽度未知。,1、固定宽度这种方式是绝对定位居中，除了使用margin，还可以使用transform。,（注意浏览器兼容性，只适用于 ie9+，移动开发...

,说明,1、使用transform从单行文本、段落到box，都会垂直对齐。,2、translate属性可以改变元素的位置，translateX(10px)实现x坐标轴移动10个单位，如果是负值，则沿相...

,1、相邻兄弟选择器，给指定选择器后面紧跟的那个选择器选中的标签设置属性。,格式：,相邻兄弟选择器必须通过+连接。,相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签。,2、通用兄弟选择...

本篇文章将聊聊另外一种常见的反爬方案，即：「 CSS 偏移 」。,CSS 偏移反爬是利用「 CSS 样式 」对网页元素进行一次自定义的排序，最后让网页以正确的数据展示出来。,下面我们通过一个简单的实例...

在实际开发中，我们可以使用 VSCode、WebStrom 进行代码的编写，但是，如果我们为了提高工作效果，我们还需要借助一些小工具，像今天这些CSS代码生成器就是这样的小工具，我在这里跟大家分享了9...

​关于CSS实现内容居中的方式有很多种，在今天这篇文章里，我给大家整理了8种实现内容居中的方式，希望这些方法对你学习和使用CSS进行开发有帮助。,,可能是当今最流行和最简单的居中方式，我可以放心地承认...

当开发一个Web页面时，要考虑头一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。,好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发...

,说明,1、值越大，定位元素在层叠元素中越高。,z-index的默认属性值为0。,2、若取值相同，则按书写顺序，后来居上。,3、后面的数字一定不能加单位。,4、定位盒子才有z-index属性。,只有相...

Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。下面...

,说明,1、固定定位是元素固定在浏览器可视区的位置。固定定位也可以算是一种特殊的绝对定位。,2、使用场景为当浏览器页面滚动时，元素的位置不会改变。,固定定位的特点,实例,以上就是css中固定定位fix...

,在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下：,,传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素...

前端社群常见的宗教战争文：TailwindCSS根本邪魔歪道， Class根本不是这样用的， 看了真他妈一肚子火 —— 硬派本格 CSS/SCSS支持者。,会有这样的言论，也许是你日常的工作流程中，不...

,从原理可知，要使用LESS，必须要安装LESS编译器。,1、LESS编译器是基于node开发的，可以通过npm下载安装。,2、安装好了less之后，它提供了一个CLI工具lessc，通过该工具即可完...

可能我们有时候潜意识里认为, 当前实际开发中css属性已经足够用了, 但是前段时间突然想到:"会不会我们只是思维被限制在了常用的css属性中, 从而丧失了创造力", 就像发明 车 之前大多数人会认为 ...

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相...

,CSS 中的 Flex 布局是一种一维的布局模型，一次只能处理一个维度上的元素布局，一行或者一列。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。下面就来看看如何在 CSS 中使用...

,收到一个很有意思的提问，如何实现类似如下的背景效果图：,,嗯？核心主体是由多个六边形网格叠加形成。,那么我们该如何实现它呢？使用纯 CSS 能够实现吗？,当然可以，下面我们就将尝试如何使用 CSS ...

,说明,1、position的新属性sticky，在屏幕范围内(viewport)设置sticky元素时，该元素的位置不会受到定位的影响。,(设置为top、left等属性无效)，当该元素的位置将移出偏...

最近，Chrome团队发布了对一个新的CSS规范的实验性支持，即样式查询。简而言之，它让我们查询容器的样式，而不是只查询尺寸。在查询容器尺寸不够的情况下，这可能很有帮助。,介绍样式查询之前，我们先来回...

,1、流又称文档流，是css的基本定位和布局机制。,流是html的抽象概念，隐喻这种排列布局方式自然自动，就像水流一样。流体布局是html默认的布局机制。如果你写的html不使用css，默认情况下(d...

大家好，我是 CUGGZ。,CSS 中的 Flex 布局​和 Grid 布局都是非常强大的布局方案，那什么情况下应该使用 Grid 布局，什么情况下应该使用 Flex 布局呢？本文就来通过一些示例看看...

Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，效果如下：,,当然，这里是通过JS根据字符数量自动缩放文本实现的。,,而现在，仅仅通过 CSS也能达到类...

,说明,1、流式布局使用非固定像素来定义网页内容，即百分比布局。,2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。,分类,左侧固定,右侧自适应,右侧固定左侧...

通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了。,这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是[1]的首页排行榜效果。,,这里的主要交...

最近在项目中碰到一个这样的角标设计，如下：,设计稿,像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）,从设计上可以拆分成两部分，一个圆角矩形和一个三角形...

今天，分享一个实际业务中能够用得上的动画技巧。,巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：,看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么?,我们来简单分析分析...

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。,举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比...

,世界杯正在进行中，也不要忘记学习 CSS（得想办法蹭一波热度）。比如，用 CSS 绘制一个足球场？,,CSS 足球场,一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实...

,今天，要介绍一种基于 CSS mask-composite 的高级技巧。,通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。,事情的经过是这样的，某天，我们拿...

,说明,1、浮动元素会从普通文档流中分离出来。,但浮动元素不仅会影响自己，还会影响周围元素的对齐。,2、无论是行内元素还是块级元素，如果设置了浮动，浮动元素就会产生块级框。,可以设置width和hei...

练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？,思否猫，SegmentFault 思否[1]的吉祥物，是一只独一无二、特立独行、热爱自由的(>^ω...

如果你关注我的话，你可能知道我已经做了好几年网络开发人员，在那段时间里，我创建了多个网站，卖掉了大部分网站，并赚钱了。,我不想吹牛，但这就是现实。,之前，我与你分享了很多Web 开发资源，随着时间的推...

,本文是 CSS Houdini 之 CSS Painting API 系列第四篇。,在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的...

,区别说明,1、优雅降级始于复杂的现状，试图减少用户体验的供给。,2、渐进增强是从一个非常基础、可以起作用的版本开始。,不断扩展，以满足未来环境的需求。,3、降级意味着回顾，渐进增强意味着向前看，同时...

,说明,1、为了达到统一的页面效果，需要为不同的浏览器或者不同版本编写CSS样式。,因为不同的厂商或浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)，对...

,可以看到，只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。,你也可以提前访问 CSS auto ...

CSS 是现代 Web 开发的重要组成部分！,编写高效的 CSS 代码可以帮助提高网页的性能和可维护性。,今天，将介绍编写高效 CSS 代码的5个技巧。,,使用缩短的十六进制颜色代码可以帮助减小 CS...

,不知道有没有这样的兄弟，学习 Vite 的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手 V...

,介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS​ 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API[1]，有了它，可以在不改变 dom 结构的情况...

,说明,1、transition允许在CSS属性变化时给它添加一个过度的动画效果。,通常情况下，CSS 属性变化是立即生效的，新的属性值在超级短的时间内替换掉旧的属性值，然后浏览器重新绘制样式内容（可...

今天这篇笔记聊聊CSS中一个非常基础但是很重要的概念——盒子模型：,顾名思义，就是HTML的元素在网页上的展示都是一个一个的盒子，四四方方的在页面上排列着，比如像下面这样，学习了盒子模型，为我们学习定...

大家好，我是 CUGGZ。,CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提...

随着CSS的不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性，这些属性你可能听说过，也可...

,1、垂直对齐，利用CSS3的Transform。,如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：,使用这个技巧，从单行...

,说明,1、主要用户使用高版本浏览器比较多，从高版本浏览器到低版本浏览器，先构建完整的功能。,然后测试和兼容低版本浏览器，以确保正常浏览。,2、优雅降级认为网站应该为高级、完美的浏览器设计。,将被认为...

最近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下,,为了解决这个问题，设计师提了一个“究极”方案，将书名背后的图片模糊一下，这个在 CSS 中很...