蜗爱CSS - Div+css基础

line-height详解

wo-ai-niqq@163.com(woniu) — Fri,23 Jul 2010 16:06:09 +0800

偶然看到的一篇介绍line-height的文章，图文并茂很详细也很透彻，转过来学习。

line-height详解

行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。

7.3.1 语法

line-height属性的具体定义列表如下：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
说明：设置元素中行的高度。
值： normal：默认行高，一般为1到1.2；实数：实数值，缩放因子；长度：合法的长度值，可为负数；百分比：百分比取值基于元素的字体尺寸。
初始值： normal
继承性：继承
适用于：所有元素
媒体：视觉
计算值：长度和百分比值为绝对值；其他同指定值。

行高指的是文本行的基线间的距离。而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿，同时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置，如图7-17 所示。

图7-17 文字的基线

行高与字体尺寸的差称为行距（leading），如图7-18所示。

图7-18 行高与行距

7.3.2 内容区域、行内框和行框

理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的，如图7-19所示。

图7-19 内容区域

行内元素会生成一个行内框（inline box），行内框只是一个概念，它无法显示出来，但是它又确实存在。在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度，即：将行距的值（行高-字体尺寸）除以2，分别增加到内容区域的上下两边，如图7-20所示。

图7-20 行内框与行高

由于行高可以应用在任何元素上，因此同一行内的若干元素可能有不同的行高和行内框高，例如有如下代码，其显示如图7-21所示。

行高20px。 行高50px。行高30px。

图7-21 行内框与行框

这里又有一个新的概念——行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值。因此，当有多行内容时，每行都会有自己的行框，如图7-22所示。

图7-22 多行内容的行框

提示：理解行框和行内框的概念对于学习本章[7.4垂直对齐：vertical-align属性]一节的内容非常重要。
注意：行框的高度只同本行内元素的行高有关，而和父元素的高度（height）无关。

7.3.3 行高的计算与继承
以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下：

字高20px，行高2em。

字高30px，行高2em。

2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。

图7-23 行高的计算

行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如图7-24所示。

p { font-size : 20px; line-height :10px; }

字高20px，行高10px。此时多行的文字将叠加到一起。

图7-24 比字体高度小的行高

行高是可继承的，但是继承的是计算值，例如有如下代码：

p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }

字高20px。字高30px。

元素的行高2em，字体尺寸为20px，因此计算值为40px，虽然元素本身的字体尺寸为30px，不过其继承的行高仍为40px。但是在不同的浏览器内显示的效果却不尽相同，如图7-25所示。

图7-25 行高的不同表现

由于继承的是计算值，因此当元素内的文字字体尺寸不一样的时候，如果设定固定的行高很可能造成字体的重叠，例如有如下代码，其显示如图7-26所示。

p { font-size : 20px; line-height : 1em; }
p span { font-size : 30px; }

字高20px，行高1em，当文本为多行时可能会发生文字重叠的现象。字高30px。

图7-26行高继承造成文字叠加

为了避免这种情况，可以为每个元素单独定义行高，但是这样很烦琐，因此可以定义一个没有单位的实数值作为缩放因子来统一控制行高，缩放因子是直接继承的，而不是继承计算值。例如修改上例中的行高为：

p { line-height : 1; }

则上例中的XHTML代码显示如图7-27所示。

图7-27缩放因子对行高的影响

当内容中含有图片的时候，如果图片的高度大于行高，则含有图片行的行框将被撑开到图片的高度，如图7-28所示。

图7-28 含有图片的行

注意：图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。
提示：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，关于垂直对齐将在本章[7.4 垂直对齐：vertical-align属性]一节中讨论。

7.3.4 浏览器的差别与错误
浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分，如图7-29所示。

图7-29 不同浏览器对行高的显示

不过，相差的1至2个像素在实际显示中一般不会有太大的影响，因此可以忽略不计。比较严重的错误是IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效的问题，不过，在IE 7.0中已经修正了这个错误，但是其表现同其它浏览器也不相同。例如有如下代码，其显示如图7-30所示。

#lineHeight4 p { line-height : 60px; }
#lineHeight4 fieldset{ border : 0; }

内容含有图片在[IE 6]内浏览line-height将失效。

图7-30 包含替换元素的行高在IE内失效

由图7-30读者可以发现，IE 7.0中，将半行距分别加在了图片的上下，而由于图片默认是基线对齐，因此文字的基线下移了，这显然不符合CSS中的规定。

对于IE 6.0中行高失效的问题，需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。

提示：关于针对IE 6的CSS Hack，请参见本书[第16章：浏览器与Hack]。

7.3.5 应用：单行文字在垂直方向居中

在网页设计中，往往为了突出标题而添加背景图案，如图7-31所示。

图7-31 包含背景图片的标题

假设此标题的XHTML代码如下：

的背景图片和高，则文字会偏上，如图7-32所示。

图7-32 未设定行高的标题文字

针对这个现象，一般只需要设定与高度相等的行高即可，相关代码如下：

#sample h2 { height : 31px; line-height : 31px; …… }

此时在浏览器内文字已经在垂直位置上居中显示，如图7-33所示。

图7-33 设定行高后的标题文字

此方法同样可以运用在其他需要文字垂直居中显示的地方，例如列表项、导航条等等。

上一小节讲解了行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。

图7-34 文字和图片内容默认垂直对齐方式为基线对齐

这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。

CSS简写总结

wo-ai-niqq@163.com(woniu) — Wed,07 Jul 2010 16:28:02 +0800

《写出高效整洁的css的13条规则》里面有提到要尽量简写css。具体怎么简写呢，总结如下：

盒子的内外边距（margin 和padding）

以margin为例，padding相同。盒子有上下左右四个方向，每个方向都有个外边距：

 Example Source Code 

margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;

这四个值可以缩写到一起：

 Example Source Code 

margin:1px 1px 1px 1px;

缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

 Example Source Code 

margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

边框(border)

border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

 Example Source Code 

border-width:数字+单位;
border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
border-color: 颜色 ;

它可以按照width、style和color的顺序简写：

 Example Source Code 

border:5px solid #369;

有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：

 Example Source Code 

border:groove red;  //大家猜猜这个边框的宽度是多少？
border:solid;  //这会是什么样子？
border:5px;  //这样可以吗？
border:5px red; //这样可以吗？？
border:red; //这样可以吗？？？ 

通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。默认的颜色是该规则中的color属性的值，而color默认是黑色的。border的缩写中border-style是必须的。

同时，还可以对每条边采用缩写：

 Example Source Code 

border-top:4px solid #333;
border-right:3px solid #666;
border-bottom:3px solid #666;
border-left:4px solid #333;

还可以对每个属性采用缩写：

 Example Source Code 

border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同
border-style：solid dashed dotted groove;
border-color:red blue white black;

颜色缩写（color）

色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

 Example Source Code 

color：#113366

可以简写为

 Example Source Code 

color：#136 

所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。但是说明下，很多文章对于这种缩写不利于提高浏览器渲染效率。

outline

outline类似border，不同的是border会影响盒模型，而outline不会。

 Example Source Code 

outline-width:数字+单位;
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ;
outline-color: 颜色 ;

可以缩写为：

 Example Source Code 

outline:1px solid red;

同样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。

背景(background)

background是最常用的简写之一，它包含以下属性：

 Example Source Code 

background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;

background的简写可以大大的提高css的效率：

 Example Source Code 

background:#fff url(img.png) no-repeat 0 0;

background的简写也有些默认值：

 Example Source Code 

background:transparent none repeat scroll top left ;

background属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。

字体（font）

font简写也是使用最多的一个，它也是书写高效的CSS的方法之一。

font包含以下属性：

 Example Source Code 

font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";

font的各个属性也都有默认值，记住这些默认值相对来说比较重要：

 Example Source Code 

font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;

事实上，font的简写是这些简写中最需要小心的一个，稍有疏忽就会造成一些意想不到的后果，所以，很多人并不赞成使用font缩写。
不过这里正好有个小手册，相信会让你更好的理解font的简写：

列表样式

可能大家用的最多的一条关于列表的属性就是：

 Example Source Code 

list-style:none

它会清除所有默认的列表样式，比如数字或者圆点。

list-style也有三个属性：

 Example Source Code 

list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman
list-style-position:  inside || outside || inherit
list-style-image:  (url) || none || inherit

list-style的默认属性如下：

 Example Source Code 

list-style:disc outside none

需要注意的是，如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高，比如：

 Example Source Code 

list-style:circle inside url(../img.gif)

这个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

border-radius(圆角半径)

border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

 Example Source Code 

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

是不是你已经看的眼花了？这只是要实现左上角不是圆角，其它三个角都是圆角的情况。所以对于border-radius建议使用缩写：

 Example Source Code 

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;

PS:最新的Safari(4.0.5)还不支持这种缩写..杯具

整理自：http://www.qianduan.net

写出高效整洁的css的13条规则

wo-ai-niqq@163.com(wangchuang) — Fri,02 Jul 2010 09:46:01 +0800

1. 使用Reset但尽可能少使用全局Reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

*{ margin:0; padding:0; }

　这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:

/** 清除内外边距 **/

 Example Source Code 

body, h1, h2, h3, h4, h5, h6, hr, p,  
blockquote, /* structural elements 结构元素 */ 
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 
pre, /* text formatting elements 文本格式元素 */ 
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 
th, td, /* table elements 表格元素 */ 
img/* img elements 图片元素 */{  
border:medium none;  
margin: 0;  
padding: 0;  
}  

/** 设置默认字体 **/

 Example Source Code 

body,button, input, select, textarea {  
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;  
}  
h1, h2, h3, h4, h5, h6 { font-size: 100%; }  
em{font-style:normal;}  

/** 重置列表元素 **/

ul, ol { list-style: none; }

/** 重置超链接元素 **/

a { text-decoration: none; color:#333;}

a:hover { text-decoration: underline; color:#F40; }

/** 重置图片元素 **/

img{ border:0px;}

/** 重置表格元素 **/

table { border-collapse: collapse; border-spacing: 0; }

2.良好的命名和书写习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

.aaabb{margin:2px;color:red;}

　我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：

My name is Wiky

　问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

.red{color:bule;}

　这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}

　这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

　另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如

.alignleft{float:left;margin-right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

　那么对于这样一个段落

我是一个段落！

　如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。

3. 代码缩写

　CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{
    font-family:Arial, Helvetica, sans-serif;

    font-size: 1.2em;

    line-height: 1.4em;

    padding-top:5px;

    padding-bottom:10px;

    padding-left:5px;
}

就可以缩写为：

li{
   font: 1.2em/1.4em Arial, Helvetica, sans-serif;

    padding:5px 0 10px 5px;
}

　如果您想更了解这些属性要怎么缩写，可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 利用CSS继承

　如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; }

#container p{ font-family:Georgia, serif; }

#container h1{font-family:Georgia, serif; }

就可以简写成：

#container{ font-family:Georgia, serif; }

5. 使用多重选择器

　你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

/*------------------------------------

    1. Reset

    2. Header

    3. Content

    4. SideBar

    5. Footer

  ----------------------------------- */

　如此你代码的结构就一目了然，你可以容易的查找和修改代码。

　而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:

/***    Header  ***/

#header{ height:145px; position:relative; }

#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/***    Content ***/

#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}

#content h1{color:#F00}/* 设置字体颜色 */

#content .posts{ overflow:hidden; }

#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3;position:relative;overflow:hidden; }

/***    Footer  ***/

#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}

#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. 给你的CSS代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/

div{

    background-color:#3399cc;

    color:#666;

    font:1.2em/1.4em Arial, Helvetica, sans-serif;

    height:300px;

    margin:10px 5px;

    padding:5px 0 10px 5px;

    width:30%;

    z-index:10;

}

8. 保持CSS的可读性
　　
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/*** 每个样式属性写一行 ***/

div{

    background-color:#3399cc;

    color:#666;

    font: 1.2em/1.4em Arial, Helvetica, sans-serif;

    height:300px;

    margin:10px 5px;

    padding:5px 0 10px 5px;

    width:30%;

    z-index:10;

}

/*** 所有的样式属性写在同一行 ***/

div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/*** 选择器属性少的写在同一行 ***/

div{ background-color:#3399cc; color:#666;}

对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。

9. 选择更优的样式属性值

　CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如

　区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

　同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

10. 使用代替@import

   首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

11. 使用外部样式表

　这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：



   或

而是使用导入外部样式表：

12. 避免使用CSS表达式（Expression）

　CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

　如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

　表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

　如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

13. 代码压缩

　当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得
更快。压缩您的代码，可以采用一些工具，如YUI Compressor
利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

表格的规范和优先级

wo-ai-niqq@163.com(樱花下的吻) — Sun,20 Jun 2010 14:50:31 +0800

（1）如果边框的"border-style"设置为"hidden"，那么它的优先级高于任何其他相冲突的边框。任何边框只要有该设置，其他的边框的设置就都将无效。

（2）如果边框的属性中有"none"，那么它的优秀级是最低的。只有在该边重合的所有元素的边框属性都是"none"时，该边框才会被省略。

（3）如果重合的边框中没有被设置为"hidden"的，并且至少有一个不是"none",那么重合的边框中粗的优先于细的。如果几个边框的"border-width"相同，那么样式的优秀次序由高到低依次为"double">"solid">"dashed">"botted">"ridge">"outset">"groove">"inset".

（4）如果边框样式的其他设置均相同，只是颜色上有区别，那么单元格的样式最优先，然后依次是行、行组、列、列组的样式，最后是表格的样式。不过IE浏览器还没有完全执行上面这个规范的规定，FF执行规范

实现大DIV套小DIV，小DIV随意调整大小，永远居中在大DIV内

wo-ai-niqq@163.com(樱花下的吻) — Sat,05 Jun 2010 22:03:37 +0800

轻松制作CSS圆角

wo-ai-niqq@163.com(樱花下的吻) — Wed,02 Jun 2010 13:51:43 +0800

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

无标题文档

这里是一些文字

ul li导航菜单居中问题

wo-ai-niqq@163.com(woniu) — Fri,28 May 2010 11:13:08 +0800

昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下：

不改变html结构，使导航菜单垂直水平居中，导航宽度自适应屏幕100%，高度30px;单项高度28px,宽80px;
兼容：ie6+,ff,chrome,opera等主流浏览器。
html:

Example Source Code

home

advice

page

people

service

注意：html结构不能变，菜单宽高可定义！

CSS网页布局DIV水平居中的各种方法

wo-ai-niqq@163.com(樱花下的吻) — Fri,21 May 2010 16:34:18 +0800

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

imoker.cn（爱摩客）提供的代码片段：

div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

     单行文字实现垂直居中

现在我们要使这段文字垂直居中显示！

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

完全填充的一种方式而已。可以使用类似下面的代码：

imoker.cn（爱摩客）提供的代码片段：

div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

     多行文字实现垂直居中

现在我们要使这段文字垂直居中显示！   
      div {   
        padding:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
      }

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟，所以我们可以使用这个属性来让

模拟

就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个

元素：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

     多行文字实现垂直居中

现在我们要使这段文字垂直居中显示！    
        div#wrap {    
          height:400px;    
          display:table;    
        }    
        div#content {    
          vertical-align:middle;    
          display:table-cell;    
          border:1px solid #FF0099;    
          background-color:#FFCCFF;    
          width:760px;    
       }

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

imoker.cn（爱摩客）提供的代码片段：

如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

     多行文字实现垂直居中

现在我们要使这段文字垂直居中显示！   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此，一个完美的居中方案就产生了。

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

     多行文字实现垂直居中

现在我们要使这段文字垂直居中显示！   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }

CSS新手学习资源推荐汇总

wo-ai-niqq@163.com(woniu) — Tue,12 Jan 2010 08:50:41 +0800

经常有朋友问我：哪有适合新手的css学习教程，什么样的书适合css新手..等等问题。我也不知道该怎么回答，因为我自己没有系统的学过，网上的系列教程我也从来没有一个是完整的看过，而且自己一直认为没有最好的，只有最适合的，任何东西都是。下面是整理的一些网络资源的地址认为比较适合新手，希望大家能找到适合自己的。

css理论基础：

《WEB2.0标准教程循序渐进12天的基础学习！》 [阿捷]

《CSS基础教程17篇》 [翻译自Htmldog]

《XHTML与CSS入门经典从零开始系列教程!》

《亚当学院》

css布局实例教程：

《DIV+CSS布局入门示例》 [番茄红了]（推荐）

《用css网站布局之十步实录》

《CSS实例教程》

《div+css网页标准版式布局》

css视频教程

《前沿视频教室》

《60课DIV+CSS网站重构及web标准设计视频教程》

css学习推荐书籍

《CSS入门经典(第2版)》 作者:(美)巴特利特（曾经自己就是边看这本书边写—_—）

《CSS网站布局实录》

《网站重构》，《css网站布局实录》，《精通css》，《禅意花园》，《超越css》

[译]Efficient, maintainable CSS

wo-ai-niqq@163.com(woniu) — Sun,03 Jan 2010 08:44:13 +0800

翻译自 Russ Weakley 的 Efficient, maintainable CSS

翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。

源文地址：http://webteam.tencent.com/?p=1605