乐趣区

关于css:常见的css布局方案

jiezi

几种常见的布局场景

1. 瀑布流布局(瀑布流式布局)

特点：参差不齐的排列形式，布局的元素等宽，当元素占满一行时，后续布局的元素顺次搁置在最小高度的列上，父容器的高度取列表的最大值

布局成果:

js 实现

实现思路：
(1) 计算须要布局的列数：文档宽度 / 图片宽度(outerWidth 等)
(2) 创立一个数组（长度为列数），数组元素为每一列已布局元素的总高度
(3) 将未安排的元素，顺次安排到高度最小的那一列，而后更新这一列的高度

tips:

  • 浏览器窗口尺寸变动时，将图片重新排列
  • 图片尺寸计算时留神 maigin、border 等属性

css 实现

css 布局无奈实现真正意义上的瀑布流布局

  1. flex 布局
    次要实现思路：
    容器元素设置横向布局，子元素设置纵向布局
  2. grid 布局
    次要实现思路：
    网格容器：
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200, 1fr));
    grid-gap: 10px;
    grid-auto-flow: row dense;
    grid-auto-rows: auto;
    网格我的项目：grid-row: 2; (跨域几个网格)
  3. Multi-columns 布局 (多列布局、分栏布局)
    次要实现思路：
    容器元素设置以下属性：
    column-count: 3;
    column-width: 240px;
    column-gap: 20px;
    子元素设置: break-inside: aviod;

瀑布流布局的长处：

  • 升高页面复杂度，节俭空间
  • 联合懒加载，加强用户体验感，应用 js 实现

2. 程度垂直居中

(1)
.parent{display:table-cell; vertical-align:middle; text-align:center;}
.child{display:inline-block;}
(2) 相对定位
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
(3) flex
.parent{display:flex;justify-content:center;align-items:center;}

3. div 实现高度依据宽度自适应

// 以宽高 1：1 为例
(1) padding 实现
padding-bottom: 50%; // 高低内边距与左右内边距统一，百分数会绝对于父元素宽度设置
height: 0;
width: 50%;

(2)vw 实现
width: 50vw;
height: 50vw;

(3)js 实现(不举荐)
div{width:50%;}
window.onresize = () => {div.height(div.width);}

(4)zoom 实现(ie 专属)
width: 50%;
zoom: 1;

(5) float 实现

几种罕用的布局形式

a. 响应式布局

  • meta 标签
<meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
  • 媒体查问

b. rem 布局

挪动端实现自适应所有分辨率

c. 流式布局

百分比布局

d. flex 布局

e. grid 布局

grid 布局与弹性布局的比拟:

  • grid 布局基于二维实现，flex 布局基于一维布局（只按行或者按列布局）
  • grid 布局从布局动手（元素内容依照网格排列主动搁置），flex 布局从内容动手（内容大小决定元素占用的空间）

图片素材
Grid 布局

退出移动版