理解JS的原型继承

不多说看代码吧,里面有注释~

提示:你可以先修改部分代码再运行。

3列、2列自适应布局,中部内容优先显示3列布局等方法。

最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。

1. 固定宽度,中部DIV内容优先显示布局

说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

提示:你可以先修改部分代码再运行。

Read More

主流的clearfix清楚浮动原理

我目前已知的清除浮动的方法大概有3种

首先是HTML结构:

<div id="warbox" class="clearfix">
    <div id="left"&gt;Left</div>
    <div id="right"&gt;Right</div>
</div>

然后是CSS代码:

<pre class='prettyprint'>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* <a href="http://liuxiaofan.com/" title="html">html</a> .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */

Read More