纯CSS实现响应式九宫格布局

原创 小枝节KKW 随笔 CSS 311阅读 2017-12-11 19:26:41 举报

进入正文之前说点闲话:
九宫格布局很常见,宽度可以设置百分比,但高度呢,除了用js动态设置之外,有没有其他不用js的方法呢

首先明确一点,div设置padding-top: 10%,这个10%是谁的10%呢?? 是父元素高的吗??上个例子先
html 代码

浏览器运行一下,可以看到padding-top的值为20,20是父元素width的10%啊,由此我们知道padding的百分比是相对于父元素的宽的是宽、宽、宽!!!
知道了这个特性就好说了,下边可以利用padding实现正方形了(正方形是特例,应该是所有的已知宽高比的矩形)
实现一个浏览器窗口大小的正方形(手机模式下效果明显)
html 代码

闲话说到这,下边说回到九宫格的问题,九宫格的高度问题就可以通过padding来实现
建议拷贝到浏览器手机模式查看效果
1.利用margin实现间距
html 代码

2.利用定位
html 代码

这有一个意外的收获,就是nth-child居然可以连着写做双限制,第一次用呢
总结:本文的重点就是利用padding的这个特性进行占位,然后和position搭配来实现一个正方形或已知比例的矩形
好高兴,又发现一个padding的大作用!!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复