常见 css 布局整理

最新推荐文章于 2024-07-28 13:07:38 发布

Gorit

最新推荐文章于 2024-07-28 13:07:38 发布

阅读量2.5k

点赞数 14

分类专栏：前端技术整合文章标签： css html

本文链接：https://blog.csdn.net/caidewei121/article/details/104266842

版权

前端技术整合专栏收录该内容

26 篇文章 16 订阅

订阅专栏

常用 css 布局学习整理

注意：代码里面都有比较详细的注释
项目代码全部已经上传至码云和 Github，两个仓库我会同步更新

码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end.git
Github git 下载地址：git@github.com:CodingGorit/Coding-with-Front-end.git

一、垂直居中

有父容器和子容器，实现子容器在父容器中的居中效果

布局效果：
在这里插入图片描述

二、等分布局

实现一行元素，在等高，等宽的情况下，在游览器汇总均匀排布

布局效果
在这里插入图片描述

三、等高布局

两列在同一级的 div 元素，实现等高等宽效果

布局效果
在这里插入图片描述

四、多列布局

多列布局实现（等宽，非等宽，有间隙）

布局效果
在这里插入图片描述

自适应的效果不方便展示，可以在代码中查看

五、局中布局（垂直居中）

两个 div 元素，小盒子在大盒子上下，左右都在中间

在这里插入图片描述

六、全屏布局

常见的 header，body， foot 的主流界面布局效果

在这里插入图片描述

七、三列布局

三列元素分摊 width

在这里插入图片描述

八、圣杯布局

头 + 尾布局

布局效果
在这里插入图片描述

九、双飞翼布局

left + item + right （left = right）

布局效果
在这里插入图片描述

十、水平居中

元素在水平内部居中效果实现

布局效果
在这里插入图片描述

十一、css 布局特别整理

11.1 快速制作一行底部导航栏

html

<div class="page"><!-- 页码的制作 -->
	<a href="#">首页</a><a href="#">&lt;</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">&gt;</a><a href="#">末页</a>
</div>

css

.page {
	height: 40px;
	margin-top: 10px;
	text-align: center;
}

.page a {
	/* 内联元素 和 块级元素的特性都有 */
	display: inline-block;
	border: 1px solid #E8E8E8;
	text-decoration: none;
	margin: 5px;
	padding: 5px 10px;
}

.page a:link, .page a:visited {
	color: #000;
}

.page a:hover,.page a:active {
	color: #FFF;
	background-color: #cc1b1b;
}