成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

解析什么是絕對(duì)定位，相對(duì)定位與浮動(dòng)

wawor4827 / 2473人閱讀

摘要：注意，絕對(duì)定位使元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。相對(duì)定位相對(duì)定位，元素相對(duì)于它自己原來(lái)的位置進(jìn)行移動(dòng)。

在理解定位之前，先說(shuō)一個(gè)概念，文檔普通流，就是元素標(biāo)簽正常在HTML里的順序，塊級(jí)元素從上至下排列，行內(nèi)元素從左到右排列。

絕對(duì)定位

絕對(duì)定位：absolute，元素相對(duì)于離它最近的已定位祖先元素進(jìn)行移動(dòng)，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊（一般是HTML元素，也可能是畫布，這是由用戶的代理決定的）。注意，絕對(duì)定位使元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。

如下圖是正常放置的三個(gè)div，

如果將div2設(shè)置為絕對(duì)定位，會(huì)發(fā)現(xiàn)它會(huì)相對(duì)于HTML定位，因?yàn)闆]有已經(jīng)定位的祖先元素，且原來(lái)的位置被div3補(bǔ)上了。

相對(duì)定位

相對(duì)定位：relative，元素相對(duì)于它自己原來(lái)的位置進(jìn)行移動(dòng)。注意，相對(duì)定位使元素仍然占據(jù)原來(lái)的位置。

如下圖，如果將div2設(shè)置為相對(duì)定位，它會(huì)相對(duì)自己原來(lái)的位置移動(dòng)，且會(huì)發(fā)現(xiàn)它原來(lái)的位置仍然占據(jù)著

?

?

浮動(dòng)

浮動(dòng)：float，浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含的元素邊框或另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。注意，浮?dòng)的元素不在文檔的普通流中，所以文檔的普通流的其他元素表現(xiàn)得就像浮動(dòng)元素不存在一樣。

如下圖，將第二個(gè)div設(shè)置為float:right，它會(huì)跑到文檔的右邊

? ? ? ??

如果將div2設(shè)置為float:left，它會(huì)到文檔的左邊，也就是位置不變，并且脫離文檔流，div3補(bǔ)上來(lái)，但我們會(huì)發(fā)現(xiàn)文字還是原處，這就是浮動(dòng)和絕對(duì)定位的區(qū)別了。浮動(dòng)會(huì)以某種方式將浮動(dòng)元素從文檔的正常流中刪除，并把元素向左或向右浮動(dòng)，該元素還是會(huì)影響布局，如果將div2浮動(dòng)，div3確實(shí)占據(jù)了div2的位置，所以說(shuō)浮動(dòng)元素脫離了文檔流，但div3中的文字沒跟上來(lái)，這是為了避免div2將div3里的文字覆蓋了，這就是浮動(dòng)的目的，所以說(shuō)浮動(dòng)元素影響了布局；而絕對(duì)定位是將元素徹底從文檔流刪除，該元素再也不會(huì)影響其他元素的布局了，如果對(duì)div2絕對(duì)定位的，div3包括文字都會(huì)補(bǔ)上來(lái)被div2覆蓋。

?

由于浮動(dòng)會(huì)使元素脫離正常的文檔流，所以無(wú)法撐開父級(jí)元素（父級(jí)元素沒設(shè)置高度），導(dǎo)致父級(jí)元素在視覺上沒包圍浮動(dòng)元素（高度塌陷），所以我們要清除浮動(dòng)，通常是兩類，一是利用clear屬性，二是觸發(fā)浮動(dòng)元素的父元素的BFC（塊級(jí)格式化上下文）

看下面例子，外層div沒有被撐開

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠標(biāo)劃過更改圖片路徑title>
head>
<body>
    <div id="wrapper" style="border:1px solid red;">
        <div style="float:left;width:50px;height:50px;background:black;">div>
    div>
body>
html>

解決辦法如下：

1.給父級(jí)元素設(shè)置高度，但一般寫頁(yè)面高度都是不固定的。
#wrapper{
    height:100px;
}
2.給父級(jí)元素設(shè)置overflow:hidden或overflow:auto,zoom:1是為了瀏覽器的兼容性（IE大家都懂的），這種方法要注意溢出的元素。
#wrapper{
    overflow:hidden;
    zoom:1;
}
3.給父級(jí)設(shè)置浮動(dòng)，這種方法適用于本來(lái)父級(jí)就需要浮動(dòng)的，如果父級(jí)不需要浮動(dòng)，影響布局，還是沒解決根本問題。
#wrapper{
    float:left;
}
4.在浮動(dòng)元素后面加個(gè)空元素,clear:both，這種方法加了無(wú)用的html元素，代碼不夠簡(jiǎn)潔，后期維護(hù)不便
<div id="clear">div>
#clear{
    clear:both;
}
5.利用父級(jí)的偽元素:after,推薦使用，兼容性好，萬(wàn)能方法。
#wrapper:after{
        content: "";如果有內(nèi)容就寫，沒有就空，
        display: block;或者display:inline-block;
        clear: both;
        這三項(xiàng)是必須條件，其他都是可選項(xiàng)，視情況而定
    }
#wrapper{
        zoom:1;兼容IE
    }

在網(wǎng)頁(yè)主要布局時(shí):after偽元素方法應(yīng)該為常用清理浮動(dòng)方式；在小模塊如ul里使用overflow:hidden;（留意可能產(chǎn)生的隱藏溢出元素問題）；如果本身就是浮動(dòng)元素則可自動(dòng)清除內(nèi)部浮動(dòng)，無(wú)需格外處理；正文中使用鄰接元素清理之前的浮動(dòng)。最后可以使用相對(duì)完美的:after偽元素方法清理浮動(dòng)。

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1707.html

相關(guān)文章

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來(lái)解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來(lái)是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語(yǔ)法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

    chanthuang 評(píng)論0 收藏0

  • 容易忽略的七個(gè)CSS知識(shí)點(diǎn)

    摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來(lái)解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。 如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來(lái)是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語(yǔ)法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。 你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)...

    elina 評(píng)論0 收藏0

  • 前端入門4-CSS屬性樣式表

    摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規(guī)則層疊算法等之后，那么該來(lái)學(xué)習(xí)的也就是都支持哪些屬性樣式表了。 本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個(gè)來(lái)源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個(gè)前端小白，入...

    hss01248 評(píng)論0 收藏0

  • css基礎(chǔ)

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間；vi...

    JinB 評(píng)論0 收藏0

  • 前端面試題 -- HTML+CSS

    摘要：內(nèi)核原為，現(xiàn)為內(nèi)核，等。但盒子的大小由這幾部分決定是一個(gè)屬性，與盒子模型有著密切聯(lián)系。 前言 貌似又到了一年一度跑路跳槽的時(shí)刻，由于個(gè)人的一些原因最近也參加了很多面試，發(fā)現(xiàn)有很多基礎(chǔ)性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問題以及個(gè)人認(rèn)為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關(guān)注 如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處...

    shiina 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<