愚人博客

大家都知道連續(xù)的英文或數(shù)字能是容器被撐大，不能根據(jù)容器的大小自動(dòng)換行，下面是 CSS如何將他們換行的方法！

對(duì)于div

1.（IE瀏覽器）white-space:normal; word-break:break-all;這里前者是遵循標(biāo)準(zhǔn)。

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

效果：可以實(shí)現(xiàn)換行

2.（Firefox瀏覽器）white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒(méi)有很好的實(shí)現(xiàn)方法，只能隱藏或者加滾動(dòng)條，當(dāng)然不加滾動(dòng)條效果更好！

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

效果：容器正常，內(nèi)容隱藏

對(duì)于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>

效果：兩個(gè)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下還沒(méi)有能使容器內(nèi)容換行的好方法，只能用overflow將多出的內(nèi)容隱藏，以免影響整體效果）

     摘要:   閱讀全文

     摘要:   閱讀全文

     摘要:   閱讀全文

     摘要:   閱讀全文

     摘要:   閱讀全文

     摘要: 經(jīng)常會(huì)遇到一個(gè)問(wèn)題——圖片自適應(yīng)，以前的解決方法主要是利用js來(lái)實(shí)現(xiàn)，其實(shí)也可以試試css的expression功能  閱讀全文

     摘要: 經(jīng)常會(huì)用到表格來(lái)顯示數(shù)據(jù)，需要1px的表格，轉(zhuǎn)了一篇文章，可以借鑒一下～  閱讀全文

原文：CSS Specificity: Things You Should Know

如果頁(yè)面制作的時(shí)候遇到定義的CSS不起作用，你可能遇到了CSS優(yōu)先級(jí)的問(wèn)題。CSS優(yōu)先級(jí)在CSS里算是比較難懂的部分，不同權(quán)重的CSS選擇器有可能就是你出錯(cuò)的原因，所以作為頁(yè)面開(kāi)發(fā)人員必須了解CSS優(yōu)先級(jí)特性。

CSS優(yōu)先級(jí)特性概述：

1. 通過(guò)優(yōu)先級(jí)計(jì)算，讓瀏覽器先解析哪條CSS規(guī)則。
2. 優(yōu)先級(jí)特性經(jīng)常是你定義的CSS規(guī)則不起作用的原因，雖然你認(rèn)為起了作用，然而卻不是。
3. 每個(gè)選擇器都有它的優(yōu)先級(jí)層次。
4. 如果兩個(gè)規(guī)則同時(shí)作用于一個(gè)元素，優(yōu)先級(jí)高的獲勝。
5.優(yōu)先級(jí)特性可以分為四類(lèi)：inline styles, IDs, classes+attributes and elements.
6.英文好的可以看下這兩篇文章， CSS Specificity Wars和CSS Specificity for Poker Players
7.如果選擇器有兩個(gè)等級(jí)相同的值，后面的值會(huì)覆蓋前面的值。
8.如果選擇器有等級(jí)不同的值，以等級(jí)高的算，比如!important。
9.擁有更多優(yōu)先特性選擇器的規(guī)則更具有優(yōu)先特性。
10.后面的規(guī)則肯定會(huì)覆蓋前面相同的規(guī)則。
11.內(nèi)嵌的CSS規(guī)則優(yōu)先級(jí)特性最高。
12.CSS文件里，ID的優(yōu)先級(jí)特性最高。
13.想要增加優(yōu)先級(jí)，可以使用ID。
14.class比element級(jí)別高。
15.選擇器分為四個(gè)級(jí)別，計(jì)算方式 0,0,0,0。
16.推薦一個(gè)CSS優(yōu)先級(jí)計(jì)算器，CSS Specificity Calculator.。

什么是優(yōu)先級(jí)特性

優(yōu)先級(jí)計(jì)算是為了決定瀏覽器解析哪條規(guī)則。“優(yōu)先級(jí)特性的權(quán)重關(guān)系CSS的顯示。”Understanding Specificity （明白優(yōu)先級(jí)特性）。

選擇器的優(yōu)先級(jí)特性決定了同一個(gè)元素多條規(guī)則下哪條規(guī)則實(shí)施。Selector Specificity （選擇器優(yōu)先級(jí)）。

每個(gè)選擇器都有優(yōu)先級(jí)，兩個(gè)選擇器作用與同一個(gè)元素，優(yōu)先級(jí)高的獲勝。

CSS優(yōu)先級(jí)級(jí)別：

1. Inline styles  內(nèi)嵌頁(yè)面的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

怎樣測(cè)量?jī)?yōu)先級(jí)？

內(nèi)嵌的為1000，ID為100，Classes, attributes and pseudo-classes為10，Elements and pseudo-elements 為1。

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

下面這張星球大戰(zhàn)的圖片也許能幫助你記憶：

來(lái)測(cè)試下吧

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)

實(shí)際經(jīng)驗(yàn)：

1. 使用LVHA定義鏈接，即link-visited-hover-active，參考[Link Specificity]
2. 如果不是為了兼容瀏覽器，最好不要使用 !important
3. 使用ID讓特性更具體，比如a.high寫(xiě)成 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