代码还有笔记。
/* 一、传统布局
需要横向布局的元素添加float属性其值 left(左浮动)right(右浮动)
存在的问题:使用float之后,所在的父级元素如果没有高度,会导致下方的元素向上移动,产生多重元素重合的问题
解决办法 :1、给父亲设置高度,如height:100px(不推荐)
2、给父亲设置overflow:hidden;达到父级高度随自己高度自适应的效果(推荐使用)
无法解决的问题:1、元素之间的间距均匀分布需要计算,而且不一定能够均匀分布
2、元素均分父级空间需要计算,而且不一定能够均分
3、书写比较繁琐,代码冗余 */
/* 二、传统布局,display:inline-block内联块级元素
存在的问题:使用display:inline-block之后,元素之间会产生莫名其妙的空隙(空白),对整体布局产生影响
原因:浏览器会把换行,空格当成空白做处理
解决办法:1、元素首位相连(不推荐)
2、对文字大小进行处理,给使用display:inline-block的父级元素设置字体大小为0该元素也要设置有效的字体
无法解决的问题:1、元素之间的间距均匀分布需要计算,而且不一定能够均匀分布
2、元素均分父级空间需要计算,而且不一定能够均分
3、书写比较繁琐,代码冗余 */
/* 二、 现代布局(display:flex)弹性盒子 想让多个元素横着布局,给父级元素添加 display:flex*/
/* 1、 flex-direction控制弹性盒子模型子元素的排列方向 该属性支持如下值;
row:横向从左到右排列
row-reverse横向从右到左排列
column:纵向从上到下排列
colum-reverse纵向从下往上排列 */
/* 2、 flex-wrap:控制弹性盒子内元素是否换行,该属性支持如下值;
nowrap:不换行
wrap: 换行 */
/* 3、order设置弹性盒子内子元素的排列顺序,作用到子元素,值是一个整数值,值越小,子元素顺序越靠前*/
/* 4、flex,复合属性,控制弹性盒子内子元素的缩放比例,作用到子元素
flex-grow:拉伸因子
flex-shrink: 压缩因子
flex-basis:基准因子
*/
/*5、 justify-content 控制弹性盒子内子元素的分布方式 该属性支持如下值;
flex-start:代表子元素分布在开始位置
flex-end:代表子元素分布在结束位置
center:代表子元素分布在中间位置
space-between:代表空白元素分布在元素和元素之间
space-around:代表空白元素均匀分布在元素周围
space-evenly:代表空白元素均匀分散 */
/* 6、align-items: 控制弹性盒子内子元素在垂直方向上的对齐方式,该属性支持如下值:
flex-start:顶部(或左边)对齐
flex-end: 底部(或右边)对齐
center: 居中对齐
baseline 首行底部对齐 */
/* 7、 align-content 设置弹性盒子内多行元素的分布方式 该属性支持如下值:
flex-start 所有行都靠近顶部(或左端)
flex-end 所有行都靠近底部(或右端)
center 所有行都居中显示
space-between空白元素均匀放到各行之间
space-around空白元素均匀放到各行周围
space-evenly空白元素均匀分布 */
.top {
width: 900px;
background: yellow;
height: 700px;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-between;
align-items: center;
}
.left {
width: 200px;
height: 80px;
background: greenyellow;
}
.middle{
width: 200px;
height: 150px;
background: turquoise;
}
.right{
width: 200px;
height: 100px;
background: plum;
}
.bottom{
width: 800px;
height: 300px;
background: pink;
}