CSS综合 杂谈

1. 说一说你平时写代码遵守的编码规范

我是借鉴腾讯AlloyTeam团队代码规范 再结合公司以前定制的方案 编写自己的代码。
代码不仅要能够运行实现功能，产品出来后还有不断的更新迭代 维护的很长一段过程 公司都是团队工作 规范化后
review 代码的时候就在心中有一套规范去查看代码 能够节省debug 查阅代码 沟通中产生的时间成本

2. 垂直居中有几种实现方式，给出代码范例

开始好奇
margin: 0 auto 可以 使块级元素水平居中 ·margin：auto 0 应该能使块级元素垂直居中，然而不行
例子1
不行的原因
CSS2的标准：计算高度时如果 margin-top 或 margin-bottom 的值为 auto, 则他们值为0

计算高度时如果 `margin-top` 或 margin-bottom 的值为 `auto`, 则他们值为0

开始思考
既然 auto不能用，于是自己这是 利用calc计算出元素居中的距离 向下移动 50% 在少移动自身高度一半 居中
例子2
CSS2的标准：如果使用百分比作为 margin-top的值，则百分比的基准是父元素的 宽度 宽度 宽度 是不是很蒙蔽
解决问题？
记得我们目的是让 元素向下移到居中的高度 margin-top是按父元素的宽度算 但是还有定位 的 top/bottom 是按父元素的高度算
例子三
真的解决问题？
设计说，帮忙在居中元素里面增加点内容，内容不固定 高度也可能会超过你设定的元素 你减去的元素高度是不固定的 这样就无法计算你要移动的高度了 所以没有真的解决问题（当然上面也是一个固定场景解决垂直居中的方法）

image.png

再次陷入深深的思考
在css属性里找呀找 找呀找 找呀找
找到一个属性名 为 vertical-align， 而且它还有个值 是 vertical-align: middle！ 用了用 然而并没卵用

查看文档： vertical-align是用来指定行内元素 和 table-cell 的垂直对齐方式；

尝试： 将元素转化为table 父元素加上 display: table, 为子元素 加上 display: table-cell 来将他们变成表格的样式， 在为子元素加上 vertical-align: middle
例子4
居中了 而且也跟子元素的实际高度无关 兼容性还好， 但是父元素的宽度变小了 原因是 table 本质上也是 inline 元素， 因此现在变成inline的父元素， 他的宽度将与子元素的宽度相同。 到时也可以在父元素加上 width: 100% 来强制指定宽度 （使用inline-block注意解决间隙问题）

另一个问题是子元素的高度变得和父元素一样高了。这对读者而言也许是问题，也许不是，就要自己考虑了

拥抱CSS3

之前我们用过 position： relative + top： calc（50% - height/2）的方法， 但是这种方法的缺点是需要知道子元素的高度， 但有了 transform 我们就可以用 translateY（-50%）来达到 -height/2 的 目的 而不需要知道居中元素的高度

例子五

真正的解决问题了么

  

    
 A paragraph 1 
    
 A paragraph 2 
  

如上 HTML 文件，我们为了居中 p1 和 p2，而为它们加了一个层包裹层 .vertical。虽然也不是什么难事，但在某些情形下，我们是不能修改文档的结构的，其中一种可能是文档的内容是动态生成的。也就是，我们希望在现有的文档结构下，让某些内容垂直居中，这也许是最后一个痛点了。

那么下面我们就来看看最终的杀器：flexbox。

真正解决问题（依然有兼容烦扰， 可以降级选择以上能够兼容方法）
解决问题三行代码， 足矣。。。。

image.png

(例子六)

代码题
代码