1.Static 静态布局
固定宽高&＃xff1a;
2.Liquid 流式布局
宽高用百分比&＃xff0c;按屏幕分辨率调整&＃xff0c;布局不发生变化
3.Adaptive 自适应布局
为不同的屏幕分辨率定义的布局 &＃64;media媒体查询技术
4.Responsive 响应式布局
使用meta标签&＃xff0c;宽高随窗口调整自动适配&＃xff0c;适应布局和流式布局的综合方式
5.Flex 弹性布局
常用
6.圣杯布局
flex&＃xff1a;flex-group、flex-shrink、flex-basis
flex&＃xff1a;auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A&＃xff0c;flex-group&＃xff1a;当父元素有剩余空间时&＃xff0c;子元素占据剩余空间的量
B&＃xff0c;flex-shrink&＃xff1a;当父元素的空间不足以展示所有的子元素&＃xff0c;父元素没设置flex-wrap&＃xff0c;子元素需要进行收缩的量
C&＃xff0c;flex-basis&＃xff1a;表示该子元素的初始宽度
7.栅格布局
1&＃xff09;.栅格(网格划分)&＃xff1a;在一个特定区域内划分出有规律的格子&＃xff0c;依靠这些格子进行有规律的版面布局。
使用栅格布局&＃xff1a;bootstrap&＃xff08;12列&＃xff09;&＃xff0c;element&＃xff08;24栏&＃xff09;&＃xff0c;antDesign
2&＃xff09;.栅格布局
container&＃xff1a;栅格系统容器&＃xff1b;rows&＃xff1a;行&＃xff1b;cols&＃xff1a;列&＃xff1b;gutters&＃xff1a;各列间的空隙
3&＃xff09;.栅格布局实现响应式布局
8. Tabel布局
使用表格进行页面排版和样式设置
1&＃xff09;.用法
display:table
display:table-cell&＃xff0c;相当于td元素
display:table-row&＃xff0c;相当于tr元素
table-layout:fixed | auto(默认)&＃xff1a;table-layout 属性用于显示表格单元格、行、列&＃xff1b;
auto, 自动表格布局&＃xff0c;列的宽度由单元格中最大内容的宽度决定。
fixed ,固定表格布局。
【参考】
1.https://www.jianshu.com/p/0ab9d3e4d262
9.Masonry Layout 瀑布流效果
很受图片网站的欢迎&＃xff1a;
例如国外的 http://pinterest.com/.
特点&＃xff1a;
- 不同高度的方格组成
- 版面切割为多个直行
实现方法&＃xff1a;
使用第三方的js组件&＃xff1a;
Masonry.js
https://masonry.desandro.com/
Isotope.js
https://isotope.metafizzy.co/
原理&＃xff1a;
通过Javascript计算共有多少个方格&＃xff0c;再计算每一个方格的宽度和高度。容器的宽度可以防止多少行等等要求&＃xff0c;将全部的方格的postion都设置成为absolute&＃xff0c;逐一计算出它们的top和left去定位&＃xff0c;所有的方格的位置都是计算出来的&＃xff0c;多以可以在改变浏览器的宽度的时候&＃xff0c;方格动态移动并且重新排列。
这里使用css手动实现&＃xff1a;
在线编译工具&＃xff1a;https://codepen.io/
- column-count&＃xff1a;
- column-gap&＃xff1a;
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8"><title>title><link rel &＃61; "stylesheet" href &＃61; "css/style.css">head><body><div class&＃61;"masonry"><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/490?random&＃61;1"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/340/460?random&＃61;2"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/780/460?random&＃61;3"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/480?random&＃61;4"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/560?random&＃61;5"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/860?random&＃61;6"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/260?random&＃61;7"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/360?random&＃61;8"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/460?random&＃61;9"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/460?random&＃61;10"/>div><div class&＃61;"item"><img src&＃61;"http://picsum.photos/360/460?random&＃61;11"/>div>div>body>
html>
.body{margin : 4px;font-family:Helvetica;
}
.masonry{column-count: 4;column-gap: 0;
}
.item{padding:2px;
}
.item img{display:block;width: 100%;height: auto;
}
这就已经简单的实现了&＃xff1a;基础功能
但是发现&＃xff1a;添加上序号发现
.body{margin : 4px;font-family:Helvetica;
}
.masonry{column-count: 4;column-gap: 0;
}
.item{padding:2px;position:relative;counter-increment: item-counter;
}
.item img{display:block;width: 100%;height: auto;
}
.item::after{position: absolute;display: block;top: 2px;left: 2px;width: 24px;height: 24px;text-align:center;line-height:24px;background-color:#000000;color:#fff;content:counter(item-counter);
}
图片的顺序&＃xff1a;不是那种由上至下&＃xff0c;再由左至右。不满足时间顺序展示。但是优点就是代码简单。
使用Flexbox实现瀑布流效果&＃xff1a;
<link rel &＃61; "stylesheet" href &＃61; "css/style2.css">
.body{margin : 4px;font-family:Helvetica;
}
.masonry{display: flex;flex-direction: column;flex-wrap: wrap;height: 2000px;
}
.item{position: relative;width: 25%;padding: 2px;box-sizing:border-box;counter-increment: item-counter;
}
.item img{display: block;width:100%;height:auto;
}
.item::after{position: absolute;display: block;top: 2px;left: 2px;width: 24px;height: 24px;text-align:center;line-height:24px;background-color:#000000;color:#fff;content:counter(item-counter);
}
.item:nth-child(4n&＃43;1){order:1;
}
.item:nth-child(4n&＃43;2){order:2;
}
.item:nth-child(4n&＃43;3){order:3;
}
.item:nth-child(4n){order:4;
}
不推荐使用&＃xff1a;应为需要自我计算&＃xff1a;&＃xff08;不稳定&＃xff09;
京公网安备 11010802041100号