流体布局
什么叫流体布局?
简单的来说,就是网页缩小和放大时网页布局会随着浏览器的大小而改变!
由于页面中的宽度值都是百分数,所以拉伸、缩小浏览器的大小,布局的宽度会随之变化儿不会出现横向滚动条。这种布局叫做流体布局,可以增加文本的易读性。
但是流体布局也有缺点。在窗口宽度小的时候,行变得非常窄,很难阅读。在多列布局中尤其如此。并且,很多时候,会遇到文字溢出等情况!
举个实例:三列布局(左右固定;中间自适应)效果如截图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ width: 200px; height: 400px; background: plum; float: left; } .main{ margin-left: 220px; margin-right: 220px; height: 400px; background: powderblue; } .right{ width: 200px; height: 400px; background: greenyellow; float: right; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div> </body> </html>