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

          2007年11月7日

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

          對于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>

          效果:可以實現(xiàn)換行

          2.(Firefox瀏覽器)white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實現(xiàn)方法,只能隱藏或者加滾動條,當(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)容隱藏

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

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

          2007年10月10日

               摘要:   閱讀全文

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

          2007年10月9日

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

               摘要:   閱讀全文

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

          2007年9月21日

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

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

          2007年9月17日

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

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

          2007年9月15日

          原文:CSS Specificity: Things You Should Know

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

          CSS優(yōu)先級特性概述:

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

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

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

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

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

          CSS優(yōu)先級級別:

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

          怎樣測量優(yōu)先級?

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

          來測試下吧

          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)

          實際經(jīng)驗:

          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)編輯 收藏

          2007年9月6日

          我們先來看一段代碼。

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

          按照php手冊里的說法

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

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

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

          <?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);
          }
          ?>

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

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

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

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

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

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

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

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

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

          那是不是flush()在這里就是不可缺少的呢?不是的,我們還有另外一種方法,使得當(dāng)有數(shù)據(jù)輸出的時候,馬上被發(fā)送到瀏覽器。下面這兩段代碼就是不需要使用flush()了。(當(dāng)你把output_buffering設(shè)為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),這個函數(shù)強制每當(dāng)有輸出的時候,即刻把輸出發(fā)送到瀏覽器。這樣就不需要每次輸出(echo)后,都用flush()來發(fā)送到瀏覽器了。

          以上所訴可能在某些瀏覽器中不成立。因為瀏覽器也有自己的規(guī)則。我是用Firefox1.5,IE6,opera8.5來測試的。其中opera就不能正常輸出,因為它有一個規(guī)則,就是不遇到一個HTML標(biāo)簽,就絕對不輸出,除非到腳本結(jié)束。而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 愚人 閱讀(290) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 漳州市| 达日县| 黄骅市| 淮南市| 贵定县| 昌平区| 霍邱县| 禹城市| 黔江区| 新余市| 庆元县| 镇江市| 丰原市| 隆子县| 四会市| 新田县| 旌德县| 米泉市| 曲阜市| 双牌县| 泊头市| 涡阳县| 和顺县| 红原县| 甘德县| 南昌县| 塘沽区| 隆回县| 柯坪县| 威宁| 东光县| 土默特左旗| 庆城县| 台东市| 抚州市| 突泉县| 固始县| 梧州市| 湖南省| 凌云县| 兴安县|