前端开发中布局形式

「爱情、让人受尽委屈。」 2022-05-23 05:34 200阅读 0赞

### 布局 ###

我们可以把网页理解成是由一个个盒子排列组合而成的，那么盒子之间又是怎么排列布局的呢？

网页常见的布局方式大概有五种：普通文档流布局、浮动布局（Float）、绝对布局（Absolute）、弹性布局（Flex）、网格布局（Grid）。

##### 普通文档流布局 #####

默认的布局方式，由块级元素（display: block）和行内元素（display: inline）等组成，元素之间按照从左到右，从上到下的顺序排列。

##### 浮动布局 #####

相对于普通文档流布局，浮动布局会脱离普通文档流，分为左右浮动，具体来说就是float的值为left和right，一般会在普通文档流布局的上面进行界面的布局，如果想避免浮动布局遮盖普通布局的情况，可以考虑使用清除浮动。

##### 绝对布局 #####

元素使用 position: absolute 属性进行绝对布局，使用绝对布局的元素会脱离文档流，然后根据top,bottom,left,right等属性值进行元素位置的改变，其定位是参考祖先元素中 position 为非 static 值的第一个元素。

##### 弹性布局 #####

也称 Flex 布局，是一个完整的模块，而不是一个单一属性，其中有的属性是设置在父元素上，有些则是设置在子元素上。如果我们说传统的布局是建立在块级元素和行内元素的文本流上，那么 Flex 布局就是建立在 flex-flow 的轴方向上的，而这个轴可以根据开发者的需要进行自主设置。  
[弹性布局语法-阮][-]  
[弹性布局实例-阮][- 1]

##### 网格布局 #####

是用于制定行与列的二维 CSS 布局方法，可以将页面分割成数个主要的区域，或者用来定义组件内部元素间的大小、位置和图层之间的关系。  
[网格布局参考文档][Link 1]

以上是常用的五种网页布局方法，在实际项目中，我们应该根据场景选择适当的方法。

[-]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[- 1]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[Link 1]: https://developer.mozilla.org/zh-CN/docs/web/css/css_grid_layout/basic_concepts_of_grid_layout