淮塔·2015年秋

下面是一些其实11月20日就拍好的照片,这才筛选了几张传上来。
上礼拜才刚刚用jQuery做的照片墙,已经被我删的不成样子了,暂时填了些没法瀑布流起来的图片。

淮塔秋天
淮塔秋天
淮塔秋天
淮塔秋天

从此刻开始,
站起来吧!

html+css+js计算器

用数组模拟了堆栈。
写的过程中发现,像小数点的处理,连续运算的处理,还有一些细节的处理,比想象中的要麻烦不少。
另外因为键位的个数一直在增删,反正可能还会再修改,界面暂时定格在了这个蠢萌的样子……

进入计算器
HTML+CSS+JS Calculator

inline-block之间空隙的两三事

inline-block空隙的缘由

此处引用一段知乎@贺师俊 的回答。

此乃历史问题。不难理解,空白字符压缩(white space collapse)是西文排版的必然结果。SGML、TeX都是如此。不过对于不使用空格作为词分界的语言,比如东亚语言来说,就造成了问题。所以其实这是行内(inline)的问题(inline-block也是将其本身作为inline,内部作为block)。

inline-block空隙的解决方法

方法一

全部排到一行

方法二

利用折行的注释标签达到全部排到一行的效果。

1
2
3
<button>按钮1</button><!--
--><button>按钮2</button><!--
--><button>按钮3</button>

方法三

目前我认为比较美观的方法如下:

1
2
3
<button>按钮1
<button>按钮2
<button>按钮3</button>

去掉每个inline元素的尾部标签,浏览器依然可以正常解析。
最后一个inline元素要加上尾部标签是为了兼容IE。

关于margin穿透的两三事

遇到一个问题:

1
2
...
div.outter>div.inner

【问题】

在以上情况中,inner的margin-top会穿透inner,变成outter的margin-top。(margin-left则没有这个情况)

【解决】

outter加一个overflow:auto或hidden。

【引申的问题】

overflow肯定不是一个好的解决方法,在父子框架中需要有一定边距时,最好不要用margin来实现。
正所谓 “同级用margine,父子用padding”
换成padding-top来解决会怎么样呢?

【引申的解决】

用padding-top时,所有css样式就都可以写进outter中。
随之而来的问题是如果你的outter是定height的,虽然没有穿透的问题,但是content-box会被撑大。
解决一 :自己手动把outter的height改成 height减去padding-top的值 ,完美解决。
解决二 :利用怪异盒子, box-sizing: border-box; ,可以在不修改height成难懂数字的情况下解决,缺点是只支持ie8以上浏览器。

DOM学习有感 & 琐事

学习有感

拖延了一天才大略的对DOM,大略的感觉就是把HTML标签变成树形再通过定义好的方法提取把树上的叶子提取出来。
再回头细读一下CSS和JS,学学实例。
另外买了一本php cookbook,希望如果有空看看后端,能比前端更得要领一点。
总的来说,看书过程比较痛苦。后续多琢磨琢磨别人的前端是怎么做的然后临摹一遍,可能会痛快一些。

双十一

把内存和镜头都买了。
这种通过简单粗暴的杀钱方法得到的快感就跟看电视剧和玩游戏一样,伴有负罪感且不可能有长的延续性的。
希望过了短效的快感之后,这些东西能给自己工作效率、生活质量带来长效的提高。

mac下共享hexo安装失败 & 琐事

1

本来打算把Dropbox共享的hexo文件夹在mac mini上部署一遍,实现win+mac双机交替写博客的。
不过最终部署失败,一直卡在缺少module,有个.build之类的文件夹有问题。
百度之后,用npm install hexo -g no-optional可以使g和s指令成功运行,但是治标不治本,对deploy指令无效。
所以暂时还是只能用windows写blog了泪目。

2

去矿大办医保发现可以拍秋景了,算是彻底黄透了。
然而我的镜头还没来。

3

这两天在效率很低的看JS DOM,今天再不提高效率就要歹势啦!

南湖一角

2015年11月5日,从实验室偷偷溜出来想拍秋景,照片照出来才发现,秋天还没熟透。
由此萌生了一个剁手的想法——想要入个广角、拍拍过几天通透的秋天。
以下,陪伴了我三(can)年(bu)有(ren)余(du)的18-55mm拍出来的遗(zha)作(zha)。