css布局页面

---

布局

布局

---

1、传统布局 float

向需要横向布局的元素添加float属性 其值:left(左浮动)right(右浮动)

存在的问题:
使用float之后,所在的父级元素无高度,会导致下方元素向上移动

解决办法:
1、给父级元素设置高度(不推荐)
2、给父级元素设置overflow:hidden;达到父级高度之后，盒子随子级高度自适应的效果(推荐)

无法解决的问题：
1、元素之间的均匀分布需要计算,而且不一定均匀分布
2、元素均分父级需要计算,而且不一定实现均分
3、书写繁琐,代码冗余

2、传统布局 display:inline-block 内联块级元素

向需要横着布局的元素添加display:inline-block变为内联块级元素,内联块级元素不独占一行,对宽高支持

存在的问题:
使用之后元素之间产生莫名其妙的空隙,对整体的布局有影响
产生的原因:把换行和空格都当成空白

解决办法:
1、把元素标签首位相连，让他们之间没有空格(不推荐)
2、文字大小处理,给使用display:inline-block的父级元素设置字体大小为0 font-size:0；，并且该元素要有有效的字体大小;

无法解决的问题：
1、元素之间均匀分布需要计算,而且不一定均匀分布
2、元素均分父级需要计算,而且不一定实现均分
3、书写繁琐,代码冗余

3、现代布局 dislpay:flex弹性盒子

让多个元素横向布局,只需要给这些元素的父级元素添加 dislpay:flex

1、控制弹性盒子模型内子元素的排列方向 flex-direction

该属性取值如下:
row 横向从左到右排列
row-reverse 横向从右往左排列
column 纵向从上到下排列
column-reverse 纵向从下到上排列

2、设置弹性盒子内子元素是否换行 flex-wrap

取值如下:
wrap 换行
nowrap 不换行

3、设置弹性盒子内子元素的排列顺序

order作用到子元素上
属性值为一个整数,值越小,该子元素出现的顺序越靠前

4、flex 控制弹性盒子内子元素的缩放比例

复合属性，由三方面组成
flex-grow 拉伸因子 把想拉抻的元素加上一样的 flex-grow:1

先把剩下的空隙均匀的分成三份，然后再分配

这是按比例分，同理

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:空白元素均匀分布

效果可以叠加

8、示例

.top {
width: 700px;
height: 600px;
background: greenyellow;
display: flex;
/* flex-direction: column-reverse; */
flex-wrap: wrap;
justify-content: space-evenly;
/* align-items: baseline; */
align-content: space-evenly;

}

.left {
width: 200px;
height: 100px;
background: purple;
/* order: 5; */
/* flex-grow: 5 */
/* flex-shrink: 5; */

}

.middle {
width: 200px;
height: 100px;
background: grey;
/* order: 10; */
/* flex-grow: 2 */
/* flex-shrink: 2; */

}
.right {
width: 200px;
height: 100px;
background: yellow;
/* order: 1; */
/* flex-grow: 1 */
/* flex-shrink: 1; */

.bottom{
width: 800px;
height: 200px;
background: pink;

}

总结

布局