一、浮动布局
- float ( 如果一个元素添加float属性,那么这个元素就会成为一个浮动元素 )
left 向左浮动元素
right 向右浮动元素
none 【默认值】,不浮动
inherit 浮动方式继承父元素
- 浮动元素的特点
当一个元素是浮动元素的时候,它会失去对父元素的支撑
- 清除浮动
1. 给父元素添加overflow : hidden;
2. 使用伪元素 : : after
二、定位布局
position
static 静态(默认) 非定位元素
relative 相对定位 定位元素
相对的是元素原先的位置,
不脱离文档流
可以覆盖在其他元素上
absolute 绝对定位 定位元素
相对的是距离它最近的父定位元素的位置,如果没有父定位元素,那么它相对于浏览器视口
脱离文档流(不占据原先的位置)
fixed 固定定位 定位元素
相对于浏览器视口
脱离文档流
不会随着浏览器的滚动而滚动
sticky 粘滞定位 定位元素
不脱离文档流
使用top、right、bottom、left设置一个过渡点,当超过这个过度点的时候就会体现fixed固定在页面上
默认文档流的特点:默认宽度由内容决定,不占据原先的位置(原先的位置被其他元素抢占)
三、flex布局 ( 伸缩盒布局 )
flex布局
① 任何一个容器都可以指定为flex容器
采用Flex布局的元素,成为Flex容器,它的所有字元素成为Flex项目
容器默认存在两根轴:水平的主轴和垂直的交叉轴
② 当我们为父盒子设为flex布局后,子元素的float、clear属性即将失效
③ 给父元素设置display:flex,达到控制子元素的目的
常见父项(容器)属性
flex-direction : 设置主轴的方向
row(默认值):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
justify-content :设置主轴上的子元素排列方式
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧间隔相等,
所以,项目之间间隔比项目与边框的间隔大一倍
flex-wrap:设置子元素是否换行
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
align-content :设置侧轴上的子元素的排列方式(多行)
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间平均分布
space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)
align-item:设置侧轴上的子元素排列方式(单行)
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目没设置高度或设auto,将占满整个容器
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
项目的属性
order
该属性定义了项目的排列顺序,数值越小,排列越靠前,默认0
flex-grow
该属性定义了项目的放大比例,默认0,即如果存在剩余空间,也不放大
flex-shrink
该属性定义了项目的缩小比例,默认为1,即如果剩余空间不足,该项目将缩小
flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式