教程推荐: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负边距
关键点
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:''; 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 'microsoft yahei'; }
原理
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; }
关键代码
123456789
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .list{ background: #eee; } .list:nth-child(odd){ background: #999; }
原理
其实他是table的css版本处理方式。原谅我只能想到加结构、模拟tr+td的方式实现了。
好处:也是唯一能用来安慰自己的地方就是,不用table标签少了很多reset样式~
关键点
1. 三行li,每个li里三列div(模拟表格的结构)
2. 父元素ul使用display: table(此元素会作为块级表格来显示(类似
),表格前后带有换行符。)
3. li元素使用display: table-row(此元素会作为一个表格行显示(类似
)。) 4. li元素内部三个子元素使用display: table-cell(此元素会作为一个表格单元格显示(类似
和 )) 关键代码
123 456 789.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回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]蜡笔小新 2023-10-17 13:38:49 一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]蜡笔小新 2023-10-17 14:35:15 Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]蜡笔小新 2023-10-16 11:26:13 之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]蜡笔小新 2023-10-13 16:23:53 2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]蜡笔小新 2023-10-13 13:44:20 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]蜡笔小新 2023-12-14 18:18:21 本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]蜡笔小新 2023-12-14 17:15:38 本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]蜡笔小新 2023-12-14 17:06:58 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]蜡笔小新 2023-12-14 15:43:50 本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]蜡笔小新 2023-12-14 15:39:51 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]蜡笔小新 2023-12-14 13:11:00 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]蜡笔小新 2023-10-13 22:01:54 博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ... [详细]蜡笔小新 2023-10-13 18:52:58 夜幕2502896061这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1如何使用Navicat修改mysql用户密码?
- 2爱奇艺万能播放器解决百度网盘限速问题
- 3android禁用下拉刷新,【报Bug】Android 自定义组件编译模式下,与scrollview一起使用时,下拉刷新无法禁用,在非自定义组件编译模式下正常...
- 4swoole4.2 使用killUSR1 PID 。 onWorkerStart 里面的定时器失效
- 5正则匹配 一个连接的最后一些数字
- 6【mysql启动】
- 7如何在虚拟机Server2003系统上安装SQL Server2008R2?
- 8怪猎世界最近一两年是会持续更新还是出续作,更新的话想入主机端可以吗?:怪物猎人世界设置
- 9什么是smart原则(SMART原则具体是指什么)
- 10从禁止复制的网页上复制信息
- 11RedmiBook Pro宣布:首批搭载11代酷睿H35处理器
- 12海豚知道入驻费用介绍
- 13安装步骤_nginx证书的基本安装步骤有哪些?
- 14码支付最新版,支持云端电脑手机监控,开原更安全
- 15解决MySQL连接出现未知错误的方法(详细步骤让你轻松搞定)
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有