需求场景是在一个使用绝对定位布局的页面中，动态渲染一个可以滑动的子模块。
开发的时候在电脑 Chrome 上面调试没问题，安卓手机和常规 IOS 版本测试了也没问题，但是由于苹果最近更新了新的系统版本（14），在新版本上出现了滚动滑动不了的问题。
“IPHONE / H5 / IOS 14 版本滚条 / 滑动失效问题”继续阅读
标签：CSS
CSS 实现内容高度不够的时候底部（footer）自动贴底
在 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 规范前端项目代码
一、部署 eslint 规范 JavaScript
1.1 原理
husky + lint-staged + prettier + eslint + commitlint
- husky: 阻止不规范的
git commit,git push。 - lint-staged: 只检测待提交区的代码。
“通过 eslint stylelint htmllint 规范前端项目代码”继续阅读
图解 CSS3：核心技术与案例实战 – 廖伟华 著
CSS世界 – 张鑫旭
基于 Vue 的前端开发规范
一、框架 / Vue
1.组件名
组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。
示例：
// 反例
export default {
name: 'item'
}
// 正例
export default {
name: 'page-article-item'
}
“基于 Vue 的前端开发规范”继续阅读
浮动元素引起的问题和解决办法
一、问题
- 多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。
- 若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。
- 若浮动元素前面还有同级元素没有浮动则会影响页面结构。
“浮动元素引起的问题和解决办法”继续阅读
CSS3 Flex布局（项目）
CSS3 Flex布局（容器）
一、flex-direction属性
“CSS3 Flex布局（容器）”继续阅读
CSS伪类选择器active模拟JavaScript点击事件
一、说明
“CSS伪类选择器active模拟JavaScript点击事件”继续阅读