04 2025 档案
摘要：相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线 animation
阅读全文
摘要：CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~ transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。 transition 过渡 要
阅读全文
摘要：影响元素位置的 CSS 属性基本介绍完毕（参考前几篇文章），现思考一个最常见的需求： 一个子元素，要摆放在盒子的正中央，使用 CSS 布局手段，究竟有多少种实现方式？ 上下左右（水平方向、垂直方向）要同时居中，在 Web 领域应该算是非常常见的开发需求了，最最常见的地方就是弹窗，比如： 文本居中 先
阅读全文
摘要：CSS transform 属性中文翻译过来是 变换，始终觉得翻译差那么一点意思。它可以用来改变元素形状，比如旋转、缩放、移动、倾斜等，就是它可以把元素各种拿捏~ transform 特性是在不改变自身尺寸的情况下，对元素进行各种变形，元素自身的文档流位置还是会保留，语言有些空洞，下面看例子。 笛卡
阅读全文
摘要：CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。 CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 div + css 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示
阅读全文
摘要：CSS 的定位属性 position 可以把元素从文档流中拧出来，让其显示在其他位置。 但凡元素定位属性加身，元素位置便不再受文档流控制，这时候什么 flex、grid 都不好使了，定位的元素已然跳出三界外，不在五行中，这时候元素的位置由自身的偏移属性决定（top、right、bottom、left
阅读全文
摘要：弹性盒子又称为 Flexbox，然而我更喜欢 flex 的叫法。 flex 弹性盒子和 grid 网格布局作为前端开发中两把利器，它们的分界线没那么明显，虽然按照 MDN 的说法 flex 多用于一维布局(行/列)，grid 多用于二维布局(行列网格)，但实际开发中用多个一维布局也能拼凑出一个完整的
阅读全文
摘要：学习本文之前，建议先学习上一篇了解父元素的相关属性。 前文对 grid 网格布局中父元素容器相关的 CSS 属性做了详细介绍，本篇将继续学习子元素相关的 CSS 属性。 网格布局的一大波样式属性，父元素占据了大半江山，子元素嘛相对就少了一些~~ 本文中的中的示例基础代码： <div class="b
阅读全文
摘要：grid 网格布局与 flex 弹性盒子布局一样，都需要控制 容器 跟 子元素 的样式才能做出想要的效果，部分场景只控制 容器 样式也行。 grid 样式属性 一大堆 属性 来袭~~ 与网格相关的 CSS 属性有一大堆，毕竟要同时控制行和列（行、列也被称为 网格轨道 grid track）。 容器（
阅读全文
摘要：flex 作为现代布局方案中最常用的手段，有必要拉出来细说。 flex 相关的 CSS 属性 容器（父元素）相关的 CSS 属性 以下的 CSS 属性，在 flex 布局中需喂给父元素，设置 flex 布局中的盒子相关样式。 display 启用 flex 布局 flex-direction 主轴方
阅读全文
摘要：Web 网页中，所有元素都是盒模型构成的，一个大盒子套一个或者多个小盒子，再用更大的盒子把大盒子给圈起来，这就构成了基本的 HTML 结构，再利用 CSS 把盒子装修得好看一些，最后把它放在正确位置，就是我们所看到的网页。 布局的作用就是要把元素摆放在合适的位置，让网页看起来不显得空闹闹的，也不要显
阅读全文
摘要：background 作为元素外观里的重点功臣介绍完毕，本文再一览其他常用的外观属性。 本文示例中，盒子基础样式： .box { font-size: 20px; margin: 20px; padding: 20px; width: 250px; height: 180px; border: 10
阅读全文
摘要：渐变背景在 CSS 里面就是一个颜色到另一个颜色渐渐变化的样子。 本文示例中，盒子基础样式： .box { margin: 20px; padding: 20px; border: 10px dashed rgba(0,255,0,1); width: 250px; height: 180px; }
阅读全文
摘要：background 可设置背景色、渐变、背景图等，本文主要讲解背景图片的用法。 背景顾名思义就是背后的景色，始终居于元素背后，元素永远站在背景的身前。 本文示例中所使用的图片： background 背景 background 此属性是一个简写，其包含的内容有点多： background-clip
阅读全文
摘要：CSS 盒模型是基石，文本和字体则是盒子内容的重要组成部分。毕竟清水房有了，软装也得跟上啊。 字体常用属性 font-family 定义字体类型（如： Arial, "Microsoft YaHei", sans-serif）。 特别说明，字体定义有优先级，比如： font-family: Inte
阅读全文
摘要：在 Web 网页开发中，盒模型（Box Model） 是 CSS 的核心概念，它决定了每个 HTML 元素在页面中占据的空间和布局方式。 无论是文本、图片还是按钮，浏览器都会将它们视为一个矩形盒子，并通过盒模型的规则计算其尺寸和位置。 Web 网页开发，就是把一个个的盒子摆在正确的位置，堆叠成好看的
阅读全文
摘要：截止发文， MDN 收录的 CSS 属性大约 135 个（不包括特定浏览器的属性，所有可合并的属性算作一个，比如 margin-left 和 margin-right 都记作一个属性）。 这些 CSS 属性中，老师傅也有见过的，用过的，也有没见过的，甚至都没听过的。 这些属性中有高频使用的，也有基本
阅读全文
摘要：埋头苦写多年的 CSS，从没注意到 CSS 被浏览器分了类，直到偶然的一次翻阅开发者工具，才发现原来 CSS 属性也被浏览器归类收纳了。 Chrome 下面是 Chrome 的开发者工具中 CSS 的属性归类截图，一般情况都不会注意它，毕竟代码不出问题，谁会关心 CSS 属性是哪一类？ 当我偶然看到
阅读全文
摘要：学编码之前，当先学排查问题的能力。 在那个 IE 浏览器 当道的时代，前端开发简直就是刀耕火种一般，一个简单的圆角模块，嘿...不好意思，它不支持，用图片吧。 但凡经历过 IE 的洗礼，就会知道当时哪些 红极一时 的浏览器 bug，特别是 IE 6，它真是一个 老六 啊，悄悄咪咪的挖了好多坑，刚填平
阅读全文
摘要：曾经，CSS 颜色的写法很专一，就只有十六进制写法（#ff0000）和关键字写法（red）。 现在，它变了，变得花样多了，各种招式眼花缭乱。 以红色（red）为例： 1. 颜色关键字 直接使用预定义的颜色名称： color: red; 解释 直接使用关键词 red。 2. 6位十六进制 使用完整的
阅读全文
摘要：单位就是那个形容长度大小的东西。比如身高180cm(厘米)，cm就是单位。 css 也不例外，要描述一个盒子的大小，就必须要用到单位。 css 单位根据其作用分为几大类：绝对单位、相对单位、视口单位、角度单位、时间单位、网格单位、频率单位、分辨率单位。 动态计算单位 认识单位之前，先认识几个动态计算
阅读全文
摘要：任何地方都存在阶级，CSS 选择器也不例外，也会讲一个三六九等。 选择器类别 通配符选择器 标签选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 关系选择器 流传已久的阶级划分 选择器 权重 继承父标签的样式、* 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器、
阅读全文
浙公网安备 33010602011771号