善用 css 缩写规则
/* 注意上、右、下、左的书写顺序 */
1. 关于边距（ 4 边）：
1px 2px 3px 4px ( 上、右、下、左 )
1px 2px 3px （省略的左等于右）
1px 2px ( 省略的上等于下 )
1px （四边都相同）
2. 简化所有：
*/ body{margin:0}------------ 表示网页内所有元素的 margin 为 0
#menu{ margin:0}------------ 表示 menu 盒子下的所有元素的 margin 为 0
3. 缩写（ border ）特定样式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. 关于文字的缩写规则：
Font-style:italic; 斜体形式
Font-variant:small-caps/normal; 变体样式：小型大写字母 / 正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
缩写成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意： Font-size 和 Line-height 用斜杠组合在一起不能分开写。
5. 关于背景图片的：
Background:#FFF url(log.gif) no-repeat fixed top left;
6. 关于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
缩写成：
List-style:none inside url(filename.gif);
二、 运用 4 种方法来引入 CSS 样式
1.link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
rel 关系
type 数据类型 , 有多种
href 路径
部分浏览器支持候选样式 , 关键字 :alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
2. 内部样式块
<style>
<!–
h1{color:red;}
– >
</style>
3.@import
@import url{a.css}
注意 : 此指令必须放在 <style> 容器中 , 并且在所有样式之前
建议放在一个 html 注释中 ,<! – – > 浏览器会不显示注释内的内容 , 而 import 等 css 代码能正常工作
4. 内联样式
<p style=”color:red;”>
选择器是 css 的一个基本概念，基本规则如下：
1. 规则结构：
h1 {color:red;}
选择器 { 属性 : 值 ;}
这类是元素选择器，基本可以包括所有 html 的元素
属性值可以包括多个元素，如： border ： 1px solid red;
常用语法
1) 分组：
选择器和声明都可以分组 :
h1,h2,h3{color:red;background:#fff;} , 选择器用“ , ”分割开 , 属性用” ; ”分割
2) 类选择器 , 即通过 class= ” stylename ”应用的声明
定义 :
.stylename{color:red;}
注意 :
在 html 中可以使用多类选择 : 如 class= ” cn1 cn2 cn3 ″
3)ID 选择器 , 即与 id 属性对应的样式
定义 :
#a{color:red;} -> 这个定义对用 id= ” a ”的元素
2. 这部分都是我们常见的 css 语法，下面谈一下我们不常见的选择器语法
1) 父子结构 , 跟文档结构图对应
如 p span{border:1px solid red;} 对应的是 <p> 下面的 <li> 标签 , 这个很用用途 , 可以准确定位 .
一些特殊应用 (IE7 支持 ):
(1) p > span{}, 匹配所有 p 下所有的 span
(2) p + span{} , 匹配紧接着 p 元素后出现的第一个 span 标签 ,2 者要有相同的父标签
2) 属性选择器 :( 注意 : 属性选择器 ie7 才开始支持 , 以下版本并不支持 , 其他的浏览器基本可以 )
语法 :img[alt]{border:1px solid;}
表示对应有 alt 属性的 img 标签 , 当然可以支持多个属性对应 , 如 img[alt][title]{}; 表示这个 2 个属性都有的 img 标签 , 也可以与具体值对应 : 如 :img[alt= ”摄影” ]{};
属性选择器中的高级应用 , 特殊匹配 :
(1)img[class~= ” b ” ], ~= : 与属性中的一个值对应的 , 即与 <img class= ” a b c ” > 对应
(2)[class^= ” a ” ], 以 a 开头的
(3)[class$= ” a ” ], 以 a 结束的
(4)[class*= ” a ” ], 包含 a 的
(5)[class|= ” a ” ], 等于 a 或以 a 开头的
3) 伪类和伪元素
日常使用中主要是 <a> 标签的几个伪类 :link:hover:active:visited
以及 :first-child:first:before:left:right:lang:focus:fist-line 等等
注意 : 动态伪类可以应用到任何元素 , 如 ,input:focus{background:red;} 当 input 标签获得焦点时背景变红
以上语法组合使用 , 就能实现定位准确、简单间接的样式了。
三、 选择器分类整合
优先级别遵循：行内样式 >ID > Class > 标记
基本选择器
标记选择器（ eg:<p></p> ）
类别选择器 (eg:class)
ID 选择器
复合选择器
“交集”复合选择器 (eg:p.menu{color:red}) 必须是标记 + 类别 /ID 组合
“并集”复合选择器 (eg:h1,h2,h3{color:red})
“后代”复合选择器 (eg: #menu .menulist{ ... })
“子” 复合选择器 (eg: #menu .menulist .selectit { ... })
四、 使用子选择器减少 id 和 class 的定义
示例结构：
<div id="menu">
<div class="menulist">
<div class="selectit">content</div>
</div>
</div>
示例 CSS ：
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
五、 使用组选择器为不同元素应用相同的样式
如 h1,h2,h3,div{font-size:16px;font-weight:bold}
则 h1,h2,h3,div 元素的样式都为字体 16 像素，字体粗体
六、 伪类和选择符的配合使用
将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上：
<a class="red" href="..."> 这是第一组链接 </a>
<a class="blue" href="..."> 这是第二组链接 </a>
七、 CSS 的最近优先原则
/* 如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他 行内样式 >ID > Class > 标记 */
以下是引用片段：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p> 此处显示为红色 </p>
<p class="blue"> 此处显示为蓝色 </p>
<p class="blue" style="color:green"> 此处显示为绿色 </p>
<p class="blue yellow"> 此处显示为黄色 </p>
注意：
（ 1 ）注意样式的几个优先顺序 ( 优先级由上至下递减，下面的样式覆盖上面的样式 ) ：
-- 元素 style 设定
--head 区 <style></style> 中的设定
-- 外部引用 css 文件
（ 2 ）优先级不是按访问顺序来设定的，而是又 css 中的声明顺序来设的。
如上例中 <p class="yellow blue"> 此处显示为黄色 </p> 也显示为黄色，因为在 css 定义中 .yellow 在 .blue 的后面。
八、 书写正确的链接样式
当用 css 定义链接的各种状态时，要注意书写的顺序即： :link :visited :hover :active 利用首字母： L V H A ，你可以通过记忆 LoVe,Hate, 两个单词来记住其顺序。
:link -------- 链接的颜色
:visited ----- 鼠标点击后的颜色
:hover ------- 鼠标放上去未点的颜色（悬停）
:active------- 鼠标点击瞬间的颜色
九、 :hover 的灵活运用
IE6 不支持除 a 标签以外的 :hover 属性，我们了解 :hover 属性是鼠标悬停效果。在 IE7 和 FF 中，对几乎任意元素都可以设置 :hover 属性效果。这对我们做不同的访问效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
---------------- 此效果针对 IE7 和 FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
----------------- 此效果针对 IE6
十、 定义 A 标签要注意的小问题
当我们定义 a{color:red;} 时，它代表了 A 的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义 a:hover 就可以了，其它三种状态就是 A 中所定义的样式。
只定义了一个 a:link 时，一定要记得把其它三种状态定义出来！
十一、 禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些 css 属性来达到这些要求。
禁止换行： white-space:nowrap
强制换行： word-break: break-all; white-space: normal;
十二、 区别 relative 和 absolute
Absolute---CSS 中的写法是： position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合 TOP 、 RIGHT 、 BOTTOM 、 LEFT( 下面简称 TRBL) 进行定位，在没有设定 TRBL ，默认依据父级的做标原始点为原始点。如果设定 TRBL 并且父级没有设定 position 属性，那么当前的 absolute 则以浏览器左上角为原始点进行定位，位置将由 TRBL 决定。
Relative---CSS 中的写法是： position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以 BODY 的原始点为原始点，配合 TRBL 进行定位，当父级内有 padding 等 CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位。
十三、 区别块级元素 block 和内联元素 inline
块级 --- 可定义宽高，另起独占一行 （如： div ul ）
内联 --- 不可定义宽高，如文本元素 （如 a span ）
十四、 区别 display 和 visibility
display:none 和 visibility:hidden 都可以隐藏一个元素 , 但 visibility:hidden 只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而 display:none 则相当把元素从页面中去除，其占用位置也将被删除。
十五、 背景 background 的一些语法
background-image:url( 背景图案 .jpg,gif,bmp);
background-color:#FFFFFF; （背景颜色）
background-color : transparent; <-- 设定背景为透明色 – >
background-repeat 改变背景图片的重复并排的设定
说明
repeat 背景图片并排
repeat-x 背景图片以 X 方向 并排
repeat-y 背景图片以 Y 方向 并排
no-repeat 背景图片不 以并排的方式处理
background-attachment 是否固定图片位置
说明
scroll 拉动卷轴时，背景图片会跟着移动（缺省值）
fixed 拉动卷轴时，背景图片不会跟着移动
以长度定位 background-position: x y
使用百分比定位 background-position: x% y%
说明
x% 往右移
y% 往下移
backgroud-position: 0% 0%; 左边上方
backgroud-position: 0% 50%; 左边中间
backgroud-position: 50% 0%; 中间上方
backgroud-position: 50% 50%; 正中间
backgroud-position:100% 0%; 右边上方
backgroud-position: 0% 100%; 左边下方
backgroud-position: 100% 50%; 右边中间
backgroud-position: 50% 100%; 中间下方
backgroud-position: 100% 100%; 右边下方
以关键字定位
关键字 说明
top 上 ( y = 0 )
center 中 ( x = 50, y = 50 )
bottom 下 ( y = 100 )
left 左 ( x= 0 )
Exp:
background-position:center;
图片在指定背景中央 X=50% Y=50% 位置
background-position: 200px 30px
十六、 注释的写法
在 Html 中：
<-- footer -->
content
<-- end footer -->
在 CSS 中：
/* ---------- header ----------------- */
style
十七、 CSS 的命名规范
1. id 的命名
(1) 页面结构
容器 : container
页头： header
内容： content/container
页面主体： main
页尾： footer
导航： nav
侧栏： sidebar
栏目： column
页面外围控制整体布局宽度： wrapper
左右中： left right center
(2) 导航
导航： nav
主导航： mainnav
子导航： subnav
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
菜单： menu
子菜单： submenu
标题 : title
摘要 : summary
(3) 功能
标志： logo
广告： banner
登陆： login
登录条： loginbar
注册： regsiter
搜索： search
功能区： shop
标题： title
加入： joinus
状态： status
按钮： btn
滚动： scroll
标签页： tab
文章列表： list
提示信息： msg
当前的 : current
小技巧： tips
图标 : icon
注释： note
指南： guild
服务： service
热点： hot
新闻： news
下载： download
投票： vote
合作伙伴： partner
友情链接： link
版权： copyright
2. class 的命名
(1) 颜色 : 使用颜色的名称或者 16 进制代码 , 如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字体大小 , 直接使用 "font+ 字体大小 " 作为名称 , 如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3) 对齐样式 , 使用对齐目标的英文名称 , 如
.left { float:left; }
.bottom { float:bottom; }
(4) 标题栏样式 , 使用 " 类别 + 功能 " 的方式命名 , 如
.barnews { }
.barproduct { }
注意事项 ::
u 一律小写 ;
u 尽量用英文 ;
u 不加中杠和下划线 ;
u 2 个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（ eg:mainContent ）；
u 尽量不缩写，除非一看就明白的单词 .
3. 主要的站点 css 文件
主要的 master.css
模块 module.css
基本共用 base.css （ root.css ）
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
十八、 Padding 影响宽度问题
如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的 margin 属性吧，而不要去定义位于外面的标签的 padding
十九、 完美的单象素外框线表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、 如果文字过长 , 则将过长的部分变成省略号显示
<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>
二十一、 并不是所有样式都要简写
当样式表前定义了如 p{padding:1px 2px 3px 4px} 时，在后续工程中又增加了一个样式上补白 5px ，下补白 6px 。我们并不一定要写成 p.style1{padding:5px 6px 3px 4px} 。可以写成 p.style1{padding-top:5px;padding-right:6px;}, 你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式 P 变了话，你定义的 p.style1 的样式也要变。 ( 此种方法对后期修改样式很重要 )
二十二、 几个常用到的 CSS 细节处理上的样式
1 ）中文字两端对齐： text-align:justify;text-justify:inter-ideograph;
2 ）固定宽度汉字截断： overflow:hidden;text-overflow:ellipsis;white-space:nowrap;( 不让其换行，不过只能处理文字在一行上的截断，不能处理多行。 ) （ IE5 以上） FF 不能，它只隐藏。
*** 万能强制换行： white-space:normal;word-break:break-all;
禁止换行： white-space:nowrap
强制换行： word-wrap: break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all; 方法一 必须 */
/*word-wrap:break-word;overflow:hidden; 方法二 */
/*word-wrap:break-word; word-break: normal; 方法三 */
word-wrap:break-word; word-break:break-all;
}
.NoNewline
{
/*word-break: keep-all; 方法一 必须 */
white-space:nowrap;
}
3 ）固定宽度汉字（词）折行 ： table-layout:fixed; word-break:break-all; （ IE5 以上） FF 不能。
4 ） <acronym title= ”输入要提示的文字” style= ” cursor:help; ” > 文字 </acronym> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5 ）图片设为半透明： .halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} 在 IE6 及 IE5 测试通过， FF 未通过，这是因为这个样式是 IE 私有的东西；
6 ） FLASH 透明 ：选中 swf, 打开原代码窗口，在 </object> 前输入 <param name= ” wmode ” value= ” transparent ” > 以上是针对 IE 的代码。
针对 FIREFOX 给 <embed> 标签也增加类似参数 wmode= ” transparent ”
7 ）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8 ）层在浏览器中居中对齐问题
body { text-align: center }
#content { text-align: left; width: 700px; margin: 0 auto }
9) 单行内容在层中垂直对齐问题
# content{height:19px; line-height:19px; } 缺点是要内容不要换行。
10 ）层在浏览器中垂直居中对齐问题
缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下
其实解决的思路是这样的：首们需要 position:absolute; 绝对定位。而层的定位，使用外补丁 margin 负值的方法。负值的大小为层自身宽度高度除以 2 。
如：一个层宽度是 400 ，高度是 300 。使用绝对定位距离上部与左部都设置成 50% 。而 margin-top 的值为－ 150 。 margin-left 的值为－ 200 。这样我们就实现了层垂直居中于浏览器的样式编写。
请看实例代码：
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}
11 ） CSS 控制图片自适应大小
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
二十三、 使用 float 属性的元素要注意的问题
1. 利用 border 属性确定出错元素的布局特性
使用 float 属性布局一不小心就会出错。这时为元素添加 border 属性确定元素边界，错误原因即水落石出。
2. float 元素的父元素不能指定 clear 属性
MacIE 下如果对 float 的元素的父元素使用 clear 属性，周围的 float 元素布局就会混乱。这是 MacIE 的著名的 bug ，倘若不知道就会走弯路。
3. float 元素务必指定 width 属性
很多浏览器在显示未指定 width 的 float 元素时会有 bug 。所以不管 float 元素的内容如何，一定要为其指定 width 属性。
另外指定元素时尽量使用 em 而不是 px 做单位。
4. float 元素不能指定 margin 和 padding 等属性
IE 在显示指定了 margin 和 padding 的 float 元素时有 bug 。因此不要对 float 元素指定 margin 和 padding 属性 ( 可以在 float 元素内部嵌套一个 div 来设置 margin 和 padding) 。也可以使用 hack 方法为 IE 指定特别的值。
5. float 元素的宽度之和要小于 100%
如果 float 元素的宽度之和正好是 100% ，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于 99% 。
二十四、 浏览器的兼容性问题（针对 FF/IE6/IE7 ）
1.CSS hack: 区分 IE6 ， IE7 ， firefox
区别 FF ， IE7 ， IE6 ：
background:green !important; background:orange; *background:blue;
IE6 能识别 * ，但不能识别 !important,
IE7 能识别 * ，也能识别 !important;
FF 不能识别 * ，但能识别 !important;
另外再补充一个，下划线” _ “ ,
IE6 支持下划线， IE7 和 firefox 均不支持下划线。
于是大家还可以这样来区分 firefox ， IE7 ， IE6
background:green!important; *background:orange; _background:blue;
注：不管是什么方法，书写的顺序都是 firefox 的写在前面， IE7 的写在中间， IE6 的写在最后面。
2. 在 firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法
div{margin:30px!important;margin:28px;}
注意这两个 margin 的顺序一定不能写反， !important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;
3. 条件性注释来选择不同的浏览器（比 CSS hack 简洁）
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
4. 区分 IE8
.color{
background-color: #CC00FF; /* 所有浏览器都会显示为紫色 */
background-color: #FF0000/9; /*IE6 、 IE7 、 IE8 会显示红色 */
*background-color: #0066FF; /*IE6 、 IE7 会变为蓝色 */
_background-color: #009933; /*IE6 会变为绿色 */
二十五、 W3C 遵循的标准原则
1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody> 标记，以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记 。
4. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上 width 和 height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img> 附上 width 和 height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 <br> 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。
9. 中英文混排时，我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。
10. 行距建议用百分比来定义，常用的两个行距的值是 line-height:120%/150%.
11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样： <a href= ” aboutus/index.htm ” > 而应该这样： <a href= ” aboutus/ ” >
12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。
13. “网页大小”定义为网页的所有文件大小的总和，包括 HTML 文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在 34K 以下为合适。
14. float 元素务必指定 width 属性
很多浏览器在显示未指定 width 的 float 元素时会有 bug 。所以不管 float 元素的内容如何，一定要为其指定 width 属性。
另外指定元素时尽量使用 em 而不是 px 做单位。
15. float 元素不能指定 margin 和 padding 等属性
IE 在显示指定了 margin 和 padding 的 float 元素时有 bug 。因此不要对 float 元素指定 margin 和 padding 属性（可以在 float 元素内部嵌套一个 div 来设置 margin 和 padding ）。也可以使用 hack 方法为 IE 指定特别的值。
16. float 元素的宽度之和要小于 100%
如果 float 元素的宽度之和正好是 100% ，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于 99% 。
二十六、 列表元素 ul ol li dl dt dd 释义
<ul>
<li> 内容 1</li>
<li> 内容 2</li>
</ul>
<dl>
<dt> 标题 <dt>
<dd> 内容描述 1</dd>
<dd> 内容描述 2</dd>
</dl>
l dt 和 dd 中可以再加入 ol ul li 和 p
二十七、 清除浮动
clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的 HACK 来对父级做一次定义，那么就可以解决这个问题 。
.clearfix {
display:inline-block;
}
/* Hides from IE-mac /*/
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */
** 这种用法在进行图文混排时比较多，但是不太好控制，用 margin 配合 clear{clear:both} 直接来控制。
二十八、 文字的处理
1. 一般的字体：
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, " 宋体 ",sans-serif;
标题字体（ h1/h2 ）： font-family: Cambria, Georgia, "Times New Roman", Times, serif;
2. 首字下沉：
P:first-letter{padding:10px,fontsize:32pt;float:left}
3. 拼音汉字：
<ruby> 布鲁斯狼 <rt style="font-size: 11px;">bu lu si lang</rt></ruby>
二十九、 Min-height 多浏览器兼容问题
Div{
min-height:450px;
height:auto!important;
height:450px;
overflow:visible;????
}
三十、 CSS 布局口诀 - CSS BUG 顺口溜
· IE 边框若显若无，须注意，定是高度设置已忘记；
· 浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
· 三像素文本慢移不必慌，高度设置帮你忙；
· 兼容各个浏览须注意，默认设置行高可能是杀手；
· 独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
· 学布局须思路，路随布局原理自然直，轻松驾驭 html ，流水布局少 hack ，代码清爽，兼容好，友好引擎喜欢迎。
· 所有标签皆有源，只是默认各不同， span 是无极，无极生两仪—内联和块级， img 较特殊，但也遵法理，其他只是改造各不同，一个 * 号全归原，层叠样式理须多练习，万物皆规律。
· 图片链接排版须小心，图片链接文字链接若对齐， padding 和 vertical-align:middle 要设定，虽差微细倒无妨。
· IE 浮动双边距，请用 display ： inline 拘。
· 列表横向排版，列表代码须紧靠，空隙自消须铭记。
三十一、 Web 中的字体应用
总结几套实用而简单的 font-family
font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字体。推荐使用在 13px 以上的环境。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana 系的宽扁字体。推荐在 11px 以下环境使用。
font-family: Geogia, Times New Roman, Times, serif;
衬线字体的不二之选。 多用于大号的标题字体 16px 以上。
font-family: Lucida Console, Monaco, Courier New, mono, monospace;
一系列等宽字体。写代码很好用。另外，如果觉得 Lucida Console 太宽的话，可以换成比较的 Lucida Sans Typewriter 。话说老赵 blog 上的代码块使用的就是 Lucida Sans Typewriter 哟 ~
如果在 div 的 style 中把 visibility 设为 hidden 则 div 隐藏，但是它会占据空白空间，而如果设置成 display ： none 则不占据空白空间；
而 visible="false" 则 div 不返回在 html 中；
详细出处参考： http://jb51.net/css/22620.html
