摘要：
一直比较纠结垂直居中的问题，最近又查阅了一些资料，借鉴了一些优秀方案，捣鼓出了一个兼容性较强的多行文本垂直居中解决方案，主要思路依然是利用vertical-align:middle来实现，经过测试，该方案能兼容IE6及以上版本的浏览器，先看代码：12324多行文本的垂直居中多行文本的垂直居中多行文本... 阅读全文
摘要：
元素水平居中是css中的常见问题，在css中元素要么是定宽，要么是不定宽，对于定宽元素，要实现其水平居中是非常容易的，但对于不定宽元素，要实现其水平居中略微复杂些，本文从定宽和不定宽两个角度来探究一下实现元素水平居中的常见方法。一、定宽元素的水平居中1，通过设置元素的margin-left和marg... 阅读全文
摘要：
bug描述：IE6\7中对inline元素（本身就是inline元素或者通过设置display为inline的block元素）应用text-indent，text-indent会传递到父元素，导致该元素本身位置偏移应用场景：在制作一组精美的横排按钮时，我们通常用float:left或者display... 阅读全文
摘要：
1，垂直居中为什么写top:50%;margin-top:-50px这种形式而不是top:-50px;margin-top:50%margin的值为百分比的话，其值的计算依赖于包含块的宽度，这条规则对margin-top、margin-bottom也实用，如果包含块的宽度不确定的话，这种方式就得不到... 阅读全文
摘要：
在研究CSS样式优先级问题之前，我们先来梳理一下页面应用CSS样式的几种方式：1，行内样式，利用元素的style属性添加样式，如：行内样式2，内嵌样式，利用style标签给页面应用样式，如：3，导入样式，利用@import url();指令导入外部样式，如：4，外链样式，利用link标签把外部样式应... 阅读全文
摘要：
1 共享onload事件function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload != "function"){window.onload=func;} else {window.onload=f... 阅读全文
摘要：
现象1：IE6下同一个父元素中的两个紧挨着的DIV，如果其中一个浮动另一个不浮动，则两个DIV之间会产生3px间隙。案例：左栏宽度固定，右栏自动伸展的两栏布局，两个DIV之间产生了3px的间隙如图：代码：1 2 左栏3 右栏4 css：1 .content{ width:100%; background:#9FC; height:1000px; overflow:hidden; zoom:1;}2 .aside,.main{ height:800px;}3 .aside{ width:170px; float:left; background:#9C3;}4 .main{bac... 阅读全文
摘要：
网页中我们经常遇到一些固定在页面中某个位置的返回顶部、分享等小按钮，它不会跟随滚动条改变位置。如下图：CSS实现固定定位最简便的是position:fixed;但是IE6不支持fixed，要实现IE6下的固定定位方法有多种，比如通过js、css表达式，这里分享一种纯CSS的解决方法。原理：把需要固定定位的元素相对于html定位，并保证html不产生滚动条，然后把body的高度设置为窗口的高度，内容溢出时body产生滚动条，这样在视觉上元素始终保持在浏览器窗口的固定位置。具体实现代码如下，供参考： 1 2 3 4 5 纯CSS实现固定定位position:fixed（兼容IE6） 6 ... 阅读全文
摘要：
如图所示，我们需要实现这样一种效果，图片img的高度是未知的（但高度还是小于外层box的高度）。HTML结构如下： CSS中跟元素垂直对齐有关的属性是vertical-align，W3C中说，在单元格中这个属性会设置单元格框中的内容的对齐方式。也就是说通过把一个DIV元素设置为单元格，然后就可以控制其中内容的显示方式了。 .box{ width:200px; height:200px; border:1px solid #06C; display:table-cell; text-align:center; vertical-align:middle; }此时除... 阅读全文
摘要：
当要在网页上要隐藏一个DIV的时候，我们立马想到设置display:none就能搞定。设置了一个DIV的display为none时，该DIV就从网页上消失了，也不占用空间。但在做项目的时候偶然发现了一个奇怪的现象，IE6下某些时候设置DIV的display:noe，该DIV依然占据一定空间。这里首先来重现一下这个奇怪的现象：1，我需要如上图所示的一个HTML结构： box1 box2 box3 box4对应的CSS：.box { width: 440px; background: #0CF; padding: 5px;}.list { width: 98px; height: 98px... 阅读全文