CSS九宫格的4种实现
文章目录
- 实现效果
- 实现方法
- 1. float布局
- 2. flex布局
- 3. grid布局
- 4. table布局
- 总结
实现效果
效果如下,就是一个九宫格,点击九宫格中的任意一个小方块,其边框变成红色。
实现方法
我自己一共总结了4种方法来实现这个效果,前三种方法是大同小异,只有第四种表格布局比较特殊。下面我直接给出每一种布局方式相关的样式和DOM结构的源码。
1. float布局
<style>.float{margin: 50px; //为了和页面中的其他块拉开距离height: 300px;width: 300px;}.float > li{box-sizing: border-box;float:left;width: 100px;height: 100px;margin-left: -4px;margin-top: -4px;line-height: 100px;text-align: center;list-style: none;border:4px solid #ccc;}.float > li:hover{border-color: red;position: relative;}</style><ul class="float"><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>
float
布局实现这个9宫格没什么好讲的,关键点在于对li
子项设置margin-left:-4px;margin-top:-4px;
这样就可以使相邻子块间的边框发生重叠,你可以不设置这个负的margin
来看看效果,你会体会更深。整个CSS
中我认为最精髓的地方在于hover
的样式,给li
子项设置了position:relative;
。这个地方的精髓在于,对元素设置了relative
后,其将脱离文档流,同时其层叠等级会比普通文档流高,就会使其内容覆盖在普通文档流之上,那么它被覆盖的border
就会显示出来,同时遮挡住相邻元素的border
。这个设置真的很精髓,后面两种方法和该方法差不多,我就不做过多讲解了。
2. flex布局
<style>
.flex{display: flex;width: 300px;/*height: 300px;*/margin: 50px;flex-wrap: wrap;/*align-content: flex-start; */box-sizing: border-box; }.flex > li{box-sizing: border-box;height: 100px;width: 100px;margin-left: -4px;margin-top: -4px;line-height: 100px;text-align: center;list-style: none;border: 4px solid #ccc;}.flex > li:hover{border-color:red;position: relative;/*z-index:2;*/}
</style><ul class="flex"><li>1</li><li>2</li><li>3</li><li>4</li><li>flex</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
使用flex布局时,有一点需要注意,那就是不要给父容器ul.flex
设置高度,如果你设置了高度,那么在垂直方向上子项的margin
负值设置将会失效,具体原因我也不知道。如果你设置了高度后,还希望垂直方向的margin
值生效,那么你就给ul.flex
添加一个algin-content:flex-start;
属性即可。这个具体为啥会这样,我也不是很明白,希望有理解的兄弟在评论区指导一下。该flex
布局中,也可以在hover时添加z-index:2;
来提高叠加等级。
3. grid布局
<style>
.grid{margin: 50px;height: 300px;width: 300px;display: grid;grid-template-rows: 100px 100px 100px;grid-template-columns: 100px 100px 100px;box-sizing: border-box;}.grid > li{margin-top: -4px;margin-left: -4px;box-sizing: border-box;list-style: none;line-height: 100px;text-align: center;border: 4px solid #ccc;}.grid > li:hover{border-color: red;position: relative;/*z-index:2;*/}
</style>
<ul class="grid"><li>1</li><li>2</li><li>3</li><li>4</li><li>grid</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
这里有一个地方需要注意,就是不要再给li
子项设置宽度和高度。该grid
布局中,也可以在hover时添加z-index:2;
来提高叠加等级。
4. table布局
<style>.table{margin-top: 100px;width: 300px;height: 300px;text-align: center;border: 4px solid #ccc;border-collapse: collapse;box-sizing: border-box;}.table td{/*height: 100px;*/width: 100px;vertical-align: middle;border: 4px solid #ccc;text-align: center;box-sizing: border-box;line-height: 100px;}.table td:hover{border-color: red; position: absolute;width: 94px;height: 100px;margin-top: -4px;margin-left: -4px;box-sizing: content-box;}</style><table class="table"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>table</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>
使用table
布局时,有以下几点需要注意:
line-height
的设置值需要与height
的值保持一致。因为对于表格中的一行来说,它的高度取决于该行最大的单元格的高度或者行高,line-height
与height
不一致会导致该列中的边框溢出单元格。- 要想使某个单元格的边框覆盖其他单元格的边框,必须给单元格设置
position:absolute;
而不是relative
。 margin-left
的设置值是border-width
的1.5
倍,这个是我在chrome下的测试结果,具体原因我也不清楚,希望有老铁评论区解答一下。
总结
CSS的知识还是十分博大精深的,一个简单的9宫格布局就给我留下了这么多的未解之谜,还需要加强CSS的学习啊!希望后面能把埋下的坑给填了。文中如有纰漏,欢迎在评论区指正。博文中的代码,均是在chrome环境下进行的测试,如有兼容性问题,欢迎在评论区一起探讨。
CSS九宫格的4种实现相关推荐
- html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明 除非特别说明, ...
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- CSS中的四种样式及选择器
CSS语法 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性 属性值:属性值包括法定属 ...
- Android中用GridView实现九宫格的两种方法(转)
Android中用GridView实现九宫格的两种方法 http://blog.csdn.net/shakespeare001/article/details/7768455 1.传统办法:实现一个继 ...
- 网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
- html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言 比较基础的图标加载:和块元素的背景background ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- html中引入css样式表的三种方式,css引用的几种方式是什么?
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式 在HTML标签中,使用style属性设置C ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
最新文章
- [转载] 信息系统项目管理挂靠合同(协议)范例2
- Hadoop的安装与配置及示例程序wordcount的运行
- centos 6.4 FTP安装和配置
- String(byte[] bytes, int offset, int length)
- 代理模式-Java实现-静态代理、动态代理
- VC6.0建立控制台程序实现PDA应用
- php解析定时任务格式,php 实现定时任务简单实现
- DH参数例子-SCARA机器人
- windows 10 彻底卸载windows 易升
- c语言使用三种方法计算圆周率,求用三种方法计算圆周率(C语言)
- mongodb 日期分组聚合_MongoDB基于时间段的聚合查询
- 计算机网络系列选择题
- 杭州电子科技大学研究生计算机科学与技术,杭州电子科技大学-硕士研究生-计算机学院 2018级计算机科学与技术(中日合作)培养方案...
- 信息检索平台Terrier的使用
- 关于neo4j图数据库导出的svg文件打开方式
- 同一局域网下 macOS 和 windows 电脑 如何快速共享文件
- 怎么去理解JAVA中类与对象的关系
- python调用adb shell命令_如何在python脚本里面连续执行adb shell后面的各种命令
- 【Java Web 安全】常见安全漏洞及解决方案
- 【Android】Chromium架构简介