关于第一个静态页面

顺利完成了第一个静态页面代码的编写，在其中出现了很多问题，下面针对问题做一个复盘。

关于居中

• 方法① 使用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伪元素在第一个元素前面加上一个伪元素，可以用来给屏幕加上遮罩；添加新的元素。

  
  
  

  添加遮罩
  
  
  

  添加新的元素

关于伪类的用法：

1. 对于伪类选择器，可以实现选择子元素中的第几个元素，然后添加相应的样式

   
   
   

   对第偶数个子元素添加样式

2. 可以实现点击背景变颜色的操作

   
   
   

   image.png

小技巧

• 对于计算的写法，中间必须要加空格

  
  
  

  image.png

• 可以实现删除最后一个伪元素

  
  
  

  image.png

• dl dt dd可以实现对文字的排版

  
  
  

  image.png

• 对于padding和margin的使用，一般可以用padding的地方都用padding，不能用的再用margin。注意 ：margin-top,margin-bottom容易出现合并。子元素的 margin-top，父元素有时拦截不住