随记

摘要： 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位十六进制 使用完整的 阅读全文