★→ASP程序學習群:62655404 微信公眾號開發

CSS關于box(盒模式)的一系列問題詳解

David\s BLOG 2008/6/2 21:17:12 深山行者 字體:  瀏覽 4979

【完整足球指数】欧赔 www.urvgw.com W3C定義的盒模式如下:

width和height定義的是Content部分的寬度和高度,padding border margin的寬度依次加在外面。背景會填充padding和content部分。
但是由于瀏覽器設計上的問題,不同瀏覽器顯示效果會有些不同。
左右Margin加倍的問題
當box為float時,IE6中box左右的margin會加倍

比如:

以下為詳細代碼

 

左面的inner的左面margin明顯大于5px。 這時候,定義inner的display屬性為inline。 外層box自動計算高度的問題 根據W3C定義,沒有float屬性的外層box不會自動計算高度,要計算高度,必須在內層最后一個box加入clear:both。 Opera、netscape、mozilla等不會計算外層box高度,但是微軟ie6會自動計算外層高度。比如:

 

以下為詳細代碼

上面的代碼在ie中有黑色的背景,但是沒有正確的計算上下的margin,在inner2下面加上一個包含clear:both屬性的div后,可以正確計算margin。但是firefox中仍然沒有黑色背景,通常的解決辦法是定義一下clear:both這個div的高度,或者插入全角空格,這樣就必須增加額外的高度。網上一種比較好的解決辦法是在外層div中加入overflow屬性,同時使用clear:both,這樣就不會增加額外的高度了。如下:

 

以下為詳細代碼
因此,外層css要定義overflow屬性,內層最后要加上clear屬性。
居中問題
需要定義元素的寬,并且定義橫向的margin,如果你的布局包含在一個層(容器)中,就象這樣:
你可以這樣定義使它橫向居中:
#wrap { width:760px; /* 修改為你的層的寬度 */ margin:0 auto; }
但是IE5/Win不能正確顯示這個定義,我們采用一個非常有用的技巧來解決:
在外層用text-align屬性。就象這樣:
#outer { text-align:center; } #wrap { width:760px; /* 修改為你的層的寬度 */ margin:0 auto; text-align:left; }
第一個#outer的text-align:center; 規則定義IE5/Win中#outer的所有元素居中(其他瀏覽器只是將文字居中) ,
第二個text-align:left;是將#warp中的文字居左。 因此,在有居中元素的css中,外層css要定義text-align:center屬性,內層居中用margin:x auto x auto定義,并重新定義text-align。
相關閱讀
( 2019/4/16 14:29:04 )asp導出內容到excel表并自定義命名后下載(非打開)
( 2018/4/15 16:01:30 )利用CSS實現半透明效果兼容IE與火狐與chrome等瀏覽器
( 2018/3/20 15:13:15 )asp利用sina提供的ip庫端口來獲得當前IP所有的地區,所在國,所在省,所在市,在線解析json
( 2016/6/16 11:49:35 )access數據庫做的網站出現.ldb不能刪除超過2KB之后就會網站訪問不了數據庫,提示數據庫不存在
( 2015/10/16 19:52:57 )httpd.ini中的RewriteRule、RewriteCond規則了解以有二級域名解析實例
( 2015/9/20 11:01:26 )ASP讀取json并輸出
( 2014/9/19 9:30:20 )介紹JavaScript里比較和邏輯運算符
( 2014/9/15 16:09:32 )利用javascript簡短功能就可以檢查form表單中的元素是否已經填寫
更多信息>>欄目類別選擇
rss學習
個人空間
網站設計
網站公告
下載
photoshop學習
ASP學習
DIV+CSS學習
SEO搜索引擎憂化
java學習
HTML學習
網站信息
網站類信息
更多>>同類信息
利用CSS實現半透明效果兼容IE與火狐與chrome等瀏覽器
在table中tr的display:block在firefox下顯示布局錯亂問題
在未知圖片的寬度與高度時利用div+css將圖片居中
用css做的英文首字母大寫和英文全都大寫通過各個瀏覽器
css優先級的例子
讓DIV固定在瀏覽器窗口的底部(兼容IE6)
MarkMan 馬克鰻,讓設計更有愛 (超級給力的頁面標注工具)
IE8 CSS HACK 兼容
更多>>最新添加文章
asp用BcO將二進制轉八進制然后再OcB將八進制轉二進制
asp用BcH將二進制轉十六進制然后再HcB將十六進制轉二進制
asp用cDec將二進制轉十進制然后再用cBit將十進制轉二進制
做好的網站把http改成https申請SSL域名證書
純asp根據當前日期計算出相應的星座
純asp根據當前日期計算出當前年份的屬相
sql server中前綴為PK、UK、DF、CK、FK表的意思
網站從http改成https(ssl證書)后設置301跳轉將http跳轉到https的方法
更多>>隨機抽取信息
代碼絕對精簡的仿lightbox效果彈出層
經典實用的觸發型導航菜單
靜態頁面在文本框中輸入數字,表格直接算出相應的結果
CSS+ul 實現的柱狀圖
ASP讀取ACCSS數據代碼
一張背景實現自適應九宮格
asp利文本文檔加FSO統計網站訪問量的方法(2)
windows顏色選擇框