随记

摘要： 渐变背景在 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 类选择器、 阅读全文