传统的table布局
以前我们都是用HTML标签搭网页，固定的布局，看着规规矩矩的。对了，简单的页面还行，复杂的就会乱得跟毛线团似的，修也费劲。因为啥？就因为内容和样式搅合到一块去了，到了后面调来调去特别麻烦。现在，更牛的CSS布局出来了，所以这种老式的表格布局慢慢被淘汰咯。
浮动布局
悬浮布局就是把一些东.西悬空放旁边，像要让某个东西围着另一个打转，就可以设置左右飘动。但要小心，别让这种方法搞乱别的布局，记得顺便清除浮动以免碍事。在响应式设计上，这种做法对各种大小和设备的屏幕就不那么友好了，得加很多媒体查询代码来适配这些变化。
定位布局
说到排版，其实就是把页面里的东西放在想放的地儿呗。有两个方法：一是相对定位，就看它和旁边东西的距离怎么样；二是绝对定位，就像是跟着爸爸走路那样老实；还有一种叫固定定位，就是比较固执，只盯着你的浏览器窗口。虽然这挺方便，但是做响应式网站的话，位置老是得换来换去，所以可能用起来不是那么顺手。
<table>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
Flexbox布局
说个大新闻，CSS3出了个厉害的玩意儿，叫Flexbox，可以让元素在主（Main）和交叉（Cross）轴上随便拖拽。只要给容器添个display: flex，然后每个元素配点flex属性啥的，网页就能自由调整大小，排列也随心所欲。利用Flexbox把元素排整齐，不管横着还是竖着，水平和垂直中间对齐啥的统统都不是事儿，简直太方便~
Grid布局
.left {
float: left;
width: 100px;
}
.right {
float: right;
width: 100px;
}
左边内容
右边内容
试试CSS3那个牛逼闪闪的动态布局Grid系统，可以随意搞酷美的元素布局了！特别适合应对那些超难搞的布局设计。而且大网页、多列排列统统没毛病。Grid还特有意思，能随心所欲地把东西拉来拉去，还能给每个区域起个昵称。只要用了Grid，无论屏幕大小如何，都能让你看到最棒的网页效果！
如何选择合适的网页布局方式
做网页布局可不能随便选！简单页面或者需要兼容旧浏览器？用表格布局搞定；想网站布局整洁灵活又不太费劲？试试Flexbox吧；要弄复杂版面结构？还得是Grid布局出场。一提响应式设计，别忘了手机电脑啥的屏幕大小可不一样，按需选择布局就好了。
结合多种网页布局方式
.container {
position: relative;
width: 200px;
height: 200px;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
}
定位内容
每次给网页排版都会遇到各种奇怪需求，只能想尽办法把最好看的呈现出来。举个栗子，有的时候页面要按照网格做布局，但有些地方还要像移动设备那样自由漂浮。这时候，就得聪明点儿，把两种方法结合到一起，这样就能轻松应对各种复杂页面，提高工作效率
响应式设计与网页布局
好消息嘞！你们爱不释手的手机和平板电脑越来越普及，这对我们做网页可就添堵了。要是还坚持只用古老的表格、浮动和定位，那可得小心了，毕竟咱们的设备可是各种各样大小不同呀。幸亏现在有Flexbox和Grid两大神器在手，要解决这种困扰就跟玩儿似的。简单来说，只要咱把它们跟媒体查询技术搭配起来，不论什么设备上，你的网页都能棒棒哒！
总结与展望
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
Flexbox布局内容
你知道吗？网页布局变得越来越花样翻新！以前我们用table，如今Flexbox和Grid成为了主流，做网页更加Easy peasy!但是，选什么布局要根据你自己的需求来定开头弄错可就麻烦了。而且，前端技术还在不断发展，说不定哪天又有新的神奇布局等待我们去发掘！
评论0