偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS布局常見五大問題及解決方案

開發(fā) 前端
CSS布局有很多值得學習的地方,這里和大家分享一下5個CSS布局的常見問題及解決方法,主要包括float的3像素問題,CSS布局的相對定位與絕對定位等內(nèi)容。

 本文和大家重點討論一下CSS布局常見五大問題及解決方案,比如說float的3像素問題,當使用float浮動容器后,在IE6下會產(chǎn)生3px的空隙,所以對布局精度要求高的話,可以在float浮動容器樣式里加針對IE6的屬性”_margin-right”和”*html”。

5個CSS布局的常見問題及解決方法

總結(jié)了5個關于CSS布局的常見問題,并附有解決方法,供參考。

◆float的3像素問題及解決辦法

當使用CSS中float浮動容器后,在IE6下會產(chǎn)生3px的空隙,有意思的是右側(cè)容器沒設置高度時3px在右側(cè)容器內(nèi)部,當設定高度后又跑到容器的左側(cè)了,所以對布局精度要求高的話,可以在float浮動容器樣式里加針對IE6的屬性”_margin-right”和”*html”,如: 

  1. #sidebar{float:left;width:200px;_margin-right:-3px;}  
  2.  

或者 

  1. #sidebar{float:left;width:200px;}  
  2. *html#sidebar{margin-right:-3px;}  
  3.  

◆CSS上邊容器浮動后,下邊的容器跟著浮動,造成頁面錯亂


如圖中布局所示:footer必須要單獨占一行,但當sidebar浮動后,content的高度小于sidebar的高度時,footer也跟著浮動到sidebar右側(cè)了,造成頁面錯亂。解決辦法是在maincontent和footer之間插入一個容器,設置樣式 

  1. clear:both;height:0;font-size:1px;line-height:0px;  
  2.  

用clear:both清除,即可使頁面正常

◆IE6下float浮動導致雙倍邊距的bug

當頁面內(nèi)有多個連續(xù)浮動時,如本頁的圖標列表是采用左浮動,此時設置li的左側(cè)margin值時,在最左側(cè)呈現(xiàn)雙倍情況。如外邊距設置為10px,而左側(cè)則呈現(xiàn)出20px,解決它的方法是在浮動元素上加上display:inline;的樣式,這樣就可避免雙倍邊距bug

◆當子元素浮動且未知高度時,怎么使父容器適應子元素的高度?

這種情況可在父窗口加上overflow:auto;zoom:1;這兩個樣式屬性,overflow:auto;是讓父容器來自適應內(nèi)部容器的高度,zoom:1;是為了兼容IE6而使用的CSS
HACK。zoom:1;通不過W3C的驗證,這也是遺憾的一點,幸好IE支持<!–[ifIE]>這種寫法,可以專門針對IE來寫單獨的樣式,所以可以把這個屬性寫在頁面內(nèi)的<!–[ifIE]>中,這樣應該可以通過驗證了

◆CSS布局的相對定位與絕對定位

規(guī)劃頁面時,許多時候需要用到相對定位或絕對定位,這里邊有個CSS技巧,掌握后有些地方就不用繁冗的js了。就是當父容器使用相對定位后,此時子元素再使用絕對定位,位置是相對于父元素。如果父元素沒有定位,那么子元素的絕對定位是相對于瀏覽器

文章出處:標準之路(http://www.aa25.cn/div_CSS/815.shtml)

【編輯推薦】

  1. CSS HACK和瀏覽器兼容問題的解決方法
  2. CSS屬性選擇器語法詳解
  3. CSS中DIV彈出層問題解決方案
  4. 七大CSS選擇符用法詳解
  5. 探究CSS高級語法中選擇器分組和CSS繼承用法
責任編輯:佚名 來源: aa25.cn
相關推薦

2010-08-30 14:37:58

CSS布局

2022-03-23 13:05:46

IT服務管理CIO

2025-01-09 15:28:30

2017-02-16 16:01:07

人工智能解決方案

2010-08-31 16:09:04

DIV+CSS

2011-02-22 09:34:33

2013-06-13 10:14:41

虛擬機虛擬機遷移

2022-08-30 18:13:38

機器學習

2013-06-13 09:54:21

虛擬機虛擬機遷移

2013-02-28 09:50:39

戴爾問題私有化

2018-12-26 08:00:00

CSS前端

2016-09-12 17:17:06

OpenStack云計算私有云

2012-07-04 10:27:56

虛擬化

2019-10-08 16:05:19

Redis數(shù)據(jù)庫系統(tǒng)

2011-08-16 09:20:57

云計算云管理

2025-02-04 17:40:44

2009-11-02 16:48:45

虛擬機管理

2010-09-01 14:51:12

CSSIEFirefox

2018-05-30 08:10:34

智慧農(nóng)業(yè)物聯(lián)網(wǎng)物聯(lián)網(wǎng)應用

2018-11-12 12:12:15

架構(gòu)師緩存數(shù)據(jù)庫
點贊
收藏

51CTO技術棧公眾號