2016年08月所有文章

当padding的值为百分比

现在有这样一个场景:一个移动端页面的顶部有一个banner,这个banner图片的宽高比是2:1。往往用户第一次打开该页面时,banner图片的加载速度都会比较慢,在加载的过程中,banner的位置是没有东西的,请问如何只用CSS来设置该部分在图片还没加载好的样式(即图片未加载完成时,banner区域的宽高比也要是2:1)。

这是我前几天面试的时候遇到的题目,当时我就蒙圈了…这TM不用JS怎么搞?

我假装思考了十几秒后说:不知道…

随后 ,面试官告诉我使用padding设置成百分比,这个百分比是根据它的宽来进行计算的。

当时我就觉得我会永远记住这个知识点:padding设置成百分比时,是根据它的宽来进行计算的。没错,我的确记的很清楚。

几天后的今天,我自己来测试一下发现并不是那么回事儿:

See the Pen …

ES6中的Classes(类)

在一些传统的面向对象的语言当中(比如JAVA、C++等)都有类的概念,我们通过类来新建需要的对象。如果接触过面向对象的同学看到这篇文章将会觉得特别熟悉。

ES6之前

在ES6之前是没有“类”这个东西的,我们是通过构造函数来模拟“类”的实现:

function Person(opt){
     this.name = opt.name;
     this.age = opt.age;
}

实例方法是通过prototype

16.FlexBox弹性盒子详解

RUNTIME: 50:50

详细介绍 CSS3 中的FlexBox 布局。
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。