1table布局
利用表格来布局，可以内容自动居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.a{
height: 100px;
width: 100px;
}
.b{
background-color: red;
}
.c{
background-color: blue;
}
</style>
</head>
<body>
<table class="a">
<tr>
<td class="b">1</td>
<td class="c">2</td>
</tr>
</table>
</body>
</html>代码运行结果如下
2盒子布局
2.1盒子模型介绍
css中，所以页面元素都在一个矩形盒子内，这个矩形被称为盒子。盒子描述了元素及属性在页面中布局中所占空间的大小，因此盒子可以影响其他元素的大小和位置。
2.2div
<div>标签定义HTML文档中的一个分割区块或者一个区域部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
</body>
</html>代码运行结果如下
要注意div元素是块级元素，块级元素是在页面上独占一行。如下所示。
html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: blue;
}
.box1{
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
</body>
</html>代码运行结果如下
行内元素是在页面上排在一行内。<a> <i>等都是行内元素。可以利用display的取值来实现行内和块级元素之间的相互装换。display: inline使块级元素转换成行内元素，display：block使行内元素转换成块级元素。
3浮动布局
通过float的取值来进行布局。
| fl0at:none | 默认值，不浮动。 |
| float:left | 左浮动。 |
| float:right | 右浮动。 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*float: left;*/
float:right;
}
.box{
background-color: blue;
}
.box1{
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
</body>
</html>左浮动会使后面的元素混乱。如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box{
background-color: blue;
float: left;
}
.box1{
background-color: pink;
float: left;
}
.box2{
background-color: green;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
</body>
</html>
代码运行结果如下
由上可以看出左浮动使后面的第三个div的样式出了问题。我们用clear来清除上面左浮动带来的影响。
| clear:none | 默认值，允许浮动 |
| clear:left | 清除左浮动 |
| clear:right | 清除右浮动 |
| clear:both | 清除两边浮动 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box{
background-color: blue;
float: left;
}
.box1{
background-color: pink;
float: left;
}
.box2{
background-color: green;
clear:left;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
</body>
</html>代码运行结果如下
4定位布局
定位布局包括相对定位和绝对定位等。相对定位对象不从文档流里面分离，通过设置top、left、right、bottom这四个方向的值进行定位（相较于自身的定位）。绝对定位将对象从文档流分离出来，通过设置top、left、right、bottom这四个方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.box{
background-color: blue;
}
.box1{
background-color: pink;
position: absolute;
top: 100px;
left: 100px;
}
.box2{
background-color: green;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
</body>
</html>代码运行结果如下
5弹性盒子
元素表现为 flex 框时，它们沿着两个轴来布局：
**主轴（main axis）**是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
**交叉轴（cross axis）**是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。.container
在 flex 容器中的弹性盒子元素被称之为 flex 项（flex item）。
| flex-direction | 指定了弹性盒子（弹性容器）中子元素的排列方式 |
| flex-wrap | 指定了弹性盒子（弹性容器）中子元素的换行方式 |
| justify-content | 修改了 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素的对齐， 而是设置行对齐 |
| align-items | 设置了弹性盒子子元素在侧轴的（纵轴）的对齐方式 |
| align-content | 设置了弹性盒子子元素在主轴的（横轴）的对齐方式 |
它们还有很多的取值，我偷个懒自己去查吧！