进入正文之前说点闲话:
九宫格布局很常见, 宽度可以设置百分比, 但高度呢, 除了用 js 动态设置之外, 有没有其他不用 js 的方法呢
首先明确一点, div 设置 padding-top: 10%, 这个 10% 是谁的 10% 呢?? 是父元素高的吗?? 上个例子先
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- <style type="text/CSS">
- .outer {
- width: 200px;
- height: 300px;
- border: 1px solid #000;
- }
- .inner {
- width: 100%;
- height: 50%;
- padding-top: 10%;
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <div class="outer">
- <div class="inner"></div>
- </div>
- </body>
- </html>
浏览器运行一下, 可以看到 padding-top 的值为 20,20 是父元素 width 的 10% 啊, 由此我们知道 padding 的百分比是相对于父元素的宽的, 是宽宽宽!!!
知道了这个特性就好说了, 下边可以利用 padding 实现正方形了 (正方形是特例, 应该是所有的已知宽高比的矩形)
实现一个浏览器窗口大小的正方形 (手机模式下效果明显)
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- <style type="text/css">
- body {
- padding: 0;
- margin: 0;
- }
- div {
- width: 100%;
- padding-bottom: 100%;
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
闲话说到这, 下边说回到九宫格的问题, 九宫格的高度问题就可以通过 padding 来实现
建议拷贝到浏览器手机模式查看效果
1. 利用 margin 实现间距
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 九宫格 </title>
- <style type="text/css">
- html,body,ul,li {
- padding: 0;
- margin: 0;
- }
- ul{
- list-style-type: none;
- }
- ul li{
- float: left;
- width: 32%;
- padding-top: 31%;
- margin-left: 1%;
- margin-top: 1%;
- position: relative;
- }
- ul li div{
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: yellow;
- }
- </style>
- </head>
- <body>
- <ul>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- <li><div></div></li>
- </ul>
- </body>
- </html>
2. 利用定位
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <title>
九宫格
- </title>
- <meta charset="utf-8">
- <style type="text/css">
- body, ul, li { padding: 0; margin: 0; list-style: none; } ul { width:
- 100%; padding-bottom: 100%; position: relative; } li { width: 32%; position:
- absolute; padding-top: 32%; background: red; } li:nth-child(-n+3) { top:
- 1%; } li:nth-child(n+4):nth-child(-n+6) { top: 34%; } li:nth-child(n+7)
- { bottom: 1%; } li:nth-child(3n) { left: 1%; } li:nth-child(3n-1) { left:
- 34%; } li:nth-child(3n-2) { right: 1%; } div { position: absolute; top:
- 0; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- <li>
- <div>
- </div>
- </li>
- </ul>
- </body>
- </html>
这有一个意外的收获, 就是 nth-child 居然可以连着写做双限制, 第一次用呢
总结: 本文的重点就是利用 padding 的这个特性进行占位, 然后和 position 搭配来实现一个正方形或已知比例的矩形
好高兴, 又发现一个 padding 的大作用!!
来源: http://www.qdfuns.com/article/44455/bc56718cd368a1e415097e1085ad0aa3.html