CSStask1-创建九宫格

来源：互联网发布：js 遍历array 中对象编辑：程序博客网时间：2024/05/16 14:02

目标：创建一个九宫格

任务要求：

要求九个正方形在页面上三三排列，使用div标签，border拥有圆角属性，背景颜色为#ff5a00；
要求只能使用class选择器，不能使用id选择器
要求九宫格大小随屏幕宽度改变，
要求配置服务器，让页面在PC和手机上都可以浏览；

任务解析：这个题目乍一看非常简单，细细分析下来实则有点难度。需要的知识技能如下：

了解CSS的盒子模型、浮动属性；
如何实现九宫格大小自适应；
Nginx服务器的配置；

任务完成：

完成HTML页面的设计，CSS样式的初步设计

<body><div class="wrap"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></body>
body {margin: 0;}.wrap {padding: 40px 0 0 40px;}.wrap div {width: 394px;height: 394px;margin: 0 40px 40px 0;background: #ff5a00;border-radius: 10px;float: left;}
现在页面可以显示九宫格了，通过Chrome浏览器的开发者工具进行调试发现，九宫格的大小无论在PC端还是手机上都不能进行调整，也就是自适应，这是因为我们在设置div的大小时采用了像素单位，虽然它是一个相对单位，但是并不能改变大小；为了能够自适应，我们舍弃px，转而使用%这个更加灵活的相对单位。

我们将像素单位全部改为百分比单位

body {margin: 0;}.wrap {padding: 3% 0 0 3%;}.wrap div {width: 30%;height: 30%;margin: 0 3% 3% 0;background: #ff5a00;border-radius: 1%;float: left;}
刷新页面，一片空白，为什么元素都不见了呢？
我们知道百分比是相对于父级元素来说的，此例中我们设置的div的父级元素为wrap，但是wrap本身并没有设置宽高，于是我们想去给wrap设置宽高来让div显示出来，可是设置多少呢？
我们知道，wrap实际上应该是有宽度的，所以div也应该有宽度，它继承了父级body的宽度，但高度怎么设置呢？
本来，wrap的高度是依赖于它的子级元素div的，当所有子级元素div的宽高设置好之后，wrap的高度自然就定下来了，但是问题在于：现在div的高度依赖wrap，而wrap的高度又依赖于div，所以就形成了一片空白的页面。实际上也不是一片空白，如果我们给wrap和div都设置一个可见颜色的border，便可以发现此时的div高度为0，这就陷入无限循环了，可怎么办呢？
到了这儿，熟悉CSS盒子模型的同学就知道，div的边框border中除了content是依赖于内容存在之外，还有一个padding属性，注意padding是包含在border之内的，也就是div的background属性中的color属性同样会作用于padding。我们不能设置div的高度，但是别忘了div的height=content+padding+border+margin，所以我们可以通过设置div的padd属性来让它看起来有高。
body {margin: 0;}.wrap {padding: 3% 0 0 3%;}.wrap div {width: 30%;padding-top: 30%;margin: 0 3% 3% 0;background: #ff5a00;border-radius: 1%;float: left;}
现在好了，九宫格又重新出现了，哎，你可能会发现九宫格的圆角看起来比第一次的10px小了很多啊？
其实是这样的，我们的百分比是相对于wrap的宽高而言的，而圆角属性border-radius的百分比是相对于div来说的，div的宽高是wrap的30%，所以如果你想让圆角属性也可以自适应的话，就相应的改一下就ok啦。其实如果不改的话，设置为10px也是没有大问题的，除非你在很小的页面上去浏览，否则差别很小。
现在为了能在各种设备上查看网页，我们需要在head中加上下面这个meta：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这就是所谓的viewport，具体可以看下面的解释：viewport
然后就是配置Nginx服务器了，它的作用就是将你的电脑转化为一个虚拟web服务器。更多信息在https://www.zhihu.com/question/41430703?from=profile_question_card查看。

问题回顾：

1.我们对wrap下的div布局的时候，其宽度设置为30%，margin设置为3%，理论上总宽度=30% * 3 +3% * 4 =102%，为何从页面来看，并没有超出页面边缘？
2.div之间的margin属性不会重叠；
3.div如果要设置百分比高度，只有在父级元素明确了高度之后才能设置成功；
4.添加viewport的意义在哪里，如果不加会有什么后果？
5.对于本例中实现九宫格的方法有无改进的地方？或者有无其他更好的方法？

阅读全文

0 0