如何利用CSS实现九宫格布局
今天就跟大家聊聊有关如何利用CSS实现九宫格布局，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联公司从2013年创立，是专业互联网技术服务公司，拥有项目成都网站设计、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元额尔古纳做网站,已为上家服务,为额尔古纳各地企业和个人服务,联系电话:028-86922220
最近几天刷面经常看见一道题，“九宫格布局”。自己尝试用几种办法实现了九宫格布局，发现这里面涉及了挺多的 css 知识，记录一下。
我觉得这篇文章讲得很好，大家可以去参考一下大佬如何写边框九宫格！# 千万别小瞧九宫格 一道题就能让候选人原形毕露！
九宫格实现
下面几种实现方法都可自适应
基本布局和样式
.box {
background: #e4f7fd61;
border: 2px solid #0786ada1;
border-radius: 8px;
}
ul {
padding: 0;
margin: 0;
}
.box li {
list-style: none;
text-align: center;
line-height: 200px;
background: skyblue;
border-radius: 8px;
font-size: 20px;
color: black;
}实现一：flex
使用 flex 布局实现需要注意一个点，就是需要用 flex-wrap 属性来使其换行。
.box {
width: 100%;
overflow: hidden;
}
ul {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.box li {
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
.box li:nth-of-type(3n) {
margin-right: 0;
}
.box li:nth-of-type(n+7) {
margin-bottom: 0;
}实现二：float
使用 float 来实现需要注意一个点，浮动会造成浮动崩塌，因此可以设置 overflow: hidden; 把 box 设置成 BFC 来解决浮动崩塌。
.box {
width: 100%;
overflow: hidden;
}
ul {
width: 100%;
height: 100%;
}
.box li {
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
float: left;
}
.box li:nth-of-type(3n) {
margin-right: 0;
}
.box li:nth-of-type(n+7) {
margin-bottom: 0;
}实现三：grid
1
2
3
4
5
6
7
8
9
box {
background: #e4f7fd61;
border: 2px solid #0786ada1;
border-radius: 8px;
}
.grid {
display: grid;
width: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 5%;
grid-auto-flow: row;
}
.grid>div {
list-style: none;
text-align: center;
line-height: 200px;
background: skyblue;
border-radius: 8px;
font-size: 20px;
color: black;
}实现四：table
使用表格来实现会存在一些缺陷，table 单元格之间的间隔是使用 border-spacing 属性来实现的，且不支持百分比的形式，而且单元格四周都有类似于 margin 的外边距的效果。
css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。
重庆分公司
重庆分公司
