随记

摘要： 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 阅读全文