国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS教程:“自動定位”的應用

2024-07-11 09:03:48
字體:
來源:轉載
供稿:網友

武林網(www.survivalescaperooms.com)文章簡介:在使用css創建類似title屬性提示框,常見的方法是使用絕對定位,用負值使其偏移于屏幕之外,在鼠標經過時定義一個合適的正值使其顯示到我們所需要的位置。但是,有一個我們不常用的屬性我們常常將其擱置一旁而未加利用--auto.

在使用css創建類似title屬性提示框,常見的方法是使用絕對定位,用負值使其偏移于屏幕之外,在鼠標經過時定義一個合適的正值使其顯示到我們所需要的位置。但是,有一個我們不常用的屬性我們常常將其擱置一旁而未加利用--”auto”。《Auto Positioning for Absolute Elements 》這篇文章詳細介紹了該屬性的使用方法,本人曾翻譯了此文--《絕對定位元素的自動定位》,但文章太長,不甚直觀,本文通過對比兩種創建提示框的方法來介紹該屬性的使用方法。

一、常規方法

看下面的html結果,我們讓.test相對定位,確定其內部span標簽的定為基點,在鼠標經過時,定義span標簽的left為0。

1.<div class="box">常見的實現消息提示框的方法,是讓父元素相對定位,消息內容絕對定位。默認狀態讓其隱藏于屏幕之外,鼠標經過時定義一個正值使其顯示在我們需要的位置。看看這個<a class="test" href="#">消息提示框<span>鼠標經過時我會出現</span></a>。你可以看到,鼠標經過時,消息框會出現在鼠標的位置。</div>

01..test{

02.   position:relative;

03.   display:inline-block;//使其在IE8中正常顯示;  color:#fff;

04.}

05..test span{

06.   position:absolute;

07.   top:15px;

08.   left:-999em;

09.   border:1px soid #6c3;

10.   background-color:#F60;

11.}

12..test:hover{

13.   background:#fff;/修復IE中的bug,這里是為了測試,如果不需要顏色,可以使用一張1×1px大小的透明圖片來代替。/

14.   color:#00f;

15.}

16..test:hover span{

17.   left:0;

18.}

注意在鼠標經過時,我們定義了背景顏色,這時為了修復 IE中特有的bug,關于bug這里不做太多描述,讀者可參考相關資料。常見的方法在IE6、IE7中工作良好,但在IE8中看起來很古怪,如果給.test定義一個display:inline-block屬性,它將顯示良好。IE6與IE7、IE8、FF、chrome顯示略有不同,IE6中span標簽里的內容自動擴展,而在IE7、IE8、FF、chrome中,其寬度與文本“消息提示框”等寬,超過的換行顯示。

二、使用“自動定位”

使用“自動定位”,對于.test我們不需要使用定位屬性,對于其內部標簽span,去掉top屬性,保留left屬性,在鼠標經過時,讓span標簽的left屬性為auto。這看起來不可思議,但的確工作良好。span標簽絕對定位后,它保留了在文本流中的正常位置,它是它在一個新的層上。css如下:

01..test-auto{

02.   color:#fff;

03.}

04..test-auto span{

05.   position:absolute;

06.   left:-999em;

07.   border:1px soid #6c3;

08.   background-color:#F60;

09.   text-decoration:none;

10.}

11..test-auto:hover{

12.   background:#fff;

13.   color:#00f;

14.}

15..test-auto:hover span{

16.   left:auto;

17.}

現在,使用自動定位可以實現彈出消息提示框。但是,除了上面提及的那個bug外,還有幾個bug需要注意。

  • span標簽定義display:block時,在FF和IE下顯示有差別。

    當我們給.test-auto span增加display:block時。你可以看到,鼠標經過時,在FF中消息框另起一行(這是使用該屬性正常的效果)。但在IE6、IE7中查看,我們看到它仍在原來的位置之上。

  • span標簽定義font-style:italic;時,在IE7中出現滾動條。

    可以看到,鼠標經過時,在FF和IE6中消息框出現,沒有任何異常。但在IE7中查看,我們看到水平滾動條出現了。這似乎就是IE中的italics bug。對于該bug,給其定義overflow:hidden,鼠標經過時,滾動條將會消失。

  • 另外,在 chrome中查看,鼠標經過時,消息框并沒有出現在鼠標經過的位置,而是出緊靠父元素的左側,真奇怪!!

    三、“自動定位”的應用

    自動定位有哪些用途呢?但我們在頁面的相關文本插入絕對定位圖像時,我們可以使其top和bottom屬性為“auto”,然后定義left或者right屬性值,那么其垂直位置就由文本流來控制,水平位置有left或者right的長度值來決定。

    四、總結

    “自動定位”使我們不常用的一個屬性,相信看完本文你對自動定位有一個很深的理解。本篇文章簡要的介紹了“自動定位”的應用,如果你想進一步定位提示框出現的位置,請參考我翻譯的另外另外一篇文章--《邊距和絕對定位》,希望能對你有所啟發。

    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表
    主站蜘蛛池模板: 资中县| 涞水县| 珠海市| 大宁县| 定日县| 威远县| 冕宁县| 水城县| 宕昌县| 驻马店市| 灌云县| 长沙市| 丘北县| 香港 | 唐河县| 工布江达县| 赤水市| 兖州市| 奉节县| 福泉市| 陕西省| 宝兴县| 邵东县| 台州市| 迁安市| 丰县| 石渠县| 天等县| 若羌县| 云和县| 旌德县| 横山县| 仲巴县| 灵山县| 叙永县| 齐河县| 宁南县| 富川| 得荣县| 台南县| 赣州市|