css 实战技巧

css 看起来比较简单，但是要想做的好也不是那么容易，我们在平时开发中，主要用css 来美化我们的html结构，所有我觉得css 还是挺重要的，这里记录整理一些关于css 的技巧以及容易忘记的知识点。

1、css 问题解决思路

在遇到css问题时，我一般从以下思路来思考

1. 从元素本身的属性出发，组合各种可能；
2. 如果第一步没有成功，那么在元素之外（或者之内）套一层元素，再次尝试；
3. 一般问题都能在第二步解决，如果还是没有，那就要求助场外观众了（before和after）;
4. 还不行的话，则看看有没有不知道的某个新特性可以解决问题，最后不行就咨询相关同事或者查阅相关css 规范吧；

2、css 解析

　　css 从右边往左开始解析，过多的嵌套会影响性能，最好不要超过三层。css 尽可能的复用代码块，减少重复代码 ,如scss 变量，@mixin 等

3、命名使用一些规范，如BEM

具体BEM 这里不介绍，可以自行查阅官网： http://getbem.com/introduction/，最开始的时候看到BEM 规范时比较排斥的，因为感觉命名有点奇怪，后面在尝试使用之后确实要清晰很多，现在感觉优点主要有以下两点

• 可以让 CSS 的优先级保持相对扁平。
• 你能立即知道哪些东西是一个子元素。

4、单行文字居中，多行居左

• 利用行内元素宽度等于内容宽度，外层盒子在设置居中
• 利用width: fit-content 可以实现元素收缩效果的同时，保持原本的block水平状态，还有其他几个属性，可以感兴趣可以在网络上查看下
• 利用flex 布局

预览 code pend

5、文本两端对齐

使用 text-align:justify; 要多行才生效，如果是当行记得用伪元素

预览 code pen

6、伪类 :nth-child(an+b)

这个伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合。

其中n是一个变量，可以是一个数字，一个关键字，或者一个公式。n从0开始取值（但是匹配的元素的集合始终是从1开始），每次n+1后代入计算，最终得出一个位置的数组，比如：p:nth-child(2n+1)

n=0时 2n+1=1 // 匹配这个兄弟元素集合中的，第1个元素以此类推计算

n=1时 2n+1=3

n=2时 2n+1=5

所以就等价于p:nth-child(1)和p:nth-child(3)和p:nth-child(5)...取得是一个集合，也就是位置是1、3、5...

其他的也可以这样推导出来

备注：匹配的元素集合排序从1开始，但是当表达式中有n 时，这个n 是从0 开始的（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序）

预览 code pen

-------------------------------------------待更新--------------------------------