css系列之position與float

時間 2019-11-16

標籤 css 系列 position float 欄目 CSS 简体版

原文原文鏈接

position

同時設置float屬性不起做用javascript

relative

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

fixed

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

static

默認值。沒有定位，元素出如今正常的流中java

absolute

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位，若是元素沒有擁有position屬性的父級元素會根據<html>標籤也就是頁面的根節點進行定位瀏覽器

若是元素設置width則width優先，不然元素自知應寬度
致使父元素寬高塌陷

sticky

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

float

語法：code

clear: none | left | right | both

取值：htm

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

若是要浮動一個非置換元素，須要配合width屬性
設置以後，vertical-align,display無效
浮動元素會按順序排下來而不會發生重疊

清除浮動

由於float會破壞inline-box，因此致使父元素高度爲0。
額外標籤法
<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使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獨有屬性)ip

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

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

不設偏移

relative，能夠看做爲static
absolute，依據父元素來定位，不必定是定位父元素元素
float，依據父元素來定位，不必定是瀏覽器窗口

設置偏移

relative，相對自身，對周圍元素無影響
absolute，依據定位父元素元素
float稍微複雜點
1. 只設置top/left(bottom/right)，則設置值要依據瀏覽器窗口，未設置值要依據父元素
2. 設置了top,left，則須要依據瀏覽器窗口
3. 同時設置top, bottom(left,right)，則bottom(right)不起效

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。