下面我们来看一下css布局的几种方法：
一、table 布局
table 布局是最简单的布局方式了，下面我们来看一个简单的例子
<!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 class=table>
<div class=left></div>
<div class=right></div>
</div>但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。
但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。
二、flex 布局
盒模型
在介绍 flex 布局之前，我们先了解一下盒模型的概念，这个是 css 最基础的概念，首先，我们引用一张图来解释
我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。
然后就是 border 区，border 区本身也是占据空间的。边框外面是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。
首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。
然后计算一个盒子占用的空间是 content + padding + border + margin
display / poistion
display 有如下几个值
block（元素表现为块级元素，有固定宽高，独占一行）
inline（元素表现为行内元素，不能设置宽高）
inline-block （对外表现为行内元素，对内表现为块级元素）
position 有如下几个值
static（默认情况，存在文档流当中）
relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）
position 的层叠是按顺序层叠的，不过可以通过设置 z-index 来改变层叠顺序，只有 relative，absolute，fixed 可以设置 z-index。
三、flexbox 布局
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>效果图：
四、float 布局
float 布局应该是目前各大网站用的最多的一种布局方式了。浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。
float布局特点：
对自身的影响
float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框
对父级元素的影响
从布局上 “消失”
高度塌陷
五、响应式布局
meta 标签
最简单的处理方式是加上一个 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。
media query
css2 允许用户根据特定的 media 类型定制样式，基本语法如下
@media screen and (max-width: 360px) {
html { font-size: 12px; }
}以上就是css怎么布局？的详细内容，更多请关注0133技术站其它相关文章！
