一 标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
二 浮动
1 认识
作用:让块元素水平排列。
属性名:float
属性值
- left:左对齐
- right:右对齐
特点:
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子脱标,不占用标准流的位置
2 清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)
方法一:额外标签法
在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
方法二:单伪元素法
.clearfix::after {
content: "";
display: block;
clear: both;
}
方法三:双伪元素法(推荐)
.clearfix::before,.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
方法四:overflow
父元素添加 CSS 属性 overflow: hidden
3 总结
-
浮动属性 float,left 表示左浮动,right 表示右浮动
-
特点
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块特点
- 父级宽度不够,浮动的子级会换行
- 浮动后的盒子脱标
-
清除浮动:子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果
- 双伪元素法
-
拓展:浮动本质作用是实现图文混排效果
三 Flex 布局
1 什么是弹性布局
主要解决某个元素中内部子元素的布局方式,为布局提供的非常大的灵活性和操控性
设置了display:flex的元素本身不是弹性布局
它的儿子们是弹性布局
2 弹性布局的专业术语
- 弹性容器
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这个元素叫做弹性容器 - 弹性项目
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这些子元素,叫做弹性项目 - 主轴
项目的排列方向,称为主轴
x轴,主轴起点在左侧,主轴终点在右侧
x轴,主轴起点在右侧,主轴终点在左侧
y轴,主轴起点在顶部,主轴终点在底部
y轴,主轴起点在底部,主轴终点在顶部 - 交叉轴
永远与主轴垂直相交的一根轴
主轴可以设置,交叉轴不能设置,只会自动根据主轴方向改变
3 语法
display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器
特点:
- 当元素变为弹性容器之后,这个容器的text-align失效,内部项目不会执行水平对齐
- 弹性项目,可以设置宽高
- 项目的浮动,clear:both都失效
- 总结:之前所有学习过的对齐方式,对于弹性项目都失效。弹性项目的对齐,取决于主轴、交叉轴
4 样式属性
容器的样式
所有项目都要用
- 主轴方向(4根主轴)
flex-direction:row; 默认值,主轴为x轴,主轴起点在左侧
row-reverse 主轴为x,主轴起点在右侧
column 主轴为y轴,主轴起点在顶部
column-reverse 主轴为y轴,主轴起点在底部 - 项目换行
flex-wrap:nowrap;默认值,主轴方向空间不够也不换行,项目压缩
wrap 主轴方向空间不够时,项目自动换行
wrap-reverse; 交叉轴终点对齐,主轴方向空间不够时,反方向换行 - 上面两个属性的缩写方式
flex-flow:direction wrap; - 定义项目在主轴上的对齐方式
justify-content:
flex-start 默认值,主轴起点对齐
center; 主轴的中心对齐
flex-end 主轴的终点对齐
space-around 每个项目的间隙相同
space-between 两端对齐 - 交叉轴上对齐方式 (2根)
align-items
flex-start 默认值。在交叉轴起点对齐
center 交叉轴中间对齐
flex-end 交叉轴终点对齐
baseline 每个项目中的文本,基线要对齐
stretch 项目在交叉轴方向上没有定义尺寸,项目将充满交叉轴
项目的样式
某一个项目使用
- 给某个项目单独设置交叉轴上的对齐方式
align-self
flex-start 默认值。在交叉轴起点对齐
center 交叉轴中间对齐
flex-end 交叉轴终点对齐
baseline 每个项目中的文本,基线要对齐
stretch 项目在交叉轴方向上没有定义尺寸,项目将充满交叉轴
auto 使用容器定义的align-items的值 - 项目在主轴上的排列顺序 order
取值为无单位整数
定义项目的排列顺序,值越小,越靠近主轴起点,默认值为0 - flex-grow
当主轴有多余的区域,项目是否放大,放大比例是多少
默认值为0,不放大
把多余的区域,按照比例分配,加上原始的尺寸,就是每个项目的实际尺寸 - flex-shrink
当弹性布局设置主轴不可换行,当主轴空间不够,项目们会自动收缩主轴方向上的尺寸
flex-shrink用来设置项目收缩时的大小
把整个主轴方向压缩的尺寸分为n份,设置每个项目具体被压缩几份
flex-shrink:取值为数字,默认值为1,取值为0是不许压缩 - flex-basis
设置某个项目在主轴上占据的基本尺寸,通常取值为%
flex-basis优先级大于项目自己定义的尺寸
一般不给图片设置此尺寸 - flex-grow flex-shrink flex-basis的缩写
项目具体被压缩几份
flex-shrink:取值为数字,默认值为1,取值为0是不许压缩 - flex-basis
设置某个项目在主轴上占据的基本尺寸,通常取值为%
flex-basis优先级大于项目自己定义的尺寸
一般不给图片设置此尺寸 - flex-grow flex-shrink flex-basis的缩写
flex:0 0 20%;