一、传统布局 float
向需要横向布局的元素添加float属性其值:left(左浮动) right(右浮动)
存在的问题:使用float之后,所在的父级元素无高度,会导致下方元素向上移动
解决办法:
1、给父级元素设置高度(不推荐)
2、给父级元素设置overflow: hidden;若未设置父级高度,则实现随高度自适应的效果;如果已经设置了父级元素高度,则超出部分隐藏。(推荐)
无法解决的问题
1、元素之间均匀分布需要计算,而且不一定均匀分布
2、元素均分父级需要计算,而且不一定实现均分(如800px均分三份)
3、书写繁琐,代码冗余
二、传统布局 display:inline-block内联块级元素
向需要横着布局的元素添加display:inline-block变为内联块级元素,内联块级元素不独占一行,对宽高支持
存在的问题:使用之后元素之间产生莫名其妙的空隙,对整体的布局有影响(浏览器解析会把换行和空格都当成空白)
解决办法:
1、把元素标签之间不换行 (不推荐)元素很多的时候很复杂
2、文字大小处理,给使用display:inline-block的父级元素设置字体大小为0 font-size:0;但是父类中的元素都要字体大小
无法解决的问题(同第一种)
1、元素之间均匀分布需要计算,而且不一定均匀分布
2、元素均分父级需要计算,而且不一定实现均分
3、书写繁琐,代码冗余
三、现代布局dislpay:flex弹性盒子
让多个元素横向布局,只需要给这些元素的父级元素添加dislpay:flex
1、控制弹性盒子模型内子元素的排列方向flex-direction
该属性取值如下:
row 横向从左到右排列(默认)
row-reverse横向从右往左排列
column 纵向从上到下排列
column-reverse纵向从下到上排列
以row-reverse举例
2、设置弹性盒子内子元素是否换行flex-wrap
取值如下:
wrap 换行
nowrap 不换行(默认)
3、设置弹性盒子内子元素的排列顺序(作用到子元素,前面没写的作用到父元素)
order:属性值
属性值为一个整数,值越小,该子元素出现的顺序越靠前
4、flex 控制弹性盒子内子元素的缩放比例复合属性
flex-grow 拉伸因子
(flex-grow:1 根据子元素中的属性值设置比例大小,如果三个元素都是1,则把剩余部分每个子元素分三分之一)
flex-shrink压缩因子(超出部分按比例分,相减)
flex-basis 基准因子
5、控制弹性盒子内子元素的分布方式justify-content
该属性取值如下:
flex-start 代表在排列方向上的开始位置分布(默认)
flex-end代表在排列方向上的结束位置分布(注意区分row-reverse!!!)
center 代表在排列方向上的中间位置分布
space-between空白元素分布在元素中间 元素 空 元素 空 元素
space-around 空白元素分布在元素周围 空 元素 空 空 元素 空(元素左右都有空)
space-evenly空白元素均匀分散 空 元素 空 元素 空
6、控制弹性盒子内子元素在垂直方向上的对齐方式align-items
该属性取值如下:
flex-start 横向为顶部(纵向为左端)
flex-end 底部(右端)
center 居中对齐
baseline文字首行底部对齐
以center为例:
7、设置弹性合子内多行元素的分布方式性盒子内多行元素的分布方式align-content:
该取值如下(与5大致相同,只不过变成行之间的分布)
flex-start:所有行都靠近顶部(左端)
flex-end:所有行都靠近底部(右端)
center:多有行居中显示
space-between:空白元素分布在行与行之间
space-around:空白元素分布在行的周围
space-evenly:空白元素均匀分布