css撰写细节录

开发过程中还是会遇到一些样式问题调整半天，但我觉得一个前端程序员很不应该在样式上过于浪费时间，也还是因为自己的css基础不够牢固，对css渲染的理解过于表面。以下记录一些让我浪费很多时间的css样式，以及觉得有意义的tips：

1. 垂直居中

1. 单行文字或图片，容器高度固定
2. 多行文字或图片，容器高度固定
3. 内容高度固定，容器高度不固定
   。。。等等

2.设置滚动条样式

1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
   ::-webkit-scrollbar-button 滚动条两端的按钮
   ::-webkit-scrollbar-track 外层轨道
   ::-webkit-scrollbar-track-piece 内层滚动槽
   ::-webkit-scrollbar-thumb 滚动的滑块
   ::-webkit-scrollbar-corner 边角
   ::-webkit-resizer 定义右下角拖动块的样式
2. 插件nicescroll 查看源码 (低优先级)

3.深入理解 vertical-align

1. https://segmentfault.com/q/1010000007314504?_ea=1305721
2. https://blog.csdn.net/lulujiajiawenwen/article/details/8245201

4. 伪类和伪元素

5.文字溢出显示省略号 纯css实现（虽然很常用但是。。）

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis

6. 深入理解box-sizing和display

1. display常用属性block inline-block inline 这几个应该很清楚并熟练运用
2. 不常用的table等代表啥意思呢？了解一下并查找可能会用到的场景
3. dispaly:flex flex布局认真看一下

7.font-weight 为何大于600才生效？
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight