愚人博客

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}eg.<div id="wrap">ddd1111111111111111111111111111111111</div>

效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}或者#wrap{word-break:break-all;width:200px; overflow:auto; }eg.<div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；
eg.

<style>.tb{table-layout:fixed}</style><table class="tbl" width="80"><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap
eg.

<style>.tb {table-layout:fixed}</style><table class="tb" width="80"><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>.tb{table-layout:fixed}</style><table class="tb" width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
eg.

<style>.tb {table-layout:fixed}.td {overflow:hidden;}</style><table class=tb width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

这里单元格宽度一定要用百分比定义

效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）

     摘要:   阅读全文

     摘要:   阅读全文

     摘要:   阅读全文

     摘要:   阅读全文

     摘要:   阅读全文

     摘要: 经常会遇到一个问题——图片自适应，以前的解决方法主要是利用js来实现，其实也可以试试css的expression功能  阅读全文

     摘要: 经常会用到表格来显示数据，需要1px的表格，转了一篇文章，可以借鉴一下～  阅读全文

原文：CSS Specificity: Things You Should Know

如果页面制作的时候遇到定义的CSS不起作用，你可能遇到了CSS优先级的问题。CSS优先级在CSS里算是比较难懂的部分，不同权重的CSS选择器有可能就是你出错的原因，所以作为页面开发人员必须了解CSS优先级特性。

CSS优先级特性概述：

1. 通过优先级计算，让浏览器先解析哪条CSS规则。
2. 优先级特性经常是你定义的CSS规则不起作用的原因，虽然你认为起了作用，然而却不是。
3. 每个选择器都有它的优先级层次。
4. 如果两个规则同时作用于一个元素，优先级高的获胜。
5.优先级特性可以分为四类：inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下这两篇文章， CSS Specificity Wars和CSS Specificity for Poker Players
7.如果选择器有两个等级相同的值，后面的值会覆盖前面的值。
8.如果选择器有等级不同的值，以等级高的算，比如!important。
9.拥有更多优先特性选择器的规则更具有优先特性。
10.后面的规则肯定会覆盖前面相同的规则。
11.内嵌的CSS规则优先级特性最高。
12.CSS文件里，ID的优先级特性最高。
13.想要增加优先级，可以使用ID。
14.class比element级别高。
15.选择器分为四个级别，计算方式 0,0,0,0。
16.推荐一个CSS优先级计算器，CSS Specificity Calculator.。

什么是优先级特性

优先级计算是为了决定浏览器解析哪条规则。“优先级特性的权重关系CSS的显示。”Understanding Specificity （明白优先级特性）。

选择器的优先级特性决定了同一个元素多条规则下哪条规则实施。Selector Specificity （选择器优先级）。

每个选择器都有优先级，两个选择器作用与同一个元素，优先级高的获胜。

CSS优先级级别：

1. Inline styles  内嵌页面的CSS样式，比如<h1 style=”color:#000″></h1>

2.IDs  比如#myid

3.Classes, attributes and pseudo-classes 比如 .classes, [attributes]:hover, :focus

4.Elements and pseudo-elements 比如 div,p,h1,包括:before和:after

怎样测量优先级？

内嵌的为1000，ID为100，Classes, attributes and pseudo-classes为10，Elements and pseudo-elements 为1。

body #content .data img:hover 这里的特性值为 0,1,2,2

下面这张星球大战的图片也许能帮助你记忆：

来测试下吧

1	* { }	0
3	li:first-line { }	2 (one element, one pseudo-element)
5	ul ol+li { }	3 (three elements)
7	ul ol li.red { }	13 (one class, three elements)
9	style=””	1000 (one inline styling)
11	div p { }	2 (two HTML selectors)
13	div p.sith { }	12 (two HTML selectors and a class selector)
15	body #darkside .sith p { }	112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

实际经验：

1. 使用LVHA定义链接，即link-visited-hover-active，参考[Link Specificity]
2. 如果不是为了兼容浏览器，最好不要使用 !important
3. 使用ID让特性更具体，比如a.high写成 ul#blog li a.high

CSS工具与资 英文好的去看下

CSS Specificity for Poker Players
CSS specificity calculator
Understanding Specificity Tutorial
Cascade Inheritance: Specificity
CSS 2.1 Selectors Explained
CSS Specificity Bugs in IE
CSS Structure and Rules
Specificity