自适应布局的九宫格

成果:https://euthpic.github.io/Squred-Paper/squared-paper.html

第一步:画一个格子

一开始用的是P标签,但想想其实什么标签都可以,只是用它的background-color而已,于是按要求改用div。设置完颜色之后可以看到页面没变化,这是因为div里没有content来撑开一块区域,默认height是0的,要设置height和width才能看出来。再弄个边角(border-radius)和边框(margin),一个格子就画好了。

第二步:画第二个格子


哎,怎么第二个格子是在下面而不是上面的?查资料之后明白,在文档的正常流里,div是占据一整行的(正常流实则是标签在html中的排列方式——块级元素独占一行垂直排列,内联元素在行内从左至右依次排列),所以它的下一个元素会被挤下去。改为float布局,样式里添加{float:left},让div浮起来,这样它们就可以共行了。两个div都要float,不然它们会重叠,因为浮动元素不占据正常流的空间。

第三步:画第四个格子

这时候遇到的问题是:怎么让格子换行呢?

如果继续float它会继续向右排列,不float就会重叠。OK,翻书时刻。书里介绍了一个clear属性,如果你不希望元素的左边出现浮动元素,就{clear:left}清除左边的浮动元素,这样元素就会被左边的浮动元素挤到下面去了。

这样,九个格子就画完了。


第四步:自适应布局

嗯~ o(* ̄ ̄*)o  之前接触过一些响应式布局,是套上框架来实现的,原以为自适应也是这样,可是这一次我实现过程中查资料没发现一种解决方案建议用框架的,看来自适应是没框架的,得一个个改。

CSS里常用的单位有px和em等,px就是常说的像素,em是基于浏览器小写x的font size来计算的一个单位长度,它们都是绝对单位,不适合自适应布局。

第一反应是将px改成%,这样它就可以随着窗口大小而变化了,可是问题又来了:原先的正方体会变形呀。。

如何让height等于width呢?再深一层的思考:CSS支持除%之外复杂的计算属性吗?

做个实验:

可以看到在chrome里面就算10*10这样的简单计算CSS都不支持。

不过意外发现了这个:calc(),实验发现chrome是支持的,用来做一些简单计算,可是还是不知道如何获取某一个对象的值。

第二反应是用js获取width的值再传给height,可是先不考虑能否实现,在CSS的任务中不应该考虑用JS。

最后是发现了两个单位。

vw:相对于视口的宽度。视口被均分为100单位的vw

vh:相对于视口的高度。视口被均分为100单位的vh    (v for viewport)

与要求比较之后选用了vw,最终解决了自适应的问题。

查资料的过程中发现了一种有趣的方案:

为什么这样也能自适应呢?width继承父元素的宽度可以理解,可是padding-bottom不是继承高度吗(我原先的理解,top-bottom表示上下)?这样还能保持正方形吗?答案不是。


可以看到padding-bottom的%是继承自父元素的宽度的,而且padding的其他三个位置也是这样。

width和padding-bottom都继承自同一对象,那么正方形打野  啊呸,正方形格子就可以自适应了。

看到深度思考里有提到ide和文本编辑器的争议。根据我一段时间来的体会,我觉得工具本身对于初学者来说并没那么重要,初学者应该关注的是代码本身。而且对于一个选择困难症患者来说,要避免让各种选择弄得自己很头疼,你要这样想:有人用,就说明它可以用。那么你就用,等哪天你用了一段时间,对它了解更深了,你觉得它不好用,那你就换别的,这时你的选择是更加坚决的,因为你了解更多了。


最后,那么,今天就争取搭建一个服务器吧。昨天用阿里云无脑搭了一个wordpress,今天要搭一个个人的网站用来部署github的项目。不过我看到一堆新的名词真的很头疼,什么SVN,什么什么咯。哎哎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 2,612评论 0 4
  • 真想变小呀 巨人站在镜子前面 举起自己的大手 又抬起大脚 很大很大很大的大脚 变小了多好 唱歌跑调不会被人笑 走路...
    燕子飞童诗童话阅读 233评论 0 1
  • 你常把“梦想”挂在嘴边,却败在不愿改变的懒惰上;你向往更好的生活,却不愿跳出舒适区去争取。要知道,每个梦想的背后都...
    墨荷雨烟阅读 117评论 0 0
  • 文|域往 当我交上农药学概论试卷的时候,我的心情是这样的:今天是个好日子,心想的事儿都能成~ 交卷之前心情阴雨霏霏...
    域往阅读 721评论 21 11