欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS布局汇总

程序员文章站 2022-04-30 11:09:16
...

笔记放在Github上,点击访问下载


CSS的布局包括:浮动布局定位布局以及flex布局


浮动布局:float

  1. float:left; 左浮动 浮动元素脱离文档流,原先位置不保留
  2. float:right; 右浮动
  3. clear: both; 清除浮动 清除兄弟元素的浮动影响
  4. overflow:hidden; 清除浮动,清除浮动 清除子元素的浮动对父元素产生的影响

定位 position

  1. 静态定位 position:static; 默认的文档流的位置
  2. 相对定位 position:relative; 相对于原来的位置进行定位
    原先位置保留,不脱离文档流
  3. 绝对定位 position:absolute;
    如果有定位的祖先元素,相对于离它最近的祖先元素定位
    有祖先定位元素的绝对定位:为绝对定位元素的父元素设定"position:relative"可
    以将这个父元素变为当前绝对定位元素的父元素。
    如果没有定位的祖先元素,则相对于视口区的左上角定位
    原先位置不保留,脱离文档流
  4. 固定定位 position:fixed;
    定在浏览器(视口区)的某个位置上
    原先位置不保留,脱离文档流
    定位元素:使用相对定位、绝对定位、固定定位,定位的元素
    定位元素才可以使用以下属性:left right top bottom

z-index 当两个绝对定位元素叠加在一起的时候,可以使用“z-index”来改变两个绝对定位元素出现
的顺序( z-index 取值无需指定单位,值大的显示在上方。 )


flex布局 也叫弹性盒布局-伸缩盒布局

  1. flex-direction: row; 默认的,列布局
    flex-direction: column; 行布局
    flex-direction: row-reverse; 列布局的反转
    flex-direction: column-reverse; 行布局的反转

  2. 主轴对齐方式
    justify-content: flex-start; 默认的 从主轴的起点对齐
    justify-content: flex-end; 主轴的终点对齐
    justify-content: center; 项目在主轴上居中对齐
    justify-content: space-between; 项目在主轴上,项目与项目之间有空间
    justify-content: space-around; 项目四周有空间

  3. 交叉轴上的对齐方式
    align-items: flex-start; 默认 交叉轴的起点对齐
    align-items: flex-end; 交叉轴的终点对齐
    align-items: center; 垂直居中
    align-items: stretch; 如果项目没有设置高度将会占满整个容器的高度,默认的对齐方式
    align-items: baseline; 基准线对齐 项目内部的文本对齐

  4. 换行 flex-wrap: wrap;
    项目多了一个主轴放不下,可以换行显示
    flex-flow: flex-direction flex-wrap
    flex-flow: row wrap;

  5. 多主轴在交叉轴上的对齐方式 如果只有一根主轴,该属性不起作用
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-around;
    align-content: space-between;
    align-content: stretch;

  6. 等比例划分 flex: 1;占满父元素剩余空间。

  7. 至小占据主轴上的空间 flex-basis: 200px;
    flex: 200px 1;表示先分200px,再和其他的进行等比例划分


属性值的计算calc

例:如果左边div的宽要固定,而右边div要占满屏幕,可以设置左边的div的width:200px;右边的宽就是calc(100%-200px);
相关标签: CSS布局