前端常用的布局类型——前端布局

最新推荐文章于 2023-07-21 07:58:47 发布

Antoni_cy

最新推荐文章于 2023-07-21 07:58:47 发布

阅读量713

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/Antoni_cy/article/details/118146458

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.Static 静态布局

固定宽高：

2.Liquid 流式布局

宽高用百分比，按屏幕分辨率调整，布局不发生变化

3.Adaptive 自适应布局

为不同的屏幕分辨率定义的布局 @media媒体查询技术

4.Responsive 响应式布局

使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式

5.Flex 弹性布局

常用

6.圣杯布局

flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度

7.栅格布局

1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap（12列），element（24栏），antDesign
2）.栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3）.栅格布局实现响应式布局

8. Tabel布局

使用表格进行页面排版和样式设置
1）.用法
display:table
display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；
auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决定。
fixed ,固定表格布局。

【参考】
1.https://www.jianshu.com/p/0ab9d3e4d262

9.Masonry Layout 瀑布流效果

很受图片网站的欢迎：
例如国外的 http://pinterest.com/.
特点：

不同高度的方格组成
版面切割为多个直行

实现方法：
使用第三方的js组件：
Masonry.js
https://masonry.desandro.com/
Isotope.js
https://isotope.metafizzy.co/

原理：
通过JavaScript计算共有多少个方格，再计算每一个方格的宽度和高度。容器的宽度可以防止多少行等等要求，将全部的方格的postion都设置成为absolute，逐一计算出它们的top和left去定位，所有的方格的位置都是计算出来的，多以可以在改变浏览器的宽度的时候，方格动态移动并且重新排列。

这里使用css手动实现：
在线编译工具：https://codepen.io/

column-count：
column-gap：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel = "stylesheet" href = "css/style.css">
	</head>
	<body>
		<div class="masonry">
			<div class="item">
				<img src="http://picsum.photos/360/490?random=1"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/340/460?random=2"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/780/460?random=3"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/480?random=4"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/560?random=5"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/860?random=6"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/260?random=7"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/360?random=8"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/460?random=9"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/460?random=10"/>
			</div>
			<div class="item">
				<img src="http://picsum.photos/360/460?random=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;
}

这就已经简单的实现了：基础功能
在这里插入图片描述
但是发现：添加上序号发现

.body{
	margin : 4px;
	font-family:Helvetica;
}
.masonry{
	column-count: 4;
	column-gap: 0;
}
.item{
	padding:2px;
	position:relative;
	/* 使得每一个方格的item都有自己的序号 */
	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);
}

在这里插入图片描述
图片的顺序：不是那种由上至下，再由左至右。不满足时间顺序展示。但是优点就是代码简单。

使用Flexbox实现瀑布流效果：

		<!-- 第一种实现方式 -->
		<!-- <link rel = "stylesheet" href = "css/style.css"> -->
		<!-- 第二种实现方式 -->
		<link rel = "stylesheet" href = "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;
	/* 使得每一个方格的item都有自己的序号 */
	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);
}
/* 但是flxbox 有一个order的功能 n表示任何数 */

.item:nth-child(4n+1){
	order:1;
}
.item:nth-child(4n+2){
	order:2;
}
.item:nth-child(4n+3){
	order:3;
}
.item:nth-child(4n){
	order:4;
}