杰拉斯的博客

标签:CSS

纯CSS无表达式实现图片等比缩放(支持IE7及以上)

杰拉斯 杰拉斯 | 时间:2013-02-27, Wed | 28,881 views
前端开发 

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

  1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
  2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:

<img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

(阅读全文…)

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

杰拉斯 杰拉斯 | 时间:2013-01-26, Sat | 11,132 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。

(阅读全文…)

爱上朴实的CSS细节

杰拉斯 杰拉斯 | 时间:2012-09-26, Wed | 5,191 views
前端开发, 前沿信息 

未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜、颜色等视觉效果。这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍。

如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器、单位、函数(方法)。我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的。

怎么说呢,让我们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了,但值得我们更好地认识,而有些则刚刚面世。虽然不起眼,但是它们可以提高我们的工作效率——以谦虚的姿态。

(阅读全文…)

[转载]创建等高列布局的八种方法

杰拉斯 杰拉斯 | 时间:2012-09-17, Mon | 16,123 views
前端开发 
最近正在考虑写一篇关于CSS等高布局的文章,今天就在微博上看到W3CPlus上发表的一篇文章《八种创建等高列布局》,看了也是颇有收获,特收藏于此,也同大家分享。

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情。

(阅读全文…)

50 款简化 CSS 开发的实用工具和生成器

杰拉斯 杰拉斯 | 时间:2012-07-27, Fri | 30,110 views
前端开发 

这些CSS工具都是很适合网页设计题使用,已经为大家分好类别,请自行点击导航快速浏览:

网格和布局,CSS 优化,CSS 菜单工具,CSS 按钮,CSS 圆角,CSS 框架,CSS Sprites,CSS 排版以及 CSS 表单。

(阅读全文…)