前端每周学习分享——第1期 (2)

在选择器中，由以下三种符号来表示扩展的关系：

- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态 type-block__element_modifier 1.6. 其他工具

cmder
在windows中使用的Linux终端，开发 必 备。

图床工具
自动把本地图片转换成网络链接的一类工具，云服务器+一键上传工具。
使用了图床工具PicGo， 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用。

markdown编辑器:Typora
界面清爽，功能齐全，支持图片拖拽。

google浏览器插件：Momentum
Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration

2.阅读列表

【前端词典】提高幸福感的 9 个 CSS 技巧

github tmt-workflow 一个基于Gulp、高效、跨平台、可定制的前端工作流程。

小程序 image跟view标签上下会有间隙

3.代码相关 3.1. flex弹性布局

使用display:flex|inline-flex将元素申明为弹性容器，flex是块级，inline-flex是行内。
flex container
属性的global values 有 inherit initial unset，下表近列出Default value

属性 值 意义
flex-direction   row column row-reverse column-reverse   决定主轴方向  
flex-wrap   nowrap wrap wrap-reverse(向上换行)   决定主轴上的换行方式  
flex-flow   || ;   简写，默认为row nowrap  
justify-content   start center end space-between space-around strench   主轴上的对齐方式  
align-items   start center end strench baseline   侧轴上的对齐方式  
align-content   start center end space-between space-around strench   多主轴间的对齐方式  

flex item

属性 值 意义
order     定义项目的排列顺序  
align-self   auto start center end strench baseline   覆盖容器的align-items属性，决定当前项目的侧轴对齐方式  
flex-grow     项目的放大比例，默认0（不放大）  
flex-shrink     项目的缩小比例，默认1  
flex-basis   | auto ;   项目在主轴上的初始大小（基准）  
flex     flex-grow, flex-shrink 和 flex-basis的简写  
3.2. 固定与自适应

需要定长定宽的组件，要考虑内容溢出。
自适应的组件，要考虑子元素变化时组件高宽变化的影响,比如当某些子元素加载后更改了宽高，就会使组件闪烁。
比如常用的单行文本:

.title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 3.3. 去除小程序button组件的边框

因为源码里button的边框不是直接用border实现的。
使用 button::after{ border: none; }
组件边框的实现方法有多种，如border、outline、box-shadow、底层遮罩

3.4.CSS变量

css变量使css更加灵活，能更方便的做响应式布局。

变量表示，sass用$，less用@，官方css用--。
变量的声明：

body { --fontColor:gray; --bar: "hello "; }

读取变量，使用var()函数：
变量值只能用作属性值，不能用作属性名

.text{ color:var(--fontColor,black); content:var(--bar)'world' }

如果变量值是一个字符串，可以与其他字符串拼接。

如果变量值是数值，不能与数值单位直接连用,可用calc()函数来连接。

变量带有单位值，不能写成字符串。
变量的作用域就是它所在选择器的有效范围，变量多次声明读取时的优先级与css的层叠规则一致。
js操作css变量

// 设置变量 document.body.style.setProperty('--primary', '#7F583F'); // 读取变量 document.body.style.getPropertyValue('--primary').trim(); // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary');