css布局

代码还有笔记。

/* 一、传统布局
需要横向布局的元素添加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;
}