布局
我们可以把网页理解成是由一个个盒子排列组合而成的,那么盒子之间又是怎么排列布局的呢?
网页常见的布局方式大概有五种:普通文档流布局、浮动布局(Float)、绝对布局(Absolute)、弹性布局(Flex)、网格布局(Grid)。
普通文档流布局
默认的布局方式,由块级元素(display: block)和行内元素(display: inline)等组成,元素之间按照从左到右,从上到下的顺序排列。
浮动布局
相对于普通文档流布局,浮动布局会脱离普通文档流,分为左右浮动,具体来说就是float的值为left和right,一般会在普通文档流布局的上面进行界面的布局,如果想避免浮动布局遮盖普通布局的情况,可以考虑使用清除浮动。
绝对布局
元素使用 position: absolute 属性进行绝对布局,使用绝对布局的元素会脱离文档流,然后根据top,bottom,left,right等属性值进行元素位置的改变,其定位是参考祖先元素中 position 为非 static 值的第一个元素。
弹性布局
也称 Flex 布局,是一个完整的模块,而不是一个单一属性,其中有的属性是设置在父元素上,有些则是设置在子元素上。如果我们说传统的布局是建立在块级元素和行内元素的文本流上,那么 Flex 布局就是建立在 flex-flow 的轴方向上的,而这个轴可以根据开发者的需要进行自主设置。
弹性布局语法-阮
弹性布局实例-阮
网格布局
是用于制定行与列的二维 CSS 布局方法,可以将页面分割成数个主要的区域,或者用来定义组件内部元素间的大小、位置和图层之间的关系。
网格布局参考文档
以上是常用的五种网页布局方法,在实际项目中,我们应该根据场景选择适当的方法。