前端初体验——css 布局 学习

布局，即把元素进行摆布，css布局主要分为三大部分：float普通盒子布局、内联块级盒子布局、弹性盒子布局。

1.float实现横向布局

需要向横着布局的元素本身添加float属性 其值left right

float: left;
float：right;

出现问题：若父级元素无高度 导致下方向上掩盖

解决办法：

    ① 给父级元素设置高度  不推荐

    ② 给父级元素设置 overflow:hidden；可使父级元素随子集元素高度自适应效果

.top{
    background: bisque;
    width: 800px;
    font-size: 0px; 
    overflow: hidden;
}
.left{
    background: rgb(255, 196, 251);
    width: 200px;
    height: 100px;
    float: left;
}

无法解决的问题：

    ①要使元素均分父级，需要计算空隙大小，且不一定能够均分

    ②元素之间的间距均分，需要计算且不易的能够均分

    ③书写比较繁琐 代码冗余

2 内联块级元素实现横向布局

需要向横向布局的元素添加display：inline-block；让其变为内联块级元素

display: inline-block;

出现问题：元素与元素之间会产生莫名的空隙 对整体布局产生影响

产生原因：浏览器会把空白换行识别为空格字符

解决办法：

    ①把元素首尾相连 或用更低一级应用打开（记事本） 不推荐

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

.top{
    background: bisque;
    width: 800px;
    font-size: 0px; 
    overflow: hidden;
}
.left{
    background: rgb(255, 196, 251);
    width: 200px;
    height: 100px;
    font-size: 16px;
    margin-left: 50px;
    display: inline-block;
}
.middle{
    background: rgb(196, 232, 255);
    width: 200px;
    height: 100px;
    font-size: 16px;
    margin-left: 50px; 
     display: inline-block; 
}

无法解决的问题：

    ①要使元素均分父级，需要计算空隙大小，且不一定能够均分

    ②元素之间的间距均分，需要计算且不易的能够均分

    ③书写比较繁琐 代码冗余

 3 弹性盒子布局

给要横着布局的元素的父级元素添加display：flex；

Ⅰ. flex-direction:

控制弹性盒子内子集元素的排列走向 取值如下：

column 纵向 从上到下

column-reverse 纵向从下到上

row 横向从左到右

row-reverse 纵向从右到左

flex-direction:column;
flex-direction:column-reverse;
flex-direction:row;
flex-direction:row-reverse;

Ⅱ. flex-wrap

控制弹性盒子内部元素是否换行

nowrap 不换行

wrap 换行

flex-wrap: wrap
flex-wrap: nowrap

Ⅲ. order

设置弹性盒子内部子元素的排列顺序。取值为整数 值越小越靠前 作用于子集元素

.left{
    width: 200px;
    height: 100px;
    order: 3;

}
.middle{
    width: 200px;
    height: 100px;
    order: 1;
}

Ⅳ.flex

复合属性 控制弹性盒子内子元素的缩放比例 取值为整数

flex-grow 拉伸因子

flex-shrink 压缩因子

flex-basis

flex-shrink: 2;
flex-grow: 4;

Ⅴ. justyfy-content

控制弹性盒子内子元素在排列方向上分布方式 取值如下:

flex-start 代表在排列方向上的开始位置分布

flex-end  代表在排列位置上的结束位置分布

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

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

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

space-arround 代表空白均匀的放到元素周围

.top{
    width: 800px;
    height: 300px;
    display: flex;
    justify-content: space-around;
}

Ⅵ. align-items

控制弹性盒子内子元素在垂直方向上的对齐方式

flex-start 顶部对齐 或左边对齐

flex-end 底部对齐 或右边对其

center 居中对齐

basisline 首行底部对齐（文字底部）

.top{
    width: 800px;
    height: 300px;
    display: flex;
    align-items:basisline;
}

Ⅶ  align-column

设置弹性盒子内部多行分布形式

flex-strat 所有行都靠近顶部 或左边

flex-end 所有行都靠近底部 或右端

center 所有行居中显示

space-between 代表空白均匀的放到行和行中间

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

space-arround 代表空白均匀的放到行的上下两侧

.top{
    width: 800px;
    height: 300px;
    display: flex;
    align-content:space-around;
   flex-wrap: wrap;
}