CSS布局

2018-10-08 本文已影响0人饥人谷_王捷

介绍几种简单的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%);
}

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

其他小技巧。

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