html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
前提说明
除非特别说明,以下几种方式的通用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身上的,父元素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后的效果
li与嫡长子的左边距作用于浅红和深红之间的左边距,
li嫡长子的右边距和下一个li嫡长子的左边距综合 构成了两个li之间的间距。
方法四、借助absolute方位值,实现自适应的网格布局
自适应?先来一波效果图:
原理absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。
关键点1. page最外层的父元素使用absolute负责占位,给子元素们把空间拉开。或者用宽高也行
2. 每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列
3. 本案例中,list元素内部用了伪元素+absolute的方式做了效果展示,实际项目中,list元素里边就可以填充自己个各式各样的业务代码了。
关键代码
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多栏布局
原理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;
}
方法六、grid
原理用CSS Grid 创建网格布局,是最简单也是最强大的方法。
关键点
1. 九个单元的父元素wrapper设置display为grid类型(注意兼容写法)
默认九个元素就会堆叠排序。
2. 设置每一行中单个元素的宽度: grid-template-columns,每个宽度值100px根据业务需要设置。
给三个设置了宽度就长这样了。
3. 设置每一列中单个元素的高度: grid-template-rows,每个高度值100px根据业务需要设置。
最后出现我们想要的效果:
关键代码
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(此元素会作为一个表格单元格显示(类似
和 ))
关键代码
- 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求稳,就用前几招。
如果移动求快准狠,就用后几招。本文转载自:https://www.cnblogs.com/padding1015/p/9566443.html
更多web开发知识,请查阅 HTML中文网 !!
html九宫格布局原理,了解CSS九宫格布局的几大实现方法相关推荐
- html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
- css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- HTML模板布局页面教程,css网页布局教程 标签 HTML Nav CSS布局教程
短视频,自媒体,达人种草一站服务 大家好,我是毛仔,从今天开始毛仔和大家一起学习div+css页面布局. 从2008年7月份开始,毛仔辞去了原来的工作,和老兄一起网络创业.在那半年时间里学习了不少东西 ...
- 平分布局 html,实现CSS平分布局的4种方式
实现CSS等分布局的4种方式 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比 ...
- 拆!对比详解 Flutter Widget 和 CSS,你关心的布局原理都在这儿了
简介: 这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异,分享在对接过程中会遇到的问题和解决方案,帮大家理一理思路,内容可以分为这几部分:1.CSS 和 Widge ...
- css 列 布局,CSS二列三列布局
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法 二列&三列布局: image.png 二列布局的特征通常是侧栏固定宽度,主栏自适应宽度 三列布局的特征通常 ...
- 微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习 以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
- CSS页面布局(超详解)
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
- 【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格 相关术语 1.2 网格布局的 属性分类 2. grid 属性: 同时 ...
最新文章
- str函数和repr函数的区别
- log4j配置报错:ERROR Failed to load driver.ClassNotFoundException.
- js 实现 复制 功能 (zeroclipboard)
- Intent介绍及Intent在Activity中的使用方法
- 你真的理解clear:both吗?
- python @符号_用Python学数学之Sympy代数符号运算
- 揭开银行U盾的秘密---签发CA证书:单向认证+双向认证(含java代码)
- 小程序 用户反馈_用户反馈如何提高我的应用程序的安全性
- php 验证邮箱 php验证手机号码 ph验证身份证
- avi怎么转换为mp4格式?
- POM文件配置详解(总体与单项)
- 如何给电脑安装双系统,电脑安装双系统教程
- 7-10 计算工资 (15分)
- 单神经元自适应控制算法,神经网络自校正控制
- Windows使用SSH Secure Shell实现免密码登录Linux的方法以及使用scp2命令免密码下载文件
- oracle 官网邮箱和密码是什么,我是如何进入21cn内网的(可能获取用户邮箱密码)...
- SparkSQL 概述
- electron调用python_electron教程(一): electron的安装和项目的创建
- 读万卷书不如行万里路,行万里路不如阅人无数,阅人无数不如名师指路
- Python计算机视觉:视频人脸马赛克
热门文章
- 框架复习(一):不如写个tiny-Spring?(完整版)
- iPhone开发播放音乐与按钮声音
- 密码学归约证明——DH密钥交换协议在窃听者存在的情况下的安全性
- dodo:人脸识别方法个人见解(zz from prfans)
- Ruby on rails 实战圣经:Part 2: 深度剖析环境设定与Bundler
- 干货,如何建立数据标签体系
- 5G NR标准 第4章 LTE概述
- 打印机文件服务器主机,打印机服务器主机名称是什么原因
- 1234组成无重复三位数
- 在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件