成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

HTML float 和 absolute

妤鋒シ / 1227人閱讀

摘要：相對(duì)定位是相對(duì)于該元素在文檔流中的原始位置，即以自己原始位置為參照物。對(duì)象遵循正常文檔流，但將依據(jù)，，，等屬性在正常文檔流中偏移位置。另外，對(duì)象脫離正常文檔流，使用，，，等屬性進(jìn)行絕對(duì)定位。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。

block元素和inline元素在文檔流中的排列方式:

block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行，默認(rèn)block元素寬度自動(dòng)填滿其父元素寬度。block元素可以設(shè)置width、height、margin、padding屬性；
inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。inline元素設(shè)置width、height屬性無(wú)效。
inline元素的margin和padding屬性: 水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。

文檔流: 指的是元素排版布局過(guò)程中，元素會(huì)自動(dòng)從左往右，從上往下的流式排列。
脫離文檔流: 將元素從普通的布局排版中拿走，其他盒子在定位的時(shí)候，會(huì)當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位。只有絕對(duì)定位absolute和浮動(dòng)float才會(huì)脫離文檔流。




    
    Title
    






    
    
    




底部

效果如下：

使用 overflow: hidden




    
    Title
    




    
    



底部

效果如下：

position(定位)

一、static
static 默認(rèn)值，無(wú)定位，不能當(dāng)作絕對(duì)定位的參照物，并且設(shè)置標(biāo)簽對(duì)象的left、top等值是不起作用的的。

二、position: relative／absolute
relative 相對(duì)定位。
相對(duì)定位是相對(duì)于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設(shè)定了元素的相對(duì)定位以及偏移值，元素還占有著原來(lái)的位置，即占據(jù)文檔流空間。對(duì)象遵循正常文檔流，但將依據(jù)top，right，bottom，left 等屬性在正常文檔流中偏移位置。而其層疊通過(guò)z-index屬性定義。
注意：position：relative的一個(gè)主要用法：方便絕對(duì)定位元素找到參照物。

absolute 絕對(duì)定位。
定義：設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于最近的已定位祖先元素定位，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。

  重點(diǎn)：如果父級(jí)設(shè)置了position屬性，例如 position:relative; 那么子元素就會(huì)以父級(jí)的左上角為原始點(diǎn)進(jìn)行定位。這樣能很好的解決自適應(yīng)網(wǎng)站的標(biāo)簽偏離問(wèn)題，即父級(jí)為自適應(yīng)的，那子元素就設(shè)置position:absolute; 父元素設(shè)置 position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

另外，對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。
總結(jié)：參照物用相對(duì)定位，子元素用絕對(duì)定位，并且保證相對(duì)定位參照物不會(huì)偏移即可。

三、position:fixed
fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過(guò)z-index屬性 定義。 注意點(diǎn)： 一個(gè)元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這 是一個(gè)常識(shí)性的知識(shí)點(diǎn)，因?yàn)檫@是兩個(gè)不同的流，一個(gè)是浮動(dòng)流，另一個(gè)是“定位流”。但是 relative 卻可以。因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流。在理論上，被設(shè)置為fixed的元素會(huì)被定位于瀏覽器窗口的一個(gè)指定坐標(biāo)，不論窗口是否滾動(dòng)，它都會(huì)固定在這個(gè)位置。




    
    Title
    






返回頂部

效果如下：

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1330.html

相關(guān)文章

  • 【前端工程師手冊(cè)】布局

    摘要：今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。脫離文檔流觸發(fā)使用脫離文檔流之后，我們?cè)倮脜^(qū)域不會(huì)與浮動(dòng)元素重疊的特性來(lái)使剩下的元素自適應(yīng)。 今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局、三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。 兩欄布局 這里我們講...

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

  • 三列布局，中間自適應(yīng)，關(guān)于float和positon方法

    摘要：這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因?yàn)榈淖釉匾呀?jīng)脫離文檔流，不能撐開(kāi)父元素，或者會(huì)遮蓋同級(jí)的兄弟元素。 三列布局，中間自適應(yīng)，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

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

  • 三列布局，中間自適應(yīng)，關(guān)于float和positon方法

    摘要：這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因?yàn)榈淖釉匾呀?jīng)脫離文檔流，不能撐開(kāi)父元素，或者會(huì)遮蓋同級(jí)的兄弟元素。 三列布局，中間自適應(yīng)，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

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

  • html和css常見(jiàn)的一些問(wèn)題總結(jié)

    摘要：至于說(shuō)，，，屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開(kāi)始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，這一次你會(huì)發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。 html 標(biāo)簽 一般在html有塊級(jí)元素和行級(jí)元素，主要的塊級(jí)元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

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

  • html和css常見(jiàn)的一些問(wèn)題總結(jié)

    摘要：至于說(shuō)，，，屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開(kāi)始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，這一次你會(huì)發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。 html 標(biāo)簽 一般在html有塊級(jí)元素和行級(jí)元素，主要的塊級(jí)元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<