CSS实现九宫格布局方法有哪些，你知道几种？
发布时间：2022-02-14 13:04:10 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是CSS实现九宫格布局方法。千万别小瞧九宫格，下文介绍的实现九宫格布局小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 九宫格实现 下面几种实现方法
|
这篇文章给大家分享的是CSS实现九宫格布局方法。千万别小瞧九宫格，下文介绍的实现九宫格布局小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 九宫格实现 下面几种实现方法都可自适应 基本布局和样式 <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> .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 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> 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 的外边距的效果。 <div class="box"> <ul> <li> <div>1</div> <div>2</div> <div>3</div> </li> <li> <div>4</div> <div>5</div> <div>6</div> </li> <li> <div>7</div> <div>8</div> <div>9</div> </li> </ul> </div> .box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; display: table; border-spacing: 10px; } .box li { display: table-row; } .box li div { display: table-cell; text-align: center; border-radius: 10px; } nth-of-type 与 nth-child 的区别 上面实现九宫格布局我用到了 nth-of-type 这个属性来实现最后一列的 margin-right: 0 和最后一行的 margin-bottom: 0。然后我记得 css 还有一个 nth-child 属性，这里顺便记录一下这两者的区别。 nth-of-type MDN：:nth-of-type(n) 这个伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 从上图可以看出，因为 nth-of-type 他是当前元素的兄弟元素的第n个，所以 p:nth-of-type(4)是第四个 p 元素，即无论往中间添加什么元素，都只能是当前标签元素的第n个元素被选择。 nth-child MDN：:nth-child(an+b)这个伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...） nth-child 是当前元素的兄弟元素的第n个当前元素，即所有兄弟元素排序后的第n个当前标签元素。 （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
