CSS中position定位和float浮動

2021-08-20 05:37:59 字數 507 閱讀 7700

一、position定位

1、position屬性

(1)absolute:生成絕對定位的元素,相對於最近一級定位不是static的父元素來進行定位,「最近」是指在這個節點的所有祖先節點中,距離該節點的層次最近的祖先節點,以距離最近的祖先節點作為定位基準。

(2)relative:生成相對定位的元素,相對於其所在普通的文件流位置進行定位。

(3)static:預設值,沒有定位,元素出現在正常的文件流中。

(4)fixed:和absolute一致,區別在於定位的基準不是祖先元素,而是瀏覽器視窗或者其他顯示裝置的視窗,相對於視窗進行定位,當出現滾動條時,不隨著滾動而滾動。

二、float浮動

1、float:left\right\none, float屬性的值設定為left或right,元素就會向其父元素的左側或右側靠緊,在預設情況下,盒子的寬度不再伸展,而是根據盒子裡面的內容的寬度來決定。

可以用clear來清除浮動。

clear:left\right\both;

css中的定位(position)

w3c中對position各個 屬性值定義 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。relative 元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。absolute 元素框從文件流完全刪除,並...

css中的position定位

今天給大家分享一下,深度思考中的知識點 position定位有哪幾種?各有什麼特點?position是css中非常重要的乙個屬性,通過position屬性,我們可以讓元素相對於其正常位置,父元素或者瀏覽器視窗進行偏移。position概念 css的很多其他屬性大多容易理解,比如字型,文字,背景等。有...

css中position的絕對定位和相對定位

什麼是文件流?將窗體自上而下分成一行行,並在每行中按從左至右的順序排放元素,即為文件流。只有三種情況會使得元素脫離文件流,分別是 浮動 絕對定位和相對定位。靜態定位 static static,無特殊定位,它是html元素預設的定位方式,即我們不設定元素的position屬性時預設的position...