CSS網頁布局學習之Font-size的妙用
互聯(lián)網 發(fā)布時間:2009-04-02 19:38:25 作者:佚名
我要評論

網頁制作Webjx文章簡介:CSS網頁布局學習之Font-size的妙用.
我在做網站項目的時候通常需要定義一個高度為10px以下的div。代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
CSS網頁布局學習之Font-size的妙用. 我在做網站項目的時候通常需要定義一個高度為10px以下的div。代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定義一個高度為8px,藍色背景的div.在各瀏覽起的實際效果如下:

以前我解決IE6.0下出現的這種問題的方法是 加overflow:hidden
<div style="background:blue; height:8px;overflow:hidden"></div>
因為加overflow:hidden有時候會出現很多問題.
我在網上翻閱了一下資料,造成IE6.0下多出來高度的原因是因為:沒有給div定義字體大小的情況下,默認是font-size;12px. 所以給font-size定義為0就可以解決問題了.
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各瀏覽起的實際效果如下:

相關文章
詳解使用 CSS 的 font-size-adjust 屬性改善網頁排版
本篇文章主要介紹了使用 CSS 的 font-size-adjust 屬性改善網頁排版,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-18知識普及之CSS: body{font-size: 62.5%;}這種寫法的原因
在網頁設計中我們經??匆奲ody{font-size: 62.5%;}這樣的設置,為什么偏偏是62.5%呢?下面腳本之家小編給大家揭曉這個答案,一起了解了解吧2016-05-06- 這篇文章主要介紹了CSS中的font-size屬性使用教程,是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-13
- 這篇文章主要介紹了CSS的font-size屬性及其em值的使用,是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-05
CSS Font-Size: em、px 、pt 、Percent之間的關系及換算
這篇文章主要介紹了CSS Font-Size: em、 px 、pt 、Percent之間的關系及換算,本篇整理的還是比較詳細的,需要的朋友可以參考下2014-05-15- CSS的字體樣式設置相信許多人再熟悉不過,其實字體樣式的設置并不僅僅限于我們平時常用的那幾個屬性,本文為您詳細敘述 font-size 的字體樣式設置的詳細屬性。2009-08-29
css中一些常用的font-size字體單位和line-height詳解
這篇文章主要介紹了css中一些常用的font-size字體單位和line-height的相關知識,給大家提到了px(pixel)像素的一些小知識,本文通過實例代碼相結合給大家介紹的非常詳細,感2020-05-20