CSS特性:空白外边距互相叠加

空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
先看如下demo代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think
<style>
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
空白外边距互相叠加
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
空白外边距互相叠加
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.

一个简单的鼠标划过切换效果

上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.
鼠标划过切换效果
核心JavaScript代码:点此查看DEMO

//@Mr.Think获取对象属性兼容方法
function $(objectId){
    if (document.getElementById && document.getElementById(objectId)) {
        return document.getElementById(objectId);// W3C DOM
    }
    else
        if (document.all && document.all(objectId)) {
            return document.all(objectId);// MSIE 4 DOM
        }
        else
            if (document.layers && document.layers[objectId]) {
                return document.layers[objectId];// NN 4 DOM..this won't find nested layers
            }
            else {
                return false;
            }
}

//@Mr.Think切换显示文字和背景图位置
function iLeftNav(type){
    var inum, i_navinfo = $("i_navinfo");
    if (type == "writeblog") {
        inum = "-300px";
    }
    else
        if (type == "sharepic") {
            inum = "-600px";
        }
        else
            if (type == "writemsg") {
                inum = "-900px";
            }
            else {
                inum = "-300px";
            }
    i_navinfo.innerHTML = $(type).innerHTML;
    i_navinfo.style.backgroundPosition = inum + " 0";
}

//@Mr.Think加载鼠标莫过事件
window.onload = function(){
    var liitem = $("i_blognav").getElementsByTagName("li");
    for (var i = 0; i < liitem.length; i++) {
        liitem[0].onmouseover = function(){
            iLeftNav("writeblog")
        }
        liitem[1].onmouseover = function(){
            iLeftNav("sharepic")
        }
        liitem[2].onmouseover = function(){
            iLeftNav("writemsg")
        }
    }
}

本文是一个简易的鼠标莫过效果, 如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.

一个基于jQuery的图片翻转效果

据说,这是一个最近很流行的效果,新浪微博,腾讯微博,都用到了这种效果,本博开博时也追随潮流用上了这种效果,今天又在经典论坛中看到了这个效果.
使用方法:
在你的大图链接中加入class=”miniImg artZoom”例:

Zoom

核心jQuery代码: 点此查看DEMO

//原作者:唐斌www.planeart.cn/,由Mr.Think整理分享.感谢唐斌同学:)
$(function(){
	var imgID = 0;
	$('a.artZoom').click(function(){
		var id = $(this).attr('rel');
		if(id == ''){
			id = imgID += 1;
			$(this).attr('id','artZoomLink-' +id);
			$(this).attr('rel',id)
		};
		var url = $(this).attr('href');
		$(this).append('<div class="loading" title="loading.."></div>');//loading
		function getImageSize(url,fn){
			var img = new Image();
			img.src = url;
			if (img.complete){
				fn.call(img);
			}else{
				img.onload = function(){
					fn.call(img);
				};
			};
		};
		getImageSize(url,function(){
			$('#artZoomLink-' +id+ ' .loading').remove();
			$('#artZoomLink-' +id).hide();
			if (id != '' && $('#artZoomBox-' +id).length == 0){
				var html = '';
				html += '<div class="artZoomBox" id="artZoomBox-' +id+ '" style="display:none">';
				html += '	<div class="tool"><a class="hideImg" href="#" rel="' +id+ '">收起</a><a class="imgLeft" href="#" rel="' +id+ '">向左转</a><a class="imgRight" href="#" rel="' +id+ '">向右转</a><a class="viewImg" href="#" rel="' +id+ '">新窗口打开</a></div>';
				html += '	<a href="' +url+ '" class="maxImgLink" id="maxImgLink-' +id+ '" rel="' +id+ '"> <img class="maxImg" width="' +this.width+ '" height="' +this.height+ '" id="maxImg-' +id+ '" src="' +url+ '" /> </a>';
				html += '</div>';
				$('#artZoomLink-' +id).after(html);
			};
			$('#artZoomBox-' +id).show('fast');
		});
		return false;
	});
	//让IE8在图片旋转后高度能被包含
	function IE8height(id){
		var w = $('#maxImg-' +id).outerWidth();
		var h =  $('#maxImg-' +id).outerHeight();
		$('#artZoomBox-' +id+ ' a.maxImgLink').css('height','');
		if ($.browser.version == '8.0' && w > h) {
			var maxHeight = Math.max(w, h);
			$('#artZoomBox-' +id+ ' a.maxImgLink').css('height',maxHeight+ 'px');
		};
	};
	$('.artZoomBox a').live('click', function(){
		var id = $(this).attr('rel');
		//收起
		if($(this).attr('class') == 'hideImg' || $(this).attr('class') == 'maxImgLink') {
			$('#artZoomBox-' +id).hide('fast',function(){
				$('#artZoomLink-' +id).show();
			});
		};
		//左旋转
		if($(this).attr('class') == 'imgLeft') {
			IE8height(id);
			$('#maxImg-' +id).rotateLeft(90);
		};
		//右旋转
		if($(this).attr('class') == 'imgRight') {
			IE8height(id);
			$('#maxImg-' +id).rotateRight(90);
		};
		//新窗口打开
		if($(this).attr('class') == 'viewImg') window.open($('#maxImgLink-' +id).attr('href'));
		return false;
	});
});
jQuery.fn.rotate = function(angle,whence) {
	var p = this.get(0);
	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}
	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.cos(rotation);
	var sintheta = Math.sin(rotation);

	if (document.all && !window.opera) {
		var canvas = document.createElement('img');
		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;
		canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
		} else {
			canvas.oImage = p.oImage;
		}
		canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
		canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
		var context = canvas.getContext('2d');
		context.save();
		if (rotation <= Math.PI/2) {
			context.translate(sintheta*canvas.oImage.height,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-costheta*canvas.oImage.height);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-costheta*canvas.oImage.width,canvas.height);
		} else {
			context.translate(0,-sintheta*canvas.oImage.width);
		}
		context.rotate(rotation);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
		context.restore();
	}
	canvas.id = p.id;
	canvas.className = 'maxImg';//定义图片旋转后的className
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
	this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
	this.rotate(angle==undefined?-90:-angle);
}

声明一下,本文实例及代码原作者为唐斌同学(他的博客很棒哦~),原文地址:http://www.planeart.cn/?p=696,感谢唐斌同学:).

网站基本优化:PHP的gzip压缩方法

如果你的网站是php的,通过下面的方法将能加速你网站的访问速度,无论加速多少,哪怕是0.01秒,你的网站在用户体验上就更进了一步。
在尝试用如下方法前请为你的FirrFox(没有FireFox?移步前往)装上由Yahoo开发的YSlow插件(YSlow是什么?),然后用它分析一下你网站现在的分值是多少.切入正题,开始gzip压缩(本文以压缩css文件为例).
第一步,建立压缩所需的php文件
复制如下代码,保存到要压缩的css文件同目录,命名为css.php,名称可根据你自己喜好命名,只要是php文件即可.

<?php
/**
*@a.header(...这一行是设置压缩文件类型的,如果你要压缩js文件就将text/css改成text/javascript
*@b.include(...此处包含你要压缩的文件,多个按你现在的顺序依次用include("...");调用
*/
if(extension_loaded('zlib')){//检查服务器是否开启了zlib拓展
    ob_start('ob_gzhandler');
  }
  header ("content-type: text/css; charset: utf-8");//在这里设置要压缩的文件类型
  header ("cache-control: must-revalidate");
  $offset = 60 * 60 * 240;//文件的距离现在的过期时间,这里设置为一天
  $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
  header ($expire);
  ob_start("compress");
  function compress($buffer) {//去除文件中的注释
      $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
      return $buffer;
    }
  include("style.css");//在此处包含你所要压缩的文件,多个请用include包含后依次排列
  if(extension_loaded("zlib")){
    ob_end_flush();//输出buffer中的内容
}
?>

第二步,前台调用
以本站为例. 原CSS调用为:

gzip压缩后调用方式为:

需要说明的是,如果你以前有多个css调用,那么,gzip后只须调用一个.当然,前提是你的压缩php文件中包含了所有要调用的css样式表.
第三步,压缩完成,此时用我文章开始提到的YSlow插件再分析一下你的网站,对比一下两次的分值,相信一定会有惊喜.
最后,要提醒一点的时,gzip的php文件中设置了缓存时间,如果你改过css文件,传上去后不是即时生效的,生效时间为上述gzip代码中$offset后面设置的值.解决方法其实也很简单,修改css后,同时修改一下样式调用路径中…/css.php?v=100415 100415的值(这个值可以随意取)即可.
用户体验就是从最细微处做起,忘掉自己的行为模式,站在用户的角度为用户着想,你网站的用户体验就做到了一半.

兼容IE6的图片圆角边框CSS

纯CSS实现的图片圆角边框效果,兼容IE6.
实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.
核心CSS代码:点此查看DEMO

.i_roundimg{ background:url(http://mrthink.net/demo/images/100508.png) no-repeat;cursor:pointer;width:60px;height:60px;position:absolute;}

DEMO用到的PNG背景图片:DEMO中PNG图片
另外,样例中有两种解决IE6下PNG图片的方案, 可参考.


渔夫科技