css实现响应式九宫格效果

1. 首先看下九宫格的效果图:

2. html代码比较简单,如下:

    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
    </div>

3. css代码也不多 : )

        * { padding: 0; margin: 0; }
        .main {
             
            background-color: #fff;
             100%;
            padding-bottom: 100%;
            padding-left: 0.5%;
    	　　 padding-top: 0.5%;
        }
        .main>div {
             31%;
            padding-bottom: 31%;
            border: 1% solid #fff;         
            background-color: mediumpurple;
            border-radius: 3%;
            float: left;
            margin: 1%;
        }

接下来分析一下如何实现等宽高的,这里主要使用 padding-bottom 属性来实现高与宽一样的!

1. padding 属性 : 当该属性的值用%表示时, 是基于父元素的宽度的百分比 的内边距。

　上面的css代码就是通过设置padding与宽度的百分比一致来实现等宽高的格子的 : )

2. 要实现九个格子固定位置, 还要计算出每个格子的宽度以及边距margin, 这些是根据项目的实际情况计算的 : )

但上面仅仅是实现没有内容的九宫格,如果往里面添加内容,是会乱的, 所以下面说一下如果往格子里添加内容(完整代码):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>九宫格</title>
    <style>
        * { padding: 0; margin: 0; }
        .main {
             
            background-color: #fff;
             100%;
            padding-bottom: 100%;
            padding-left: 0.5%;
    	　　 padding-top: 0.5%;
        }
        .main .box {
             31%;
            padding-bottom: 31%;
            border: 1% solid #fff;         
            background-color: mediumpurple;
            border-radius: 3%;
            float: left;
            margin: 1%;
            position: relative;   /*父元素给相对定位*/
        }
        .main .box .content {
	　　position: absolute;    /*子元素给绝对定位*/
	　　 100%;
　　　　　　 height: 100%;
	}
    </style>
</head>
<body>
    <div class="main">
        <div class="box">
        	<div class="content">
        		格子1
        	</div>
        </div>
        <div class="box">
        	<div class="content">
        		格子2
        	</div>
        </div>
        <div class="box">
        	<div class="content">
        		格子3
        	</div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

格子内部是一个和格子等宽高的div元素,我们可以在这个标签内添加图标文字,组成一个好看的导航栏 : )

好啦,本次的分享就写到这里啦, 不懂的可以在下面留言 : )