怎么新建MySQL数据库
发布时间：2022-11-02
作者：admin
阅读：807
阅读：807
今天小编跟大家讲解下有关“如何用CSS做自适应九宫格效果，有多少方法”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。
简介
本文用示例介绍CSS进行九宫格布局的方法。朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。 本文只展示自适应布局的方案。不展示手动指定宽度的那种方案。
方案1：grid
grid是专门用来处理二维的，最适合用来二维布局。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
padding: 10px;
}
.item {
border: 1px solid black;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
结果
方案2：flex+calc()
因为flex是面向一维的，所以我们需要加上calc这个函数控制其垂直方向。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
.container {
width: 100%;
display: flex;
/*换行*/
flex-wrap: wrap;
}
.item {
width: calc(calc(100% / 3) - 10px);
height: 100px;
margin: 5px;
box-sizing: border-box;
border: 1px solid black;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
结果
方案3：absolute
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html,body{
height:100%;
margin:0;
}
.container{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
.item{
float:left;
height:100px;
width: calc(calc(100% / 3) - 10px);
position:relative;
border: 1px solid black;
.item:before{
content:'';
left:10px;
right:10px;
top:10px;
bottom:10px;
border-radius:10px;
.item:after{
content:attr(data-index);
height:30px;
margin:auto;
text-align:center;
</style>
</head>
<body>
<div class="container">
<div class="item" data-index="1">
</div>
<div class="item" data-index="2">
<div class="item" data-index="3">
<div class="item" data-index="4">
<div class="item" data-index="5">
<div class="item" data-index="6">
<div class="item" data-index="7">
<div class="item" data-index="8">
<div class="item" data-index="9">
</div>
</body>
</html>
结果
到此，关于“如何用CSS做自适应九宫格效果，有多少方法”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理