CSS元素定位6-10課

時間 2019-11-09

標籤 css 元素定位欄目 CSS 简体版

原文原文鏈接

《精通CSS.DIV網頁樣式與佈局》視頻6-10課總結圖：css

元素定位瀏覽器

（1）float:left/right;佈局

左浮動；脫離普通文檔流向左浮動（即向左對齊）；float屬性必須應用在塊級元素上，也就是說浮動並不該用於行內元素，或者說當應用了float，那麼這個元素將被指定爲塊級元素。spa

通常頁面排版時大的div塊都會用到float:left/right；來進行排版，可是處於頁面底端的腳本div塊通常都會使用clear:both;來消除浮動影響。視頻

例如：圖片

頁面已用div分好塊：#container、#banner、#content、#links、#footer（#container中包含其餘div塊）以下圖：文檔

若要將頁面排版以下，如何用CSS設置？it

——>>元素定位以下：注意float的使用io

（2）position:absolute/relative;原理

CSS定位的原理

把瀏覽器窗口想象成一個座標系統：

CSS定位的原理是：你能夠將任何盒子（box）放置在座標系統的任何位置上。

採用CSS定位技術來放置元素是很是精確的。相對於使用表格、透明圖像或其餘方法而言，CSS定位要簡單得多。

絕對定位

一個採用絕對定位的元素不得到任何空間。這意味着：該元素在被定位後不會留下空位。

要對元素進行絕對定位，應將position屬性的值設爲absolute。接着，你能夠經過屬性left、right、top和bottom來設定將盒子放置在哪裏。

舉個絕對定位的例子，假如咱們要在文檔的四個角落各放置一個盒子：

#box1 { position:absolute; top: 50px; left: 50px;}#box2 { position:absolute; top: 50px; right: 50px;}#box3 { position:absolute; bottom: 50px; right: 50px;}#box4 { position:absolute; bottom: 50px; left: 50px;}

相對定位

要對元素進行相對定位，應將position屬性的值設爲relative。絕對定位與相對定位的區別在於計算位置的方式。

採用相對定位的元素，其位置是相對於它在文檔中的原始位置計算而來的。這意味着，相對定位是經過將元素從原來的位置向右、向左、向上或向下移動來定位的。採用相對定位的元素會得到相應的空間。

舉個相對定位的例子，咱們能夠相對於三張圖片在頁面上的原始位置來對它們進行相對定位。注意這些圖片將在文檔中各自的原始位置處留下空位。

#dog1 { position:relative; left: 350px; bottom: 150px;}#dog2 { position:relative; left: 150px; bottom: 500px;}#dog3 { position:relative; left: 50px; bottom: 700px;}css裏的position的值relative、absolute的實際意義

position屬性實際上是指本體對上級的定位。默認的屬性值都是static，靜態。

最關鍵的是relative（相對）以及absolute（絕對）。

如：

</div>

當A的position爲relative時，B的position爲absolute纔有效。這時候left:0、top:0就再也不針對窗口文檔，而是針對id爲A的這個div了。

position:absolute: 絕對定位，是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的座標原始點爲原始點。若是設定TRBL而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。