使用CSS实现九宫格布局的几种方法

教程推荐：css视频教程

目录：

• margin负值实现

• 祖父和亲爹的里应外合

• 换个思路 - li生了儿子帮大忙。

• 借助absolute方位值，实现自适应的网格布局

• cloumn多栏布局

• grid

• display： table；

• css3选择器nth-child（）

前提说明

除非特别说明，以下几种方式的通用html结构如下：

    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9
    
  

除特别说明，布局中用到的css reset代码如下：

/* 基础 */
    .box{
      background: #e4f7fd61;
      border: 2px solid #0786ada1;
      border-radius: 8px;
    }
    ul{
      padding: 0;
    }
    .box li{
      list-style: none;
      text-align: center;
      line-height: 200px;
      background: rgba(146, 203, 230, 0.65);
      border-radius: 8px;
    }

方法一、margin负值实现

原理

margin负边距

关键点

1. 最外层的包裹元素等于：li宽度*3+li右间距*2

2. 如果li是右间距，则ul的margin-right为负的li间距值。

3. 父元素ul使用overflow:hidden;形成bfc，以清除浮动带来的影响（父元素塌陷）。

4. margin-bottom和margin-top的配合，是同right的理的，消除最后一排li撑开的底边距。

5. li要浮动。外边距方向和ul设置负值的外边距方向一致。

关键代码

    .box{
      width: 940px;
    }
    ul{
      overflow: hidden;
      margin-right: -20px;

      margin-bottom: -20px;
      margin-top: 0;
    }
    .box li{
      float: left;
      width: 300px;
      height: 200px;
      margin-right: 20px;
      margin-bottom: 20px;
    }

方法二、祖父和亲爹的里应外合

原理

外层box盒子overflow和ul元素宽度死值相结合

其实换一种角度和思路，又是一个解决方法，不用margin负值，我们想要li要对其ul两端效果，之所以纠结是因为li又需要margin-right，而右边最后一个li的margin又会撑开和父亲ul的距离，让我们头疼。

那既然是节外生枝，我们直接让祖父砍掉多出来的那一节不就行了？父亲ul设置宽度，坚持让儿子占他的位置，而box祖父就做一个坏人，使用overflow砍掉多余出来的一个margin-right的距离。

关键点

1. box使用overflow:hidden;无情的砍掉li的右margin

2. ul唱白脸，设置宽度坚持让三个li并排站，而不让最后一个li因为没地方挤到下一排。

3. li 做最真诚的自己

关键代码

因为做demo都在一个html里，防止类名覆盖，这里原来叫box的盒子改叫sec了

    .sec{
      width: 640px;
      overflow: hidden;
    }
    ul{
      width: 660px;
      overflow: hidden;
      margin-bottom: -20px;
      margin-top: 0;
    }
    .sec li{
      float: left;
      width: 200px;
      height: 200px;
      margin-right: 20px;
      margin-bottom: 20px;
    }

间距不一定要加在父元素li身上的，父元素li可以只负责流体布局，内部用padding或第一层子元素来控制和相邻元素的间距

原理

图片中的红色边框，是li元素，红色边框总的深红区域是li元素内部的子元素。红边框和子元素之间的白色距离是子元素的margin生成。

关键点

1. 父元素box以前20的内边距，这次改成10，因为外孙li>div会帮忙的。

2. li不再设置margin-right来撑开多个li之间的距离

3. li内部的div设置左右margin来撑开li和li以及li和父元素之间的距离。

关键代码

这里html结构就要变化一下，除了之前的结构，li内部要多加一个div结构了，作用就是撑开间距。

  

    

      里应外合-li的边距交给孩子们来做，自己只负责一排站三个人的排列工作    
    

      

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
      
    
  

   box{
      padding: 20px 10px;
      display: inline-block;
      background: #ff000026;
    }
    ul{
      overflow: hidden;
      width: 600px;
      margin-bottom: -10px;
      margin-top: 0;
      background: none;
    }
    li{
      list-style: none;
      float: left;
      width: 198px;/*可以用百分比*/
      height: 198px;/*可以用百分比*/
      margin-bottom: 10px;

      border: 1px solid red;
    }
    li  > div{
      background: rgba(255, 0, 0, 0.24);
      margin: 0 10px;
      border-radius: 8px;
      text-align: center;
      line-height: 198px;
    }

去掉红色border后的效果

2. 每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列

3. 本案例中，list元素内部用了伪元素+absolute的方式做了效果展示，实际项目中，list元素里边就可以填充自己个各式各样的业务代码了。

关键代码

html,body{
    height:100%;
    margin:0;
}
 .page{
    position:absolute;
    left:0;
    top:180px;
    right:0;
    bottom:0;
}
 .list{
    float:left;
    height:33.3%;
    width:33.3%;
    position:relative;
}
 .list:before{
    content:&＃39;&＃39;;
    position:absolute;
    left:10px;
    right:10px;
    top:10px;
    bottom:10px;
    border-radius:10px;
    background-color:#cad5eb;
}
 .list:after{
    content:attr(data-index);
    position:absolute;
    height:30px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    text-align:center;
    font:24px/30px bold &＃39;microsoft yahei&＃39;;
}

方法五、cloumn多栏布局

原理

cloumn设置三栏布局，这种还是自适应效果的

关键点

1. box依旧做了最严格的祖父，又是宽度限制，又是overflow决绝设卡。

2. ul这次挑了大梁，针对内部的li使用column多栏布局，设置为三栏显示，且每一栏之间

3. 而有了ul的操心，li则美滋滋的做起了公子哥，只管自己的宽高和下边距就好，右边距他爹都给他处理好了。

关键代码

.box{
    width: 640px;
    overflow: hidden;
}
ul {
    /* display: flex; */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    margin-bottom: -20px;
    margin-top: 0;
}
li {
    width: 200px;
    height: 200px;
    /*margin-right: 20px;*/
    margin-bottom: 20px;
}

关键代码

	

		1
	
	

		2
	
	

		3
	
	

		4
	
	

		5
	
	

		6
	
	

		7
	
	

		8
	
	

		9
	

.wrapper{
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
}
 .list{
     background: #eee;
}
 .list:nth-child(odd){
     background: #999;
}

方法七、display：table；

原理

其实他是table的css版本处理方式。原谅我只能想到加结构、模拟tr+td的方式实现了。

好处：也是唯一能用来安慰自己的地方就是，不用table标签少了很多reset样式~

关键点

1. 三行li，每个li里三列div（模拟表格的结构）

2. 父元素ul使用display: table（此元素会作为块级表格来显示（类似

），表格前后带有换行符。）

3. li元素使用display: table-row（此元素会作为一个表格行显示（类似

）。）

4. li元素内部三个子元素使用display: table-cell（此元素会作为一个表格单元格显示（类似

和

）） 关键代码 1 2 3 4 5 6 7 8 9 .table { display: table; } .table li { display: table-row; background: #beffee; } .disTable li:nth-child(odd) { background: #bec3ff; } .table li div { width: 200px; line-height: 200px; display: table-cell; text-align: center; } .table li:nth-child(odd) div:nth-child(even) { background: #beffee; } .table li:nth-child(even) div:nth-child(even) { background: #bec3ff; } 方法八、css3选择器nth-child(); 原理 利用css的选择器，选择对应个数的li，设置特殊样式。 不足（缺点） li必须要设置固定的宽高，且ul也要设置固定宽高，以强制似的li“归位”。 关键点 li.nth-child(3n):控制第3以及3的倍数的li的右边距不存在。 关键代码 1 2 3 4 5 6 7 8 9 ul,li{ list-style: none; overflow: hidden; } ul{ width: 620px; } li.list{ float: left; width: 200px; height: 200px; margin-right: 10px; margin-bottom: 10px; background: #eee; } li:nth-child(3n){ margin-right: 0; } 以上，几乎都没有考虑兼容性。因为很多css3方法，掰着脚指头想兼容性也不会如你意。 如果pc求稳，就用前几招。 如果移动求快准狠，就用后几招。 更多编程相关知识，请访问：编程教学！！ 以上就是使用CSS实现九宫格布局的几种方法的详细内容，更多请关注其它相关文章！ css html webkit 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 jquery 分页插件3指定到某一页 前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细] 蜡笔小新   2024-12-27 15:19:01 firebug 深入理解CSS盒模型与box-sizing属性 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细] 蜡笔小新   2024-12-27 15:01:09 button 如何高效创建和使用字体图标 在Web和移动开发中，为什么选择字体图标？主要原因是其卓越的性能，可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程，并提供了专业建议。 ... [详细] 蜡笔小新   2024-12-26 20:48:44 firefox 自己用过的一些比较有用的css3新属性【HTML】 web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细] 蜡笔小新   2024-12-24 19:26:54 firefox 自定义CSS样式打造个性化HTML5视频播放器 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式，涵盖常见属性及跨浏览器兼容性问题。发布时间：2020-09-14 14:46:29；来源：亿速云；阅读量：58；作者：小新。 ... [详细] 蜡笔小新   2024-12-22 18:36:22 jquery 一个登陆界面 预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细] 蜡笔小新   2024-12-20 09:57:07 jquery Vue 3.0 翻牌数字组件使用指南 本文详细介绍了如何在 Vue 3.0 中使用翻牌数字组件，包括其基本设置和高级配置，旨在帮助开发者快速掌握并应用这一动态视觉效果。 ... [详细] 蜡笔小新   2024-12-17 11:54:45 jquery Web App vs Native App：未来的移动应用趋势 随着移动互联网的发展，Web App和Native App之间的竞争日益激烈。对于开发者而言，选择哪一种技术路径更为明智？本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细] 蜡笔小新   2024-12-13 13:50:17 firefox 利用CSS3和React实现数字滚动动画组件 在前端开发中，数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件，包括组件的代码实现和样式设计。如果您对HTML版本感兴趣，欢迎留言获取。 ... [详细] 蜡笔小新   2024-12-13 13:48:05 label select下拉箭头改变，兼容ie8/9 各个浏览器下select默认的下拉箭头差别较大，通常会清除默认样式，重新设计<html><head><metacharsetutf-8> ... [详细] 蜡笔小新   2024-12-12 18:11:40 jquery 使用Bootstrap创建响应式渐变固定头部导航栏的方法 本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏，包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细] 蜡笔小新   2024-12-12 18:04:25 jquery HTML5实现逼真树叶飘落动画详解 本文详细介绍了如何利用HTML5技术创建一个逼真的树叶飘落动画，包括HTML、CSS和JavaScript的代码实现及优化技巧。 ... [详细] 蜡笔小新   2024-12-12 13:05:58 jquery 深入理解 Oracle 存储函数：计算员工年收入 本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程，并提供完整的代码示例。 ... [详细] 蜡笔小新   2024-12-28 09:49:42 jquery 2018回顾与2019展望 本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ... [详细] 蜡笔小新   2024-12-28 09:10:26 base64 信息安全小组第一周工作总结 本周信息安全小组主要进行了CTF竞赛相关技能的学习，包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外，还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细] 蜡笔小新   2024-12-28 05:52:22 夜幕2502896061 这个家伙很懒，什么也没留下！ Tags | 热门标签 checkbox node.js dom requirejs 正则 build svg label base64 npm 上传 scheme ajax icons chart 微信开发 dialog view postman bootstrap button javascript html5 iframe hover listview vue.js firebug firefox jquery RankList | 热门文章 1两岁的宝宝吃哪个牌子的钙？ 2vue修改node_modules包代码部署提交 3CentOSLAMP编译安装 (4) 4很有意思的一道题 5windows 下git出现警告：warning: LF will be replaced by CRLF in test1.txt. The file will have its original 6文本处理与软件管理 7溗字意思 在新华字典的读音解释笔画常用组词起名 8苹果7数据流量快捷键(苹果7数据流量快捷键是什么) 9Java大文件分片上传/多线程上传源代码 10HBase系列之hbase2.2.3安装 11青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）... 12重置密码解决MySQL5.7 for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' 13sed如何匹配行尾的$字符? 14简单了解 node http 模块（一） 15python 线程锁_对python多线程中Lock()与RLock()锁详解 PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有