CSS常用布局

2018-08-27 本文已影响0人陈泽chanzed

一、左右布局

HTML部分：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
 <div class="left"></div>
 <div class="right"></div>
</div>
</body>
</html>

1. float+margin-left实现

.wrapper{
  content: "";
  display: block;
  clear: both;
}
.left{
  background-color: yellow;
  width: 100px;
  height: 300px;
  float: left;
}
.right{
  background-color: green;
  margin-left:120px;
  height:400px;

2. position+margin-left实现

.wrapper{
  position: relative;
}
.left{
  width:100px;
  height:300px;
  background-color: yellow;
  position: absolute;
}
.right{
  height: 500px;
  background-color: green;
  margin-left: 120px;
}

3. flex实现

.wrapper{
  display: flex;
}
.left{
  background-color: yellow;
  width: 200px;
  height: 500px;
}
.right{
  background-color: green;
  flex: 1;
}

二、左中右布局

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>
</body>
</html>

1. position+margin实现

.wrapper{
  position: relative;
}
.left{
  height: 400px;
  width: 100px;
  background-color: yellow;
  position: absolute;
  top: 0;
  left: 0;
}
.right{
  height: 400px;
  width: 100px;
  background-color: yellow;
  position: absolute;
  top: 0;
  right: 0;
}
.main{
  height: 500px;
  background-color: green;
  margin-left: 110px;
  margin-right: 110px;
}

2. float+margin实现

.warpper{
  content:"";
  display: block;
  clear: both;
}

.left{
  float: left;
  width: 100px;
  height: 400px;
  background-color: yellow;
}

.right{
  float: right;
  width: 100px;
  height: 400px;
  background-color: yellow;
}

.main{
  background-color: green;
  height: 400px;
  margin-left: 110px;
  margin-right: 110px;
}

三、水平居中

1. inline 或 inline-* （像链接、文本）元素水平居中

可以在其display为block的父元素上加上text-align: center;属性

<style>
  .parent{
    text-align: center;
}
.child{
  display: inline-block;
  border: 1px solid red
}
</style>

 <div class="parent">
    这是居中的
    <div class="child">你好</div>
    <span>你的名字</span>
    <a href="#">百度一下</a>
 </div>

2. block元素

在该元素上加margin: 0 auto;属性

<style>
.center-me{
  margin: 0 auto;
  background-color: pink;
  width: 100px;
}
</style>
<div class="center-me">你的名字</div>

3. 多个块元素水平居中

将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:

.parent {
    text-align:center;
}

4.多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

.parent {
    display:flex;
    justify-content:center;
}

四、垂直居中

1. 单行的行内元素解决方案

.parent {
    background: #222;
    height: 200px;
}
 
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

2. 多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 以下属性垂直居中 */
    display: table-cell;
    vertical-align:middle;
}

3. 已知高度的块状元素解决方案

.item{
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    position: absolute;
    padding:0;
}