likes
comments
collection
share

常见的css布局方案

作者站长头像
站长
· 阅读数 270

几种常见的布局场景

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

特点:参差不齐的排列方式,布局的元素等宽,当元素占满一行时,后续布局的元素依次放置在最小高度的列上,父容器的高度取列表的最大值

布局效果:常见的css布局方案

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