顺利完成了第一个静态页面代码的编写，在其中出现了很多问题，下面针对问题做一个复盘。
关于居中
- 方法① 使用flex布局。首先在父元素设置flex容器，并设置主轴对齐方式（注意，使用flex布局的时候不能使用浮动，浮动是无效的）
justify-content: space-around；
或者使用justify-content: space-between 与上面的有些许不同。
http://js.jirengu.com/jekanosuno/3/edit?html,output
方法② 使用绝对定位
position： absolute; top: 50%; left: 50%; transform:translate(-50%, -50%)绝对定位一定要在其父元素上加上相对定位。方法③ 使用负margin和浮动（注意使用负margin的时候，不能出现该对象的border，不然无法生效）
http://js.jirengu.com/nicigudeto/1/edit?html,output
方法③ 对于块级元素使用
margin：0 auto； 对于行内元素使用text-align：center-
方法④ 使用伪元素在第一个子元素的前面，然后占据整个高度，将其baseline设置为中线，然后使用
vertical-align: middle即可
image.png -
方法⑤ 在父元素中使用table-cell属性来实现对子元素的居中操作
image.png
关于伪元素的用法
- 使用after 伪元素在最后一个元素后面加上一个伪元素，可以用来清除浮动；撑开导航条；或者防止下面的inline-block上移；
-
使用before伪元素在第一个元素前面加上一个伪元素，可以用来给屏幕加上遮罩；添加新的元素。
添加遮罩
添加新的元素
关于伪类的用法：
-
对于伪类选择器，可以实现选择子元素中的第几个元素，然后添加相应的样式
对第偶数个子元素添加样式 -
可以实现点击背景变颜色的操作
image.png
小技巧
-
对于计算的写法，中间必须要加空格
image.png -
可以实现删除最后一个伪元素
image.png -
dl dt dd可以实现对文字的排版
image.png 对于padding和margin的使用，一般可以用padding的地方都用padding，不能用的再用margin。注意 ：margin-top,margin-bottom容易出现合并。子元素的 margin-top，父元素有时拦截不住
