# 常用的 CSS 主流布局案例（1~8）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 1、可折叠效果布局（手风琴）
应用场景和技术要点
点击新闻标题时，会以下拉展开形式显示更多的内容，同时左侧的小图标会旋转方向。这里只提供 CSS 布局部分。
点击查看完整源代码
<link rel="stylesheet" href="../iconfont/iconfont.css" />
<style>
.accordion {
border: 1px solid #ddd; /*边框 1px 实线 黑色半透明*/
border-bottom-color: transparent; /*底边框色透明，不可见*/
border-radius: 4px; /*圆角*/
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-header {
display: flex; /*弹性布局*/
align-items: center; /* 垂直居中放置内容 */
padding: 10px;
cursor: pointer;
}
.accordion-icon {
margin-right: 12px; /*小图标与标题右边间距*/
color: #ddd; /*图标颜色*/
flex-shrink: 0; /*不缩放*/
font-size: 20px; /*控制图标大小*/
}
/*选中后，显示的图标*/
.accordion-icon__selected {
transform: rotate(90deg);
}
/*新闻标题*/
.accordion-title {
/* flex:1 相当于以下代码的简写flex-grow: 1;flex-shrink: 1;flex-basis: 0; */
flex: 1;
font-size: 16px;
}
.accordion-content {
display: none;
padding: 10px;
font-size: 14px;
}
.accordion-content__selected {
/* 选中后，显示内容 */
display: block;
}
</style>
<body>
<div class="accordion">
<!-- 折叠项开始 -->
<div class="accordion-item">
<div class="accordion-header">
<!-- 可折叠小图标 -->
<span class="accordion-icon iconfont icon-xiangyou"></span>
<!-- 标题 -->
<div class="accordion-title">........</div>
</div>
<div class="accordion-content"></div>
</div>
<!-- 折叠项结束 -->
<!-- 折叠项开始 -->
<div class="accordion-item">
<div class="accordion-header">
<!-- 通过js在添加和删除accordion-content__selected 样式 -->
<span
class="accordion-icon iconfont icon-xiangyou accordion-icon__selected"
></span>
<div class="accordion-title">.....</div>
</div>
<div class="accordion-content accordion-content__selected">
............
</div>
</div>
<!-- 折叠项结束 -->
</div>
</body>
# 2、不同方向箭头
应用场景和技术要点
利用 border 边框属性和 rotate 旋转来制作不同方向箭头
See the Pen 2、不同方向箭头 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.button-arrow {
padding: 10px;
height: 12px;
width: 12px;
border: 1px solid #ddd;
display: inline-block;
}
.button-arrow__down::before,
.button-arrow__left::before,
.button-arrow__right::before,
.button-arrow__up::before {
display: block;
content: "";
width: 12px;
height: 12px;
}
.button-arrow__up::before {
border-left: 1px solid #666;
border-top: 1px solid #666;
transform: translateY(25%) rotate(45deg);
}
.button-arrow__right::before {
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(-25%) rotate(45deg);
}
.button-arrow__down::before {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.button-arrow__left::before {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(25%) rotate(45deg);
}
</style>
<body>
<!-- 向上箭头 -->
<div class="button-arrow button-arrow__up"></div>
<!-- 向右箭头 -->
<div class="button-arrow button-arrow__right"></div>
<!-- 向下箭头 -->
<div class="button-arrow button-arrow__down"></div>
<!-- 向左箭头 -->
<div class="button-arrow button-arrow__left"></div>
</body>
# 3、头像布局
应用场景和技术要点
头像布局的核心是，不管用户上传的图片是何尺寸的，最终图片都不会因为压缩或拉伸而变形
See the Pen 3、头像布局 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.user-avatar {
border-radius: 50%;
height: 64px;
width: 64px;
border: 1px solid #ddd;
padding: 5px;
}
.avatar-image {
border-radius: 50%;
height: 100%;
width: 100%;
object-fit: cover; /*按图片原有尺寸比例来裁剪*/
}
</style>
<body>
<div class="user-avatar">
<img class="avatar-image" src="images/tx1.jpg" />
</div>
</body>
# 4、头像列表
应用场景和技术要点
多个头像并排显示，并且叠在一起
See the Pen 4、头像列表 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.avatars {
display: flex; /*弹性布局，元素默认水平排列*/
}
.avatars-item {
margin-left: -6px; /*后面的元素会向左移6px*/
}
.avatars-image {
width: 40px;
height: 40px;
box-shadow: 0 0 0 4px #fff; /*白色的影阴*/
border-radius: 9999px; /*圆半径足够大-形成正圆*/
}
.avatars-image img {
border-radius: 9999px; /*圆的半径*/
width: 100%;
height: 100%;
object-fit: cover; /*以图片原有尺寸来裁剪*/
}
</style>
<body>
<div class="avatars">
<!-- 头像1 -->
<div class="avatars-item">
<div class="avatars-image">
<img src="images/tx1.jpg" alt="" />
</div>
</div>
<!-- 头像2 -->
<div class="avatars-item">
<div class="avatars-image">
<img src="images/tx2.png" alt="" />
</div>
</div>
<!-- 头像3 -->
<div class="avatars-item">
<div class="avatars-image">
<img src="images/tx3.jpg" alt="" />
</div>
</div>
<!-- 头像4 -->
<div class="avatars-item">
<div class="avatars-image">
<img src="images/tx4.webp" alt="" />
</div>
</div>
</div>
</body>
# 5、徽章效果
单个元素在当前区块内水平垂直居中
See the Pen 5、徽章效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.badge {
height: 100px;
width: 100px;
/* 弹性布局，子项水平垂直居中 */
display: flex;
align-items: center;
justify-content: center;
background-color: #ddd;
color: #fff;
border-radius: 9999px; /*圆半径*/
font-size: 30px;
}
</style>
<body>
<div class="badge">1</div>
</body>
# 6、单张卡片效果
盒子中的元素内容，默认从上往下依次排列
See the Pen 6、单张卡片效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.card {
display: flex;
flex-direction: column; /*主轴设为垂直方向，从上往下排列*/
border: 1px solid #ddd;
padding: 5px;
}
.card-cover {
height: 150px;
width: 100%;
background-color: #ddd;
}
.card-cover img {
width: 100%;
height: 100%;
object-fit: cover; /*图片按原有比例尺寸来裁剪*/
}
.card-content {
flex: 1;
}
</style>
<body>
<div class="card">
<!-- 图像区 -->
<div class="card-cover">
<img src="" alt="" />
</div>
<!-- 内容区 -->
<div class="card-content">....</div>
...
</div>
</body>
# 7、元素水平垂直居中
多行元素在当前盒子中整体水平垂直居中显示
See the Pen 7、元素水平垂直居中 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
body,
html {
height: 100%;
}
.container {
border: 1px solid #ddd;
height: 100%;
/*核心代码*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container .img {
width: 100px;
height: 100px;
background-color: #ddd;
border-radius: 100%;
overflow: hidden; /*超出部分显示隐藏*/
}
</style>
<body>
<div class="container">
<div class="img">...</div>
<div class="title">....</div>
<div class="info">....</div>
</div>
</body>
# 8、关闭按扭
重点：利用::after 和::before 绘制两根线，然后定位在父元素垂直居中位置，最后分别旋转 45deg 和-45deg，就可以实现 X 效果
See the Pen 8、关闭按扭 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.close-button {
height: 32px;
width: 32px;
position: relative; /*相对定位*/
border: 1px solid #ddd; /*边框*/
cursor: pointer; /*鼠标手指效果*/
}
.close-button::after,
.close-button::before {
content: "";
position: absolute; /*绝对定位*/
height: 1px;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.close-button::before {
left: 0px;
top: 50%;
transform: rotate(45deg); /*顺时针旋转45deg*/
}
.close-button::after {
left: 0px;
top: 50%;
transform: rotate(-45deg); /*逆时针旋转45deg*/
}
</style>
<body>
<div class="close-button"></div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X