CSS布局 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; }

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

1 2 3

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

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

p 1 2 3

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%); }

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

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