前端专业名词解释——Layout布局

表格(table)布局

将整个页面作为一个表格进行处理，通过设置单元格的大小来实现布局

• 优点：简单、兼容性好

• 缺点：灵活性差，占用资源多，页面渲染慢，搜索引擎抓取信息不方便

考虑到这样的缺点，table布局基本已被淘汰

浮动(float)布局

通过float属性，将元素设置为浮动元素，进行排列布局

• 优点：简单、兼容性好

• 缺点：会出现占位问题，脱离文档流，有时会造成父容器高度塌陷

目前仍有很多网页采用float布局，可以达到简单网页的基本要求，但是考虑到清除浮动很麻烦，float布局的使用也逐渐减少

定位(position)布局

通过position属性，将元素定位到要求的位置进行布局

• 优点：简单粗暴，便于和js搭配

• 缺点：绝对定位完全脱离文档流，可用性差

目前采用position布局的网页也不少，很多都是老网页没更新，考虑到实用性较低，使用率也逐渐减少

弹性(flex)布局

flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局

主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)

以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）

• 优点：简单易上手
• 缺点：浏览器兼容性比较差

flex布局是目前三大主流布局方式（float布局、flex布局、grid布局）之一，其“弹性”的特点很好的使用于响应式页面的开发

网格(gird)布局

grid布局是CSS中最强大的布局系统，是一个二维的栅格布局系统，意味着它可以同时处理列和行

• 优点：通过行列号精确定位，对齐方便
• 缺点：浏览器兼容性比较差

grid布局也是目前三大主流布局方式之一，不仅适用响应式页面的开发，同时也提供了更加灵活行列布局设置

结语

欢迎热爱编程的小伙伴关注我的github博客

以及我的github仓库

里面有一些前端小技巧以及python算法设计跟大家一起分享

我们一起每天进步一点点！