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

資訊專欄INFORMATION COLUMN

絕對定位(Absolute positioning)

gaomysion / 1587人閱讀

摘要：絕對定位的特性包裹性包裹性展示跟一樣也具有包裹性兩者的包裹性都類似于使元素化破壞性破壞性展示相對于引起父元素塌陷要更進一步上面的例子就可以看出元素完全脫離文檔流并且被其它盒子以及盒子內(nèi)的文本無視替代方案由于濫用會降低擴展性和維護性所以需要

絕對定位的特性 包裹性

absolute包裹性展示

跟float一樣,absolute也具有包裹性,兩者的包裹性都類似于使元素inline-block化.

破壞性

absolute破壞性展示

相對于float引起父元素塌陷,absolute要更進一步,上面的例子就可以看出,absolute元素完全脫離文檔流,并且被其它盒子以及盒子內(nèi)的文本無視

absolute替代方案

由于absolute濫用會降低擴展性和維護性,所以需要盡量少使用absolute

使用margin代替absolute為價格標(biāo)簽定位

通過給span標(biāo)簽設(shè)置一個div,設(shè)置div的margin實現(xiàn)

圖片圖標(biāo)絕對定位覆蓋

這個案例有三個圖標(biāo)覆蓋,第一個hot圖標(biāo)使用absolute+margin,設(shè)置margin調(diào)整位置緊緊跟隨header導(dǎo)航最后一個導(dǎo)航鏈接字體;第二個使用元素脫離文檔流,后面的圖片直接無視absolute的原理實現(xiàn)重疊;第三個vip圖標(biāo)設(shè)置absolute屬性后,位置跟原先的位置一樣,也就是在圖片的后面緊緊跟隨,然后設(shè)置margin-left圖標(biāo)寬度的負(fù)值就可以完成圖標(biāo)覆蓋,這里需要注意的一點是為了保證圖片和圖標(biāo)之間沒有空隙,需要在它們之間設(shè)置注釋

使用無依賴的絕對定位實現(xiàn)下拉框

這個案例我們主要利用的是absolute的跟隨性,配合margin使搜索結(jié)果定位到搜索框下邊框

居中及邊緣對齊定位

第一個例子是圖片居中對齊,父元素設(shè)置text-align:center,子元素由于是inline-block元素,所以會居中,為了兼容IE瀏覽器,需要在圖片前面設(shè)置 ,因為 需要占據(jù)0.25em所以我們在父元素設(shè)置letter-spacing:-.25em

空格寬度參考

第二個例子是右下角邊緣對齊,父元素設(shè)置text-align:right,子元素設(shè)置position:fixed固定定位,并且需要display:inline為了防止錯位

各種對齊溢出技巧實例

第一個例子是讓星號絕對定位,然后它脫離文檔流,不占用任何空間,所以后面的文字對齊就不受影響

第二個例子圖標(biāo)使用絕對定位,然后讓小圖標(biāo)做偏移圖表寬度,這就實現(xiàn)了圖文對齊

第三個例子是文字溢出,使用無依賴絕對定位,文字不斷行

absolute與width/height

容器無需固定width/height值,內(nèi)部元素可拉伸

這個例子使用絕對對位元素left: 0; top: 0; right: 0; bottom: 0;可以實現(xiàn)寬高百分之百的拉伸特性,父元素設(shè)置inline-block具有包裹性,我們在這里設(shè)置的半透明遮罩層可以完美覆蓋圖片

容器拉伸,內(nèi)部元素支持百分比width/height值

一般情況下,父級容器設(shè)置height:auto,子元素不能使用百分比高度,這時,子元素設(shè)置left: 0; top: 0; right: 0; bottom: 0;利用絕對元素拉伸特性,也可以使用百分比高度

left/right拉伸和width同時存在

同時設(shè)置left/right與width起作用的會是width,這時候再使用margin-left/margin-right:auto會使絕對定位水平居中,垂直居中同理,這也就是使用absolute的水平垂直居中的原理

使用absolute實現(xiàn)兩欄等高布局

這個例子的實現(xiàn)思路是設(shè)置一個width:100%;height:999em的空絕對定位元素,放在側(cè)邊欄,給側(cè)邊欄添加position:relative限制,然后在絕對定位元素同級放置一個設(shè)置position:relative;z-index:1元素包裹住圖片,把圖片都設(shè)置為display:block,最后把容器設(shè)置overflow:hidden

實現(xiàn)原理是由于絕對定位元素?zé)o高度特性無寬度特性,我們可以偽造一個高度足夠高的絕對定位層,同時設(shè)置父元素溢出隱藏,那么其多出來的高度就不會顯示了,也就實現(xiàn)了看上去的等高布局效果

absolute與網(wǎng)頁整體布局

仿慕課網(wǎng)的移動端頁面

深入理解absolute

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

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

相關(guān)文章

  • css position: absolute、relative詳解

    摘要：在使用相對定位時，無論元素是否進行移動，元素依然占據(jù)原來的空間。放置絕對定位對象在可視區(qū)域之外會導(dǎo)致滾動條出現(xiàn)。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經(jīng)定位的祖先元素。 CSS2.0 HandBook上的解釋： 設(shè)置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占...

    h9911 評論0 收藏0

  • 一些css基礎(chǔ)學(xué)習(xí)筆記

    摘要：當(dāng)父元素設(shè)置了的，子元素為時，設(shè)置無效當(dāng)父元素設(shè)置了時，子元素超出父元素部分無效只能限制的層級相當(dāng)于自身進行定位，相對于邊界會影響其他元素定位，而無影響自定義拖拽效果同時存在，無效同理，無效可提高層疊級數(shù)父元素的較大排前面數(shù)值排在上，當(dāng)前層 relative 1.當(dāng)父元素設(shè)置了relative的zindex，子元素為absolute時，設(shè)置zindex無效2.當(dāng)父元素relative設(shè)...

    cgh1999520 評論0 收藏0

  • 詳解css相對定位和絕對定位

    摘要：以上兩點點可以總結(jié)出，相對定位總是以父級左上角為原點進行定位的，如果父級不存在，則以瀏覽器左上角進行定位。 贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題 案例代碼1 .rel{ border: 1px solid #ccc; height: 200px; ...

    Jaden 評論0 收藏0

  • 前端技術(shù)之_CSS詳解第六天--完結(jié)

    前端技術(shù)之_CSS詳解第六天--完結(jié) 一、復(fù)習(xí)第五天的知識 a標(biāo)簽的偽類4個： 　　a:link 沒有被點擊過的鏈接 　　a:visited 訪問過的鏈接 　　a:hover 懸停 　　a:active 按下鼠標(biāo)不松手 順序就是“love hate”準(zhǔn)則。 可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...

    番茄西紅柿 評論0 收藏0

  • CSS詳細(xì)解讀定位

    摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。 一 前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。 二 正文 1.文檔流布局的概念 將窗體自上而下分成一行行， 并在每行中按從左至右的...

    1treeS 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<