国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

絕對定位(Absolute positioning)

gaomysion / 1554人閱讀

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

絕對定位的特性 包裹性

absolute包裹性展示

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

破壞性

absolute破壞性展示

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

absolute替代方案

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

使用margin代替absolute為價格標簽定位

通過給span標簽設置一個div,設置div的margin實現

圖片圖標絕對定位覆蓋

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

使用無依賴的絕對定位實現下拉框

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

居中及邊緣對齊定位

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

空格寬度參考

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

各種對齊溢出技巧實例

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

第二個例子圖標使用絕對定位,然后讓小圖標做偏移圖表寬度,這就實現了圖文對齊

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

absolute與width/height

容器無需固定width/height值,內部元素可拉伸

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

容器拉伸,內部元素支持百分比width/height值

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

left/right拉伸和width同時存在

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

使用absolute實現兩欄等高布局

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

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

absolute與網頁整體布局

仿慕課網的移動端頁面

深入理解absolute

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112017.html

相關文章

  • css position: absolute、relative詳解

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

    h9911 評論0 收藏0

  • 一些css基礎學習筆記

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

    cgh1999520 評論0 收藏0

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

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

    Jaden 評論0 收藏0

  • 前端技術之_CSS詳解第六天--完結

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

    番茄西紅柿 評論0 收藏0

  • CSS詳細解讀定位

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

    1treeS 評論0 收藏0

發表評論

0條評論

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