栅格系统源码解读

固体容器和流体容器左右外边距都为auto，这意味着2个容器都是水平居中的； 固体容器和流体容器都拥有相同的左右、内边距以及前后的清除浮动； 这2种容器都是响应式的栅格系统布局，不同之处在于容器的宽度。

栅格系统盒模型分析

列的规则：列有左右内边距，列间槽宽30px； 使列包裹行：若在单行双列的基础上，单列在增加行，则列间槽宽为45px,为保持列的规则，故设左右负边距； 使容器包裹行：负内边距使行超越容器边界，故增加边距抵消之

栅格响应式工具

利用媒体查询功能使用工具类可以方便的针对不同设备展示或隐藏页面内容 123456

AUTO与100%的分别

auto默认宽度自适应整个视窗，内边距部分则是从中减去。有点类似于 `border-box` 的感觉，100%其实是个固定的宽度值，内边距在此基础上增加。

自定义栅格系统与Bootstrap.css

自定义栅格系统基于对Bootstrap中栅格系统源码的解读，修改相关参数和命令，即可打造高度自定义的栅格系统 引入源码Less文件，转换成CSS文件 12

Less学习指南

less简介 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 我个人觉得使用less在书写大量的样式代码时显得十分重要，它通过变量、继承、...

CARDS主题 & 导航栏样式修改

首先，在浏览器中利用开发者工具进行调试，找到我们所要改动的那部分结构，写入css样式，调试出我们所想得到的结果并记住所对应的样式选择器。其次，我们需要在cards主题中找到拥有这些样式选择器的模块，修改代码，写入我们刚刚调试过的代码，最后执行清理、部署、运行即可。

HEXO & CARDS主题进阶配置

在默认的card主题之上，我设置了标签、分类、搜索、夜间模式、页面目录、footer部分以及延伸引入rss订阅,那么第二步要进行的是进一步丰富主题的功能和样式

• 为文章添加缩略图
• 可选择创建折叠文本样式
• 文章置顶设置
• 添加字数统计和阅读时长功能