CSS的布局包括:浮动布局、定位布局以及flex布局。
浮动布局:float
- float:left; 左浮动 浮动元素脱离文档流,原先位置不保留
- float:right; 右浮动
- clear: both; 清除浮动 清除兄弟元素的浮动影响
- overflow:hidden; 清除浮动,清除浮动 清除子元素的浮动对父元素产生的影响
定位 position
- 静态定位
position:static;
默认的文档流的位置 - 相对定位
position:relative;
相对于原来的位置进行定位
原先位置保留,不脱离文档流 - 绝对定位
position:absolute;
如果有定位的祖先元素,相对于离它最近的祖先元素定位
有祖先定位元素的绝对定位:为绝对定位元素的父元素设定"position:relative"可
以将这个父元素变为当前绝对定位元素的父元素。
如果没有定位的祖先元素,则相对于视口区的左上角定位
原先位置不保留,脱离文档流 - 固定定位
position:fixed;
定在浏览器(视口区)的某个位置上
原先位置不保留,脱离文档流
定位元素:使用相对定位、绝对定位、固定定位,定位的元素
定位元素才可以使用以下属性:left right top bottom
z-index 当两个绝对定位元素叠加在一起的时候,可以使用“z-index”来改变两个绝对定位元素出现
的顺序( z-index 取值无需指定单位,值大的显示在上方。 )
flex布局 也叫弹性盒布局-伸缩盒布局
-
flex-direction: row; 默认的,列布局
flex-direction: column; 行布局
flex-direction: row-reverse; 列布局的反转
flex-direction: column-reverse; 行布局的反转 -
主轴对齐方式
justify-content: flex-start; 默认的 从主轴的起点对齐
justify-content: flex-end; 主轴的终点对齐
justify-content: center; 项目在主轴上居中对齐
justify-content: space-between; 项目在主轴上,项目与项目之间有空间
justify-content: space-around; 项目四周有空间 -
交叉轴上的对齐方式
align-items: flex-start; 默认 交叉轴的起点对齐
align-items: flex-end; 交叉轴的终点对齐
align-items: center; 垂直居中
align-items: stretch; 如果项目没有设置高度将会占满整个容器的高度,默认的对齐方式
align-items: baseline; 基准线对齐 项目内部的文本对齐 -
换行 flex-wrap: wrap;
项目多了一个主轴放不下,可以换行显示
flex-flow: flex-direction flex-wrap
flex-flow: row wrap; -
多主轴在交叉轴上的对齐方式 如果只有一根主轴,该属性不起作用
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch; -
等比例划分 flex: 1;占满父元素剩余空间。
-
至小占据主轴上的空间 flex-basis: 200px;
flex: 200px 1;表示先分200px,再和其他的进行等比例划分
属性值的计算calc
例:如果左边div的宽要固定,而右边div要占满屏幕,可以设置左边的div的width:200px;右边的宽就是calc(100%-200px);