11.20学习日记

水平居中：

• inline-block和text-align实现

  
  
  inline-block

优点：兼容性好；
不足：需要同时设置子元素和父元素

• margin：0 auto实现

  
  
  margin

优点：兼容性好
缺点: 需要指定宽度

• table实现

  
  
  table

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

• flex实现
  关于flex布局的一些小资料
• Webkit 内核的浏览器，必须加上-webkit前缀。

• 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align（用align-items设置垂直）属性将失效

  
  
  flex

垂直居中

-flex实现

flex

-inline-box or table-cell实现

记得设置height

• 实现不了的position

  
  
  position

垂直水平居中

• flex实现

  
  
  flex

两列布局

• flex实现

  
  
  flex

三列布局

圣杯布局资料