posts - 17, comments - 4, trackbacks - 0, articles - 0
            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          大家都知道連續(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)容隱藏,以免影響整體效果)

          posted @ 2007-11-07 13:57 愚人 閱讀(272) | 評(píng)論 (0)編輯 收藏

               摘要:   閱讀全文

          posted @ 2007-10-10 11:02 愚人 閱讀(244) | 評(píng)論 (0)編輯 收藏

               摘要:   閱讀全文

          posted @ 2007-10-09 13:04 愚人 閱讀(220) | 評(píng)論 (0)編輯 收藏

               摘要:   閱讀全文

          posted @ 2007-10-09 12:54 愚人 閱讀(7007) | 評(píng)論 (1)編輯 收藏

               摘要:   閱讀全文

          posted @ 2007-10-09 12:03 愚人 閱讀(834) | 評(píng)論 (0)編輯 收藏

               摘要:   閱讀全文

          posted @ 2007-10-09 11:25 愚人 閱讀(397) | 評(píng)論 (0)編輯 收藏

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

          posted @ 2007-09-21 09:40 愚人 閱讀(901) | 評(píng)論 (1)編輯 收藏

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

          posted @ 2007-09-17 14:33 愚人 閱讀(1398) | 評(píng)論 (0)編輯 收藏

          原文: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 WarsCSS 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)的圖片也許能幫助你記憶:

          CSS Specificity Wars

          來(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

          posted @ 2007-09-15 16:10 愚人 閱讀(372) | 評(píng)論 (0)編輯 收藏

          我們先來(lái)看一段代碼。

          <?php
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          flush();
          sleep(1);
          }
          ?>

          按照php手冊(cè)里的說(shuō)法

          該函數(shù)將當(dāng)前為止程序的所有輸出發(fā)送到用戶(hù)的瀏覽器。

          上面的這段代碼,應(yīng)該隔一秒鐘輸出一次$i。但是實(shí)際中卻不一定是這樣。有可能是等了10秒鐘后,所有的輸出同時(shí)呈現(xiàn)出來(lái)。

          好,我們來(lái)改一下這段代碼,改成

          <?php
          ob_end_clean();//修改部分
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          flush();
          sleep(1);
          }
          ?>

          嘿,加了這一句ob_end_clean();,居然就OK了。實(shí)際上,我們把ob_end_clean()換成ob_end_flush()也一樣OK。

          我再來(lái)改一改。

          <?php
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          ob_flush();//修改部分
          flush();
          sleep(1);
          }
          ?>

          運(yùn)行一下,是不是發(fā)現(xiàn)$i也隔一秒輸出一次了?這是為什么呢?
          別急,我們來(lái)看看php.ini。

          打開(kāi)php.ini,搜索output_buffering,我們會(huì)看到類(lèi)似這樣的設(shè)置 output_buffering = 4096。正如它的名字output_buffering一樣,這個(gè)設(shè)置的作用就是把輸出緩沖一下,緩沖大小為4096bytes.

          在我們的第一段代碼里,之所以沒(méi)有按預(yù)期的輸出,正是因?yàn)檫@個(gè)output_buffering把那些輸出都緩沖了。沒(méi)達(dá)到4096bytes或者腳本結(jié)束,輸出是不會(huì)被發(fā)送出去的。

          而第二段代碼中的ob_end_clean()和ob_end_flush()的作用,就是終止緩沖。這樣就不用等到有4096bytes的緩沖之后才被發(fā)送出去了。

          第三段代碼中,用了一句ob_flush(),它的作用就是把緩沖的數(shù)據(jù)發(fā)送出去,但是并不會(huì)終止緩沖,所以它必須在每次flush()前使用。

          如果不想使用ob_end_clean(),ob_end_flush()和ob_flush(),我們就必須把php.ini里的output_buffering設(shè)得足夠小,例如設(shè)為0。需要注意的是,如果你打算在腳本中使用ini_set(”output_buffering”,”0″)來(lái)設(shè)置,那么請(qǐng)停下來(lái)吧,這種方法是不行的。因?yàn)樵谀_本一開(kāi)始的時(shí)候,緩沖設(shè)置就已經(jīng)被載入,然后緩沖就開(kāi)始了。

          可能你會(huì)問(wèn)了,既然ob_flush()是把緩沖的數(shù)據(jù)發(fā)送出去,那么為什么還需要用flush()???直接用下面這段代碼不行嗎??

          <?php
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          ob_flush();
          sleep(1);
          }
          ?>

          請(qǐng)注意ob_flush()和flush()的區(qū)別。前者是把數(shù)據(jù)從PHP的緩沖中釋放出來(lái),后者是把不在緩沖中的或者說(shuō)是被釋放出來(lái)的數(shù)據(jù)發(fā)送到瀏覽器。所以當(dāng)緩沖存在的時(shí)候,我們必須ob_flush()和flush()同時(shí)使用。

          那是不是flush()在這里就是不可缺少的呢?不是的,我們還有另外一種方法,使得當(dāng)有數(shù)據(jù)輸出的時(shí)候,馬上被發(fā)送到瀏覽器。下面這兩段代碼就是不需要使用flush()了。(當(dāng)你把output_buffering設(shè)為0的時(shí)候,連ob_flush()和ob_end_clean()都不需要了)

          <?php
          ob_implicit_flush(true);
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          ob_flush();
          sleep(1);
          }
          ?>
          <?php
          ob_end_clean();
          ob_implicit_flush(true);
          for ($i=10; $i>0; $i--)
          {
          echo $i;
          sleep(1);
          }
          ?>

          請(qǐng)注意看上面的ob_implicit_flush(true),這個(gè)函數(shù)強(qiáng)制每當(dāng)有輸出的時(shí)候,即刻把輸出發(fā)送到瀏覽器。這樣就不需要每次輸出(echo)后,都用flush()來(lái)發(fā)送到瀏覽器了。

          以上所訴可能在某些瀏覽器中不成立。因?yàn)闉g覽器也有自己的規(guī)則。我是用Firefox1.5,IE6,opera8.5來(lái)測(cè)試的。其中opera就不能正常輸出,因?yàn)樗幸粋€(gè)規(guī)則,就是不遇到一個(gè)HTML標(biāo)簽,就絕對(duì)不輸出,除非到腳本結(jié)束。而FireFox和IE還算比較正常的。

          最后附上一段非常有趣的代碼,作者為PuTTYshell。在一個(gè)腳本周期里,每次輸出,都會(huì)把前一次的輸出覆蓋掉。
          以下代碼只在firefox下可用,其他瀏覽器并不支持multipart/x-mixed-replace的Content-Type.

          <?php
          header('Content-type: multipart/x-mixed-replace;boundary=endofsection');
          print "\n--endofsection\n";
          $pmt = array("-", "\\", "|", "/" );
          for( $i = 0; $i <10; $i ++ ){
          sleep(1);
          print "Content-type: text/plain\n\n";
          print "Part $i\t".$pmt[$i % 4];
          print "--endofsection\n";
          ob_flush();
          flush();
          }
          print "Content-type: text/plain\n\n";
          print "The end\n";
          print "--endofsection--\n";
          ?>

          posted @ 2007-09-06 09:57 愚人 閱讀(290) | 評(píng)論 (0)編輯 收藏

          僅列出標(biāo)題
          共2頁(yè): 1 2 下一頁(yè) 
          主站蜘蛛池模板: 太康县| 孙吴县| 英吉沙县| 多伦县| 崇左市| 临洮县| 望谟县| 九龙县| 犍为县| 泗水县| 怀安县| 福贡县| 肇州县| 凤翔县| 和龙市| 孟连| 和平县| 兴和县| 攀枝花市| 新巴尔虎左旗| 澜沧| 永丰县| 荔浦县| 安西县| 阳城县| 怀集县| 隆子县| 海原县| 太保市| 庄河市| 衡水市| 盐城市| 哈尔滨市| 新建县| 衡山县| 会昌县| 同江市| 靖远县| 遂宁市| 涟水县| 鹤庆县|