【CSS系统化学习】- 大纲 最近失业，苦于之前的所有码农知识都是根据各种教程自学而来的，打算系统化学习一下。CSS 学习大纲基础部分1. 引入CSS 内联样式 内部样式表 外部样式表 2. CSS选择器 元素选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 3. 盒模型 边框（border） 填充（padding） 边距（margin） 4. 文本属性 字体系列（font-family） 字体大小（font-size） 字体粗细（font-weight） 文字颜色（color） 行高（line-height） 文本对齐方式（text-align） 文本装饰（text-decoration） 文本转换（text-transform） 5. 背景 背景颜色（background-color） 背景图片（background-image） 背景重复（background-repeat） 背景位置（background-position） 背景附着（background-attachment） 中级部分6. 定位 浮动（float） 清除浮动（clear） 定位模式（position） 静态定位（static） 相对定位（relative） 绝对定位（absolute） 固定定位（fixed） z-index 7. Flexbox布局 显示Flex容器（display: flex;） 主轴方向（flex-direction） 换行（flex-wrap） 对齐项目（justify-content, align-items, align-self） 8. Grid布局 创建Grid容器（display: grid;） 列模板（grid-template-columns） 行模板（grid-template-rows） 区域模板（grid-template-areas） 自动填充（auto-fill） 自动适应（auto-fit） 网格间距（gap） 9. 过渡与动画 过渡效果（transition） 关键帧动画（@keyframes） 动画属性（animation） 10. 响应式设计 媒体查询（media queries） 视口单位（vw, vh, vmin, vmax） 图片响应式（max-width: 100%; height: auto;） 高级部分11. 变量 CSS变量（--variable-name） 12. 样式继承 了解哪些属性会继承 13. 特殊选择器 后代选择器 子选择器（>） 相邻兄弟选择器（+） 通用兄弟选择器（~） 14. 高级布局技术 多列布局（column-count, column-gap） 形状外边距（shape-outside） 分区布局（container-type, container-name） 15. 性能优化 减少重绘和回流 使用合适的单位 最小化样式的使用

【前端|UNIAPP】编译APP后SoftInput配置 今天接到了甲方反馈,iOS系统下键盘呼出后在键盘顶部会有一个"工具条",通过查询相关文档,得到如下方案:App平台iOS端软键盘上方横条去除方案App平台在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。如不想显示这个横条，可以配置softinputNavBar: 'none'配置方式，在 pages.json 中配置 style"app-plus": { "softinputNavBar": "none" }如需使用js动态设置softinputNavBarthis.$scope.$getAppWebview().setStyle({ softinputNavBar: 'none' }) //this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效如果是nvue页面，iOS默认就没有键盘上方的横条，无需任何设置。但是这么设置了以后呢.编译到真机上发现还是有问题,一通百度后得知:需要再manifest.json里也配置一下,找到"app-plus",添加如下配置:"softinput":{ "navBar":"none" }首次编译后发现问题解决.但是后面再次调试的时候发现问题依旧...这个问题目前还在等待解决.后续有解决再继续更新...有解决方案的大佬也欢迎指导.

【前端|UNIAPP|NVUE】NVUE下SWIPER组件需求一例 最近用swiper做了一个滑动相册,然后相册滑动的过程中,会涉及一些弹窗提示,权限弹窗的一些配置,因为中间还涉及了video原生组件的问题,(编译了App).由于甲方的需求,要求弹窗提示要在下一张完全显示之前就出现.然后就开始尝试,首先@transition肯定是要用到的,然后原本打算的是配合@change就好,但是发现并不能完美实现想要的效果,于是又改用@animationfinish,发现在nvue下获取不到current,查阅文档发现如下提示:[v_error]如果 nvue 页面 @animationfinish 事件不能返回正确的数据，可同时监听 @change 事件。[/v_error]也就是说,nvue下还得同时调用@change才能获取到current.此时@change方法里可以不执行任何操作,把原本@change的操作放到@animationfinish里,然后@transition里判断滑动到一定位置的时候判断是否弹出提示即可.仅做记录,nvue下只调用@animationfinish不能访问正确的数据,可同时监听@change事件,也就是要同时调用三个方法.

【VSCode】ES-LINT提示插件提示屏蔽（非语法错误） 最近在用VSCode写代码的时候发现，ES-LINT会有一些莫名的提示，比如，我注释习惯用 //> 这样子的开头。。。但是在ES-LINT的默认提示里就会说必须在注释里强行加空格，也就是要 // >这样，才不会出错。。。又比如 我写一个switch, 根据习惯来说，case是不会和switch持平的。。。但是es-lint默认要求他们持平才不报错。。。综上所述，虽然编译过程中并不报错，但是编辑器里的这种提示很是扎眼。。。一通搜索之后，在.eslintrc的rules里增加如下规则： //>注释后不加空格 "spaced-comment": [ 0, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] } ]， //>switch对齐 "indent": [ 2, 2, { "SwitchCase": 1 } ],