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

資訊專欄INFORMATION COLUMN

css系列之position與float

fnngj / 1499人閱讀

摘要：同時(shí)設(shè)置屬性不起作用生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位默認(rèn)值。額外標(biāo)簽法缺點(diǎn)不過(guò)這個(gè)辦法會(huì)增加額外的標(biāo)簽使結(jié)構(gòu)看起來(lái)不夠簡(jiǎn)潔。

position

同時(shí)設(shè)置float屬性不起作用

relative

生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位

fixed

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位

static

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中

absolute

生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位，如果元素沒(méi)有擁有position屬性的父級(jí)元素會(huì)根據(jù)標(biāo)簽也就是頁(yè)面的根節(jié)點(diǎn)進(jìn)行定位

如果元素設(shè)置width則width優(yōu)先，否則元素自知應(yīng)寬度

導(dǎo)致父元素寬高塌陷

sticky

殺了個(gè)回馬槍，還是說(shuō)說(shuō)position:sticky吧

float

語(yǔ)法：

clear: none | left | right | both

取值：

none:  默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left:  不允許左邊有浮動(dòng)對(duì)象
right:  不允許右邊有浮動(dòng)對(duì)象
both:  不允許有浮動(dòng)對(duì)象

如果要浮動(dòng)一個(gè)非置換元素，需要配合width屬性

設(shè)置之后，vertical-align,display無(wú)效

浮動(dòng)元素會(huì)按順序排下來(lái)而不會(huì)發(fā)生重疊

清除浮動(dòng)

因?yàn)閒loat會(huì)破壞inline-box，所以導(dǎo)致父元素高度為0。
額外標(biāo)簽法

（缺點(diǎn)：不過(guò)這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來(lái)不夠簡(jiǎn)潔。）
使用after偽元素
該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0，否則該元素會(huì)比實(shí)際高出若干像素

.parent{
    zoom: 1
}
.parent:after {
    content:".";
    height:0; 
    line-height: 0;
    visibility:hidden;
    display:block;
    clear:both;
}

overflow + zoom方法(zoom, IE獨(dú)有屬性)

.fix{
    overflow:hidden; 
    zoom:1;
}

有問(wèn)題的，就是這個(gè)overflow:hidden，要是里面的元素要是想來(lái)個(gè)margin負(fù)值定位或是負(fù)的絕對(duì)定位，豈不是直接被裁掉了，所以此方法是有不小的局限性的

不設(shè)偏移

relative，可以看作為static

absolute，依據(jù)父元素來(lái)定位，不一定是定位父元素元素

float，依據(jù)父元素來(lái)定位，不一定是瀏覽器窗口

設(shè)置偏移

relative，相對(duì)自身，對(duì)周圍元素?zé)o影響

absolute，依據(jù)定位父元素元素

float稍微復(fù)雜點(diǎn)

只設(shè)置top/left(bottom/right)，則設(shè)置值要依據(jù)瀏覽器窗口，未設(shè)置值要依據(jù)父元素

設(shè)置了top,left，則需要依據(jù)瀏覽器窗口

同時(shí)設(shè)置top, bottom(left,right)，則bottom(right)不起效

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

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

相關(guān)文章

  • CSS系列之常用布局

    摘要：流式布局特點(diǎn)等寬不等高參考鏈接純實(shí)現(xiàn)瀑布流多列及布局原生實(shí)現(xiàn)瀑布流效果 參考鏈接： 干貨!各種常見(jiàn)布局實(shí)現(xiàn)+知名網(wǎng)站實(shí)例分析前端布局基礎(chǔ)概述https://juejin.im/post/599970...https://juejin.im/post/5bbcd7...http://elevenbeans.github.io/...一些有趣的 CSS 魔法和布局（上） 等高布局 負(fù)mar...

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

  • css系列之水平垂直居中

    摘要：水平居中水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用對(duì)于塊級(jí)元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對(duì)居中絕對(duì)定位已知寬高負(fù)要考慮兼容性浮動(dòng)元素垂直居中父元素 水平居中 水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用text-align;對(duì)于塊級(jí)元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）; 垂直居中...

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

  • CSS:Margin與布局

    摘要：參考線示意圖如圖所示按箭頭所指方向使參考線變化的值都為正值。栗子沒(méi)在上加前效果如圖發(fā)生了堆疊。因此效果上來(lái)看便符合了預(yù)期如圖此布局便利用了原理，通過(guò)元素對(duì)相鄰元素位置的控制來(lái)達(dá)到預(yù)期的效果。 Margin與寬高度的關(guān)系 博客同步地址Margin與布局 在講此之前，必須知道什么是containing-box以及一些寬高度的一些關(guān)系，關(guān)于containing-box的概念以及與寬高度的關(guān)系...

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

  • 知識(shí)整理之CSS篇

    摘要：如對(duì)知識(shí)點(diǎn)感興趣，可移步至知識(shí)整理之篇就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫(xiě)特定的樣式達(dá)到讓瀏覽器兼容的過(guò)程。對(duì)于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素，這些對(duì)象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識(shí)點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對(duì)HTML知識(shí)點(diǎn)感興趣，可移步至...

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

  • 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

    摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...

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

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

0條評(píng)論

fnngj

男|高級(jí)講師

TA的文章

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