CSS布局

介绍几种简单的css布局方式。

left
right

#left {
  float: left;
  width: 100px;
}
#right {
  margin-left: 100px;
}

两栏布局最简单的方式就是使用浮动，浮动其中一个元素，通常要给浮动的元素一个宽度，可以是固定值，也可以是百分数。添加浮动的元素脱离文档流，所以为了使非浮动元素显示完整，可以给非浮动元素添加一个外边距使内容远离浮动元素的遮盖。
另外，通常要在浮动元素的父元素中添加清除浮动类，代码如下。

.clearfix::after { 
  content: '';
  display: block;
  clear: both;
}

另外一种效果更好的方式是使用display: table;，此方式产生的两栏高度相同并且没有浮动产生的副作用。


  
    1
    2

#table {
  display: table;
}
#table_row {
  display: table-row;
}
.table_cell {
  display: table-cell;
  vertical-align: top; 
}

三栏布局的实现方式和两栏布局基本相同。

left
center
right

.left {
  float: left;
  width: 100px;
}
.rigth {
  float: right;
  width: 100px;
}
.center {
  margin: 0 100px;
}

同样的，要在浮动的父级元素添加清除浮动代码，同上。

#table {
  display: table;
}
#table_row {
  display: table-row;
}
.table_cell {
  display: table-cell;
  vertical-align: top; 
}

水平居中可分为几种情况.

div, nav {
  text-align: center;
}


   I'm a block level element and am centered.

div {
  margin: 0 auto;
}

如果含有多个块级元素，则可以使用display: inline-block;将多个块级元素转换为内联块级元素，然后在它们的父级元素使用text-align: center;即可。

I'm vertically centered multiple lines of text in a real table cell.

div {
  padding: 20px 0;
  margin: 10px 0;
}

或者可以是用line-height来实现。

div {
  height: 100px;
  line-height: 100px;
}

还可以使用display: table;来实现。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical: middle;
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上就是一些基本的布局方式，实际情况可能会比这些复杂的多，要考虑浮动以及绝对定位会脱离文档流，各种布局方式同时使用时产生的意想不到的情况。

可以通过两种方式实现导航的水平排列。
1. 将li浮动。
2. 将li的显示设置为display: inline-block;。
在导航栏中，要实现浮动图片和导航的左右布局，可以在其父元素设置width: 100%;来实现。
要制作进度条效果除了可以嵌套一个元素外，也可使用添加伪元素实现，方法基本相同。
在定义列表中想要将dt与dd一对一并排排列，可以将两者都设置为浮动，并且添加width，分别设置为50%或者30%和70%，原理就是挤掉其他元素即可。