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

几种常见的布局场景

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 布局