标签:前端

[前端]浅析外边距折叠(Collapsing Margins)

蓝飞 蓝飞 | 时间:2013-01-26, Sat | 9,608 views
前沿信息 

我们在学习前端的过程中,有时候会出现一些奇怪的现象,Collapsing Margins便是其中之一,有时候我们想要某个元素离的第一个子元素能够下移一些,于是给它设置了margin-top,但奇怪的是这个margin-top属性却传递给了父元素,导致父元素的位置下移:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
		}
		.parent {
			height: 200px;
			background: #0099ff;
		}
		.child {
			width: 230px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">Child</div>
	</div>
</body>
</html>

这是个BUG吗?为什么各种浏览器都会有这样的“BUG”呢?其实,W3C规范认为margin折叠会使页面布局更加合理,比如两个段落(<p>)之间,段前间距跟段后间距应该只保留最大的一个,而不应该两者相加而导致段落之间间隙过大。下面,我们就来探究一下这个奇怪的Collapsing Margins。

(阅读全文…)

[转载]高性能网站需避免的7个错误

蓝飞 蓝飞 | 时间:2012-12-14, Fri | 4,870 views
前端开发 

翻译是门体力活,最后一点内容实在没嚼头,有些捣糨糊,省了不少废话。

原文地址:http://www.sitepoint.com/seven-mistakes-that-make-websites-slow/

原文作者:Coach Wei

翻译编辑:zhangxinxu

假期临近(应该指感恩节和圣诞节),公司增加了SEM方面的花费,关注SEO,修改页面。然而,为了最大的销售额,这些时间、财力上的付出可能就是打水漂——如果假期增加了访问量让网站速度变慢甚至下去的话。

性能影响用户是毫无疑问的。网站速度直接影响反弹率、转化率、收入、用户满意度、搜索引擎优化(已知的如反映网站流行度的Page Rank)以及几乎所有值得追踪的业务。用户离开速度慢的网站,而且往往不会再回来。

还在不久前,用户离开一个网站的时间点是8秒。然而,很快就是6秒,然后4秒,然后现在是2秒。门槛一直在提高。

小小性能改变,大大影响发生

用户的耐心不是线性的。第1秒的时候基本上没有人会放弃这个站点。但是,1秒开外之后,如果没有适当的反馈的话(例如浏览器标头显示页面标题),用户开始以一个加速的比率离开。到3~4秒的时候,一般的站点会一半的潜在用户。当然,具体的阈值根据网站、用户行为和意图以及其他因素不同而有所不同……但万变不离其宗。

瓶颈

快速测试:当HTML载入浏览器之后,用户等待你页面加载的时间百分比是多少?如果你不是做web开发的,或是经常混迹于性能社区的话答案可能会让你大跌眼镜。一般超过90%,用户花在等待上的时间的90%实在页面HTML载入到浏览器之后。为什么会这样呢?

(阅读全文…)

HTML文档与盒子模型

蓝飞 蓝飞 | 时间:2012-10-15, Mon | 11,020 views
前端开发 

关于HTML

百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。

为什么叫用于“描述”网页文档的“标记”语言呢?

简单地说,它不像JavaC++等程式语言,而是通过

标记

(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习。

(阅读全文…)

导航是Web网站重要的元素:置顶菜单的设计研究

蓝飞 蓝飞 | 时间:2012-10-06, Sat | 6,969 views
前端开发 

SirsiDynix公司UX/UI设计师Hyrum Denney在Smashing Magazine上发表了一篇文章《Sticky Menus Are Quicker To Navigate》,分享了自己对“置顶菜单”进行的可用性研究成果,及实现技术和相关挑战。CSDN对该文进行了编译,内容如下:

导航是Web网站中最重要的元素之一,大部分设计师都同意这一点。尽管如此,现在的导航并不总是容易使用。通常,用户必须滚动到网站的顶部才能访问导航菜单。最近,我在研究“置顶菜单”是否可以加速网站的导航。对此我进行了可用性研究。下面将展示本次研究的成果,以及一些实现的技术及相关的挑战。

(阅读全文…)