css系列之position與float

fnngj 發布于2019-08-29 13:52 / 1439人閱讀

摘要：同時設置屬性不起作用生成相對定位的元素，相對于其正常位置進行定位生成絕對定位的元素，相對于瀏覽器窗口進行定位默認值。額外標簽法缺點不過這個辦法會增加額外的標簽使結構看起來不夠簡潔。

position

同時設置float屬性不起作用

relative

生成相對定位的元素，相對于其正常位置進行定位

fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位

static

默認值。沒有定位，元素出現在正常的流中

absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位，如果元素沒有擁有position屬性的父級元素會根據標簽也就是頁面的根節點進行定位

如果元素設置width則width優先，否則元素自知應寬度

導致父元素寬高塌陷

sticky

殺了個回馬槍，還是說說position:sticky吧

float

語法：

clear: none | left | right | both

取值：

none:  默認值。允許兩邊都可以有浮動對象
left:  不允許左邊有浮動對象
right:  不允許右邊有浮動對象
both:  不允許有浮動對象

如果要浮動一個非置換元素，需要配合width屬性

設置之后，vertical-align,display無效

浮動元素會按順序排下來而不會發生重疊

清除浮動

因為float會破壞inline-box，所以導致父元素高度為0。
額外標簽法

（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
使用after偽元素
該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素

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

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

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

有問題的，就是這個overflow:hidden，要是里面的元素要是想來個margin負值定位或是負的絕對定位，豈不是直接被裁掉了，所以此方法是有不小的局限性的

不設偏移

relative，可以看作為static

absolute，依據父元素來定位，不一定是定位父元素元素

float，依據父元素來定位，不一定是瀏覽器窗口

設置偏移

relative，相對自身，對周圍元素無影響

absolute，依據定位父元素元素

float稍微復雜點

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

設置了top,left，則需要依據瀏覽器窗口

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

GPU云服務器云服務器 float和position position，css 系列之系列之二

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

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

CSS系列之常用布局

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

qylost 2019-08-30 14:05 評論0 收藏0
css系列之水平垂直居中

摘要：水平居中水平居中沒有什么好說的啦，對于行內元素使用對于塊級元素使用前提是已經為元素設置了適當的寬度垂直居中單行文本多行文本偽元素行內元素偽元素未知寬高絕對居中絕對定位已知寬高負要考慮兼容性浮動元素垂直居中父元素水平居中水平居中沒有什么好說的啦，對于行內元素使用text-align;對于塊級元素使用margin: auto（前提是已經為元素設置了適當的 width 寬度）; 垂直居中...

MiracleWong 2019-08-29 13:44 評論0 收藏0
CSS:Margin與布局

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

ivan_qhz 2019-08-28 18:24 評論0 收藏0
知識整理之CSS篇

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

ermaoL 2019-08-30 15:55 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

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

Noodles 2019-08-30 12:53 評論0 收藏0