css布局

css页面布局是对页面的文字、图像或表格进行格式化排列,网页布局对改善网站的外观非常重要。

1.左右布局
float实现左右布局

float属性是css中关于布局的一个关键属性，其意为将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。 float属性属于布局属性，其中有着很多重要应用。 代码 输出

2.左中右布局
float实现左中右布局

代码 输出

3.水平居中

• text-align:center;
  该方法可以水平居中块级元素中的行内元素，如inline，inline-block；
  代码 输出
• margin:0 auto；
  对于已知width的块级元素，可以用margin：0 auto来设置水平居中。
  代码 输出

4.垂直居中

• line-height
  对于已知height的单行文本，设置line-height=height的值，即可实现垂直居中。

  
  输出

• vertical-align: middle

  
  代码
  输出

• 绝对定位和负边距

  
  代码 输出

5.等其他小技巧

• background:cover
  图片可以盖住当前容器，并且自适应容器窗口；
• vertical-align:center
  元素可以在不写高度的情况下，垂直居中在father容器中；
• display:inline-block;后面要加vertical-align:top;去除当前div空白的bug;