CSS（布局） 笔记04

1.float 实现横向布局，需要向横着布局的元素添加float属性 其值：left，right 

.top{
    background: pink;
    width:800px;
    overflow: hidden;
   /* 添加 */
}

.left{
    background:yellowgreen;
    width:200px;
    height:100px;
    float:left;
 /* 设置横向靠左排列布局，空间不够换行 */
}

.middle{
    background: purple;
    width:100px;
    height:200px;
    float:left;
}

.right{
    background:red;
    width:200px;
    height:100px;
    float:left;
}

[注意：单纯使用float存在问题，所在父级元素无高度会导致下方元素上移，容易造成局部布局覆盖问题 ]

解决方法：①给父级元素设置高度height （不推荐）

                  ②给父级元素设置overflow:hidden ;达到父级元素高度随自己高度自适应效果（推荐）

无法解决的问题：①元素均分父级，需要计算而且计算不一定能均分

                             ②元素之间的间距均匀分布，需要计算，而且不一均分

                             ③书写比较繁琐，代码冗余

 2.内联块级盒子实现横向布局：需要向横向布局的元素添加display:inline-block;,让其变成内联块级盒子；内联块级盒子特征：不独占一行，对宽度高度支持。

.top{
    background: pink;
    width:800px;
    overflow: hidden;
}

.left{
    background:yellowgreen;
    width:200px;
    height:100px;
    display:inline-block;
    /* 设置为内联块级盒子 */
}

 存在问题：使用display：inline-block;后，元素之间产生莫名间隙，对整体布局产生影响

 产生原因：浏览器会将空格换行和插入的文本都当成空白

 解决方法：①将元素首尾相接，手动消除空格换行（不推荐）

                   ②对文字大小进行处理，给使用display:inline-block的父级元素设置字体大小为0，并且该元素要设置有效字体大小

 无法解决的问题：①元素均分父级，需要计算且不一定能够均分

                             ②元素之间的间距均匀分布，需要计算且不一定能够均分

                             ③书写比较繁琐，代码冗余

3. 弹性盒子布局 （最佳）给父级元素添加display:flex;

相关配套属性：

1.flex-direction:控制盒子内子元素的排列方向(作用父级元素)，取值如下：

①column 纵向从上向下排列

②column-reverse 纵向从下到上排列

③row 横向从左到右排列

row-reverse 横向从右到左排列

.top{
    background: pink;
    width:1000px;
    height:500px;
    display:flex;
    /* 横向布局最佳 */
    flex-direction:column;
    /* 控制弹性盒子内子元素的从上到下排序 */
}  

2.flex-wrap: 控制盒子内是否换行（作用父级元素）

nowrap 不换行

wrap 换行

.top{
    background: pink;
    width:1000px;
    height:500px;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    /* 没有换行的话，元素存储空间不够时形式会被压缩，添加换行后，首行空间不足会向下一行存储 */

}  

3.order 设置弹性盒子内子元素的排列顺序（作用到子元素）

取值整数，且越小越靠前

.left{
    background:yellowgreen;
    width:200px;
    height:200px;
    order:3; 
}

.middle{
    background: purple;
    width:100px;
    height:100px;
    order:2;
}

.right{
    background:red;
    width:200px;
    height:100px;
    order:5;
}
/* order中，2<3<5，所以布局排序为middle-left-right
自start至end方向分布（具体方向依赖flex-direction） */

4.flex 复合属性（作用于子元素）

flex-grow:拉伸因子

flex-shrink:压缩因子（类同拉伸；如果不设置压缩因子，则默认width比例进行压缩）

【∴当设置子元素width均相等，且不设置压缩因子（或设置相等），则可以得到均分父级元素的效果】

flex-basis:基准元素（通常被宽高取代）

.left{
    background:yellowgreen;
    width:200px;
    height:200px;
    flex-grow: 5; /* left分得划分后的5比例 */
    /* 将剩余部分按照拉伸因子比例划分，再赋给各个子元素 */
}

5.justify-content 控制弹性盒子内子元素的分布方式（作用于父级元素），取值如下：

flex-start 代表在排序方向上的开始位置分布（与排列方向也有关）

flex-end 代表在排序方向上的结束位置分布

center 代表在排列方向上中间位置分布

space-between 代表空白均匀放到元素和元素之间

space-evenly 代表空白均匀放到各个间隙

space-around代表空白分布到元素周围

.top{
    background: pink;
    width:1000px;
    height:500px;
    display:flex;
    justify-content: space-between;
    /* 元素与元素之间 */
    justify-content: space-evenly;
    /* 各个间隙 */
    justify-content: space-around;
    /* 元素周围 */
}  

6. align-items 控制弹性盒子内子元素在垂直方向上的对齐方式

flex-start; 顶部对齐（或左边对齐）

flex-end; 底部对齐（或右边对齐）

center 居中对齐

baseline 文本首行底部对齐（适用于子元素字体大小不同时）

.top{
    background: pink;
    width:1000px;
    height:500px;
    display:flex;
    align-items: center;
    /* 中线对齐 */
}  

7.align-content 设置多行分布方式（作用于父级元素）

flex-start 所有行靠近顶部（或左端）

flax-end 所有行靠近底部（或右端）

center 所有行局中

space-between 空白均匀放到行与行之间 （类同于justify-content中的操作）

space-evenly 空白均匀放到各个间隙

space-around 空白分布到行的上下两侧