目录
一、标准流
标签在网页中的默认排布规则
例如:
块元素独占一行、行内元素可以一行显示多个
二、float浮动
让块元素水平排列
属性名:float
属性值:
left:左
right:右
特点:
1.顶对齐
2.具备行内块显示模式特点
3.浮动的盒子对脱离标准流
4.父级宽度不够,浮动的子级会换行
注意事项
如果父级的宽度不够,浮动的盒子会掉下来
清除浮动
场景:子级浮动,父级没有高度,子级无法撑开父级高度(可能导致页面错乱)
解决办法:清除浮动(清楚浮动带来的影响)
方法一:
在父级元素最后添加一个块级元素,设置css属性clear:both
.clearfix{clear:both}
方法二:单伪元素法
.clearfix::after{
content:"";
display:block;
clear:both;}
方法三:双伪元素法
.clearfix::before, #解决外边距塌陷问题
.clearfix::after{
content:";
display:table;}
.clearfix::after{
clear:both;}
方法四:overflow
父元素添加css属性overflow:hidden
三、 flex浮动
弹性布局,不会产生脱标
3.1flex组成
设置方式:给父级元素设置dlsplay:flex,子元素可以自动挤压或拉伸
组成部分:
弹性容器
弹性盒子
主轴:默认水平方向
侧轴:默认垂直方向
3.2 主轴对齐方式
属性名:justify-content
属性值:
flex-start:默认值,弹性盒子从起点依次排列
flex-end:弹性盒子从终点依次排列
center:沿主轴居中排列
space-between:空白间距均匀分布在弹性盒子之间
space-around:空白间距均匀分布在弹性盒子两侧
space-evenly:弹性盒子与容器之间间距相等
3.3侧轴对齐方式
给弹性盒子设置
align-items:控制当前容器的所有弹性盒子
align-self:控制单个弹性盒子
属性值
stretch:沿侧轴拉伸至铺满(弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center:沿侧轴居中排列
flex-start:从起点依次排列
flex-end:从终点依次排列
弹性盒子在侧轴方向没有磁场才能拉伸
3.4修改主轴方向
属性名:flex-direction
属性值:
row:水平方向(默认)
column:垂直方向
row-reverse:水平方向(从右往左)
column-reverse:垂直方向(从下往上)
3.5弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认都在一行显示
属性名:flex-wrap
属性值:
wrap:换行
nowrap:不换行(默认)
3.6行对齐方式
单行无效
属性名:align-content
属性值
flex-start:从起点依次排列(默认)
flex-end:从终点依次排列
center:沿主轴居中排列
space-between:空白间距均匀分布在盒子之间
space-around:空白间距均匀分布在合作两侧
space-evenly:弹性盒子与容器之间间距相等