CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。
1、table 布局
table 布局是最简单的布局方式了，下面我们来看一个简单的例子
（相关课程推荐：css视频教程）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
.container{
height:200px;
width: 200px;
}
.left{
background-color: red
}
.right{
background-color: green
}
</style>
<body>
<table>
<tbody>
<tr>
<td> 左 </td>
<td> 右 </td>
</tr>
</tbody>
</table>
</body>
</html>table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式
而且也加入了 display：table;dispaly:table-cell 来支持 teble 布局。用法如下
<style>
.table{
display: table
}
.left{
display: table-cell;
}
.right{
display: table-cell
}
</style>
<div>
<div></div>
<div></div>
</div>2、 flex 布局
盒模型：计算一个盒子占用的空间是 content + padding + border + margin
flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度，来看一个经典的三栏布局的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
.container{
height:200px;
width: 200px;
display: flex
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。
3、 float 布局
float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂
首先，什么是浮动？
浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 200px;
background-color:red;
}
.left{
background-color: yellow;
float: left;
height: 50px;
width:50px;
}
.right{
background-color: yellow;
float: right;
height: 50px;
width:50px;
}
</style>
<body>
<div>
<span>float</span>
<span>我是字</span>
<span>float</span>
</div>
<div style="height: 200px;background: blue">
</div>
</body>
</html>4、 响应式布局
1. meta
最简单的处理方式是加上一个 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
2. 使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。
3. media query
css2 允许用户根据特定的 media 类型定制样式，基本语法如下
@media screen and (max-width: 360px) {
html { font-size: 12px; }
}意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。
本文来自css答疑栏目，欢迎学习！
以上就是css布局有几种方式的详细内容，更多请关注0133技术站其它相关文章！
