posts - 17, comments - 4, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          2007年9月6日

          大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 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將多出的內容隱藏,以免影響整體效果)

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要: 經常會遇到一個問題——圖片自適應,以前的解決方法主要是利用js來實現,其實也可以試試css的expression功能  閱讀全文

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

               摘要: 經常會用到表格來顯示數據,需要1px的表格,轉了一篇文章,可以借鑒一下~  閱讀全文

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

          原文: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 WarsCSS 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

          下面這張星球大戰的圖片也許能幫助你記憶:

          CSS Specificity Wars

          來測試下吧

          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

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

          我們先來看一段代碼。

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

          按照php手冊里的說法

          該函數將當前為止程序的所有輸出發送到用戶的瀏覽器。

          上面的這段代碼,應該隔一秒鐘輸出一次$i。但是實際中卻不一定是這樣。有可能是等了10秒鐘后,所有的輸出同時呈現出來。

          好,我們來改一下這段代碼,改成

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

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

          我再來改一改。

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

          運行一下,是不是發現$i也隔一秒輸出一次了?這是為什么呢?
          別急,我們來看看php.ini。

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

          在我們的第一段代碼里,之所以沒有按預期的輸出,正是因為這個output_buffering把那些輸出都緩沖了。沒達到4096bytes或者腳本結束,輸出是不會被發送出去的。

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

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

          如果不想使用ob_end_clean(),ob_end_flush()和ob_flush(),我們就必須把php.ini里的output_buffering設得足夠小,例如設為0。需要注意的是,如果你打算在腳本中使用ini_set(”output_buffering”,”0″)來設置,那么請停下來吧,這種方法是不行的。因為在腳本一開始的時候,緩沖設置就已經被載入,然后緩沖就開始了。

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

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

          請注意ob_flush()和flush()的區別。前者是把數據從PHP的緩沖中釋放出來,后者是把不在緩沖中的或者說是被釋放出來的數據發送到瀏覽器。所以當緩沖存在的時候,我們必須ob_flush()和flush()同時使用。

          那是不是flush()在這里就是不可缺少的呢?不是的,我們還有另外一種方法,使得當有數據輸出的時候,馬上被發送到瀏覽器。下面這兩段代碼就是不需要使用flush()了。(當你把output_buffering設為0的時候,連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);
          }
          ?>

          請注意看上面的ob_implicit_flush(true),這個函數強制每當有輸出的時候,即刻把輸出發送到瀏覽器。這樣就不需要每次輸出(echo)后,都用flush()來發送到瀏覽器了。

          以上所訴可能在某些瀏覽器中不成立。因為瀏覽器也有自己的規則。我是用Firefox1.5,IE6,opera8.5來測試的。其中opera就不能正常輸出,因為它有一個規則,就是不遇到一個HTML標簽,就絕對不輸出,除非到腳本結束。而FireFox和IE還算比較正常的。

          最后附上一段非常有趣的代碼,作者為PuTTYshell。在一個腳本周期里,每次輸出,都會把前一次的輸出覆蓋掉。
          以下代碼只在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 愚人 閱讀(289) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 新蔡县| 井研县| 两当县| 察哈| 达拉特旗| 彭泽县| 哈尔滨市| 伊宁县| 礼泉县| 郑州市| 云霄县| 南陵县| 集安市| 县级市| 吉安市| 威海市| 景泰县| 宜丰县| 三穗县| 澎湖县| 汉川市| 柞水县| 彰化县| 闽侯县| 资阳市| 瓮安县| 温泉县| 乌鲁木齐市| 西吉县| 望奎县| 黑河市| 普陀区| 长宁区| 柳林县| 河东区| 瑞丽市| 禹州市| 古交市| 博客| 盐津县| 襄城县|