CSS中border和clear兩大屬性用法揭秘
本文向大家描述一下CSS中border和clear屬性的使用，通過border很容易就繪制出一條實線，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁面載入速度變得更快，而對于clear屬性，比如clear:both，表示清除左、右所有的浮動，他們呢都有給的特點和用途，請看下文詳細(xì)介紹。
CSS中border和clear兩大屬性用法揭秘
這一節(jié)里面，主要就是想告訴大家如何使用好border和clear這兩個屬性。
◆首先，如果你曾用過table制作網(wǎng)頁，你就應(yīng)該知道，如果要在表格中繪制一條虛線該如何做，那需要制作一個很小的圖片來填充，其實我們還有更簡單的辦法，只要在<td></td>中加入這么一段就可以了，你可以試試：
- <divstyledivstyle="border-bottom:1pxdashed#ccc"></div>
大家可以再次參考手冊，然后你就能明白dashed、solid、dotted...等的作用，利用它們你可以制作出許多效果來，實線、虛線、雙線、陰影線等等。
- <dividdivid="banner"></div>
以上代碼便可以實現(xiàn)設(shè)計草圖中的banner，在css.css中加入以下樣式：
- #banner{
- background:url(banner.jpg)030pxno-repeat;/*加入背景圖片*/
- width:730px;/*設(shè)定層的寬度*/
- margin:auto;/*層居中*/
- height:240px;/*設(shè)定高度*/
- border-bottom:5pxsolid#EFEFEF;/*畫一條淺灰色實線*/
- clear:both/*清除浮動*/
- }
通過border很容易就繪制出一條實線了，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁面載入速度變得更快。
◆另一個要說明的就是clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性：clear:left/right。在這里添加clear:both是由于之前的ul、li元素設(shè)置了浮動，如果不清除則會影響banner層位置的設(shè)定。
- <dividdivid="pagebody"><!--頁面主體-->
- <dividdivid="sidebar"><!--側(cè)邊欄-->
- </div>
- <dividdivid="mainbody"><!--主體內(nèi)容-->
- </div>
- </div>
以上是頁面主體部分，我們在css.css中添加以下樣式：
- #pagebody{
- width:730px;/*設(shè)定寬度*/
- margin:8pxauto;/*居中*/
- }
- #sidebar{
- width:160px;/*設(shè)定寬度*/
- text-align:left;/*文字左對齊*/
- float:left;/*浮動居左*/
- clear:left;/*不允許左側(cè)存在浮動*/
- overflow:hidden;/*超出寬度部分隱藏*/
- }
- #mainbody{
- width:570px;
- text-align:left;
- float:right;/*浮動居右*/
- clear:right;/*不允許右側(cè)存在浮動*/
- overflow:hidden
- }
為了可以查看到效果，建議在#sidebar和#mainbody中加入以下代碼，預(yù)覽完成后可以刪除這段代碼：
- border:1pxsolid#E00;
- height:200px
保存預(yù)覽效果，可以發(fā)現(xiàn)這兩個層***的浮動，在達(dá)到了我們布局的要求，而兩個層的實際寬度應(yīng)該160+2(border)+570+2=734px，已經(jīng)超出了父層的寬度，由于clear的原因，這兩個層才不會出現(xiàn)錯位的情況，這樣可以使我們布局的頁面不會因為內(nèi)容太長（例如圖片）而導(dǎo)致錯位。
而之后添加的overflow:hidden則可以使內(nèi)容太長（例如圖片）的部份自動被隱藏。通常我們會看到一些網(wǎng)頁在載入時，由于圖片太大，導(dǎo)致布局被撐開，直到頁面下載完成才恢復(fù)正常，通過添加overflow:hidden就可以解決這個問題。
CSS中每一個屬性運用得當(dāng)，就可以解決許多問題，或許它們與你在布局的頁并沒有太大的關(guān)系，但是你必須知道這些屬性的作用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。
【編輯推薦】
- clear屬性在CSS中的妙用
- JavaScript動態(tài)創(chuàng)建div屬性和樣式
- 14大CSS工具提高網(wǎng)頁設(shè)計效率
- 五大CSS3新技術(shù)用法指導(dǎo)
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因
