CSS3 – 不知不问

《SVG动画》 – [美]莎拉·德拉斯纳著 / 大漠译

八月 18, 20212021年8月18日后除Leave a comment

读完时间：2021 年 8 月 18 日

出版时间：2018 年 5 月

viewBox 和 preserveAspectRatio

viewBox的值并没有带单位，这是因为SVG可视空间并不是基于像素来设定的，而是一个可任意延展的空间，这样就可以适应许多不同的尺寸。

"《SVG动画》 – [美]莎拉·德拉斯纳著 / 大漠译"继续阅读

CSS 实现内容高度不够的时候底部（footer）自动贴底

八月 26, 20202020年8月26日后除Leave a comment

在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。

方案 1：Flex-Box

头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。

"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读

通过 eslint stylelint htmllint 规范前端项目代码

二月 28, 20202021年4月27日后除Leave a comment

一、部署 eslint 规范 JavaScript

1.1 原理

husky + lint-staged + prettier + eslint + commitlint

husky: 阻止不规范的 git commit, git push。
lint-staged: 只检测待提交区的代码。

"通过 eslint stylelint htmllint 规范前端项目代码"继续阅读

《图解 CSS3：核心技术与案例实战》 – 廖伟华著

四月 13, 20192021年4月25日后除Leave a comment

讲的很详细。

读完时间：2019 年 3 月 24 日

出版时间：2015 年 1 月

"《图解 CSS3：核心技术与案例实战》 – 廖伟华著"继续阅读

设置 box-sizing 为 border-box 后外边距（margin）会合并吗

七月 07, 20182018年8月12日后除Leave a comment

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

设置 box-sizing: border-box; 后，简言之：