自适应图片九宫格 css,CSS实现自适应九宫格布局 大全
看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动。今天想折腾一下,实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格,算上inline-block的话就是五种了。
首先要注意的是九宫格容器是宽高相等的正方形,并且是自适应的,这里关键是实现宽高相等,有些人想到了相对视口宽度 vw,但是它是相对于屏幕可见宽度来设置的,并且会忽略滚动条的宽度,所以这是不可行的。这里我用一种变通方法,看代码…
FlexBox
HTML 结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
抽取公共样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.square{
position: relative;
100%;
height: 0;
padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
margin-bottom: 30px;
}
.square-inner{
position: absolute;
top: 0;
left: 0;
100%;
height: 100%; /* 铺满父元素容器,这时候宽高就始终相等了 */
}
.square-inner>li{
calc(98% / 3); /* calc里面的运算符两边要空格 */
height: calc(98% / 3);
margin-right: 1%;
margin-bottom: 1%;
overflow: hidden;
}
使用Flex的一个好处是不用再担心高度塌陷的问题,而且还可以轻松实现子元素横向竖向甚至按比例伸缩扩展的布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.flex{
display: flex;
flex-wrap: wrap;
}
.flex>li{
flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
background-color: #4d839c;
text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
margin-right: 0;
}
.flex>li:nth-of-type(n+7){ /* 选择倒数的三个元素,n可以取0 */
margin-bottom: 0;
}
Grid
对于网格布局来说,grid 比 flex 更为方便,代码量更少,可以处理更为复杂的结构。
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.grid{
display: grid;
grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
grid-template-rows: repeat(3, 1fr); /* fr单位可以将容器分为几等份 */
grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
grid-auto-flow: row;
}
.grid>div{
color: #fff;
font-size: 50px;
line-height: 2;
text-align: center;
background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}
Float
浮动实现九宫格就不多说了,原理同上。
1
2
3
4
5
6
7
8
9
10
11
12
13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.float::after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
.float>li{
float: left;
background-color: #42a59f;
text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.float>li:nth-of-type(3n){
margin-right: 0;
}
.float>li:nth-of-type(n+7){
margin-bottom: 0;
}
除了浮动,这里 li 也可以使用display: inline-block;实现同样的效果,不过要注意HTML代码非压缩情况下行块级元素之间会出现默认间隔,不同浏览器下表现还不一样,这时可以给父级元素设置font-size: 0;
Table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
1
2
3
4
5
6
7
8
9
10
11
12
.table{
border-collapse: separate;
border-spacing: 0.57em;
font-size: 14px;
empty-cells: hide;
table-layout: fixed;
}
.table>tbody>tr>td{
text-align: center;
background-color: #889ed8;
overflow: hidden;
}
说下用表格实现九宫格有哪些瑕疵:
最后一行最后一列的单元格宽高与前面的不一致,虽然相差不大,但是还是有差异的;
与前面的两种方法不同,table 单元格之间的间隔是利用border-spacing属性实现的,且不支持百分比,单元格四周都有类似margin的外边距效果,如下图。
分析
综上来看,个人认为 FlexBox 适合用于移动端,PC端 IE10 以下不支持;Grid网格布局比较方便,但是规范还未成熟,主流浏览器厂商尚未推广,不推荐使用在项目中;浮动和行块级式声明可以兼容到IE6,移动端和PC端支持的都不错;Table 因为实现有瑕疵所以不推荐使用。
自适应图片九宫格 css,CSS实现自适应九宫格布局 大全相关推荐
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0}/*----------------------------------- 自适应宽度图片按钮 - ...
- css自适应图片样式,css怎么让图片自适应?css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
- 如何用纯CSS将图片填满div,自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计 标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
- 3种CSS实现背景图片全屏铺满自适应的方式
来源 | https://www.fly63.com/ 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景 ...
- CSS:实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
- html图片自动适应,css如何让图片自适应?
要使图片能够自适应显示,我们一般可以通过设置CSS样式,让图片作为父元素的背景图片,再设置相关属性来实现.下面我们来看一下使用css设置图片自适应的方法. css设置图片自适应示例: HTML代码: ...
- html图片自适应浏览器高度,css如何高度自适应浏览器高度?
高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容. 在IE7+及chrome.firefox等浏览器中, ...
- css background 充满自适应_剖析一些经典的CSS布局问题,为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于 行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
- CSS 文字垂直居中自适应 - 代码篇
CSS 文字垂直居中自适应 - 代码篇 引言 <div>内的文字能在图片缩放的同时,自动居中(自适应居中),详情看下列代码. 效果图: 解决办法 · 代码示下: /*CSS代码*/ .h3 ...
- JS + CSS 做一个简易九宫格抽奖
目录 1.CSS样式 2.JS动作 大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式 样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...
最新文章
- error: unbound prefix. Message{kind=ERROR, text=error: unbound prefix., sources=[E:\work\me\fragment
- oracle技术之Oracle 跟踪事件(一)
- 智游推送教你如何使用统计图表辅助运营
- layui分页limit不显示_小心避坑:MySQL分页时使用 limit+order by 会出现数据重复问题...
- php ajax sucess 失败,Ajax请求发送成功但不进success的解决方法(图文教程)
- 导出oracle awr分析报告,配置oracle内存参数,察看表空间使用率
- ODP.NET连接池性能计数器
- lh服最新服务器,LH服12月1日开发更新 着重提升服务器稳定性与职业bug修复
- 上海海事大学c语言题库,上海海事大学,C语言试卷6
- POJ2074 Line of Sight
- Jetson Xavier NX使用Yolov5+DeepStream+TensorRT实现CSI摄像头的目标识别及采坑记录
- 【独行秀才】macOS Big Sur 11.5 Beta 1(20G5023d)原版镜像
- Libra最后的命运
- remap中的xmap,ymap详解
- nodejs之pathinfo/pathname的使用
- 开始我的WebWork之旅
- SpringCloud疑难杂症
- c primer plus 第六版 第五章练习
- 商品SPU与SKU说明
- 《第一行代码 Android 第2版》下载
热门文章
- 地图渲染——四色定理的实现(AO+C++)
- java 地图四色着色算法_趣味地图系列之6 四色定理之我见
- ABAP CDS编写
- ef power tools mysql_Entity Framework Code First ---EF Power Tool 和MySql一起使用遇到的问题...
- python实现kmeans算法对图片的聚类分割
- JavaScript变量
- 噪声分析基础(公式)知识
- win10亮度进度条不见了
- 塑胶卡扣弹性计算公式_塑胶卡扣的制作方法
- 【Redis】Redis的五大数据类型