介绍几种简单的css布局方式。
两栏布局
<div id='left'>left</div>
<div id='right'>right</div>
#left {
float: left;
width: 100px;
}
#right {
margin-left: 100px;
}
两栏布局最简单的方式就是使用浮动，浮动其中一个元素，通常要给浮动的元素一个宽度，可以是固定值，也可以是百分数。添加浮动的元素脱离文档流，所以为了使非浮动元素显示完整，可以给非浮动元素添加一个外边距使内容远离浮动元素的遮盖。
另外，通常要在浮动元素的父元素中添加清除浮动类，代码如下。
.clearfix::after {
content: '';
display: block;
clear: both;
}
另外一种效果更好的方式是使用display: table;，此方式产生的两栏高度相同并且没有浮动产生的副作用。
<div id='table'>
<div id='table_row'>
<div class='table_cell'>1</div>
<div class='table_cell'>2</div>
</div>
</div>
#table {
display: table;
}
#table_row {
display: table-row;
}
.table_cell {
display: table-cell;
vertical-align: top;
}
三栏布局
三栏布局的实现方式和两栏布局基本相同。
- 第一种通过浮动。
<div class='left'>left</div>
<div class='center'>center</div>
<div class='right'>right</div>
.left {
float: left;
width: 100px;
}
.rigth {
float: right;
width: 100px;
}
.center {
margin: 0 100px;
}
同样的，要在浮动的父级元素添加清除浮动代码，同上。
- 第二种方式。
<div id='table'>
<div id='table_row'>
<div class='table_cell'>1</div>
<div class='table_cell'>2</div>
<div class='table_cell'>3</div>
</div>
</div>
#table {
display: table;
}
#table_row {
display: table-row;
}
.table_cell {
display: table-cell;
vertical-align: top;
}
水平居中
水平居中可分为几种情况.
- 第一种，内联元素的水平居中。
<div>p</div>
<nav>
<a>1</a>
<a>2</a>
<a>3</a>
</nav>
div, nav {
text-align: center;
}
- 第二种为块级元素的水平居中。
<div>
I'm a block level element and am centered.
</div>
div {
margin: 0 auto;
}
如果含有多个块级元素，则可以使用display: inline-block;将多个块级元素转换为内联块级元素，然后在它们的父级元素使用text-align: center;即可。
垂直居中
- 内联元素的垂直居中可以使用相同的上下内外边距形成，代码如下。
<div>I'm vertically centered multiple lines of text in a real table cell.</div>
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%);
}
以上就是一些基本的布局方式，实际情况可能会比这些复杂的多，要考虑浮动以及绝对定位会脱离文档流，各种布局方式同时使用时产生的意想不到的情况。
其他小技巧。
- 可以通过两种方式实现导航的水平排列。
- 将
li浮动。 - 将
li的显示设置为display: inline-block;。
- 将
- 在导航栏中，要实现浮动图片和导航的左右布局，可以在其父元素设置
width: 100%;来实现。 - 要制作进度条效果除了可以嵌套一个元素外，也可使用添加伪元素实现，方法基本相同。
- 在定义列表中想要将
dt与dd一对一并排排列，可以将两者都设置为浮动，并且添加width，分别设置为50%或者30%和70%，原理就是挤掉其他元素即可。
