CSS筆記(佈局與定位)

塊元素內聯元素,還有盒模型,這些正是瀏覽器創建頁面佈局的基礎css

1 流(Flow)

其實是瀏覽器在頁面上擺放HTML元素所用的方法。瀏覽器

1.1 關於塊元素

瀏覽器從HTML文件最上面開始,從上到下沿着元素流逐個顯示所遇到的各個元素。好比只考慮塊元素,顯示第一個塊元素後,自動換行,顯示第二個塊元素,接着又是一個換行,如此從文件最上面到文件末尾逐個顯示,這就是markdown

當瀏覽器上下放置兩個塊元素時,兩個塊元素的外邊距會摺疊在一塊兒,即塊元素上下襬放,兩者距離是較大的那一方的外邊距佈局

浮動的與定位的塊元素與正常流塊元素上下放置時,外邊距不會摺疊spa

1.2 關於內聯元素

塊元素從上到下,那麼內聯元素就是從左上流向右下,而當所屬的塊元素寬度被設定,從而須要佔據更多的垂直空間,此時內聯元素的排列就必須適應一個更小的水平空間。設計

當瀏覽器並排放置兩個內聯元素時,兩元素之間的距離等於它們的外邊距之和。通常狀況下是不會設置內聯元素的外邊距(固然<img>圖像元素除外,對於圖像元素不只會設置外邊距,還有邊框與內邊距)。code

2 浮動定位

在瞭解完流以後,如今理解設置屬性float是如何浮動一個元素,達到改變位置的效果。
對於全部浮動元素都要有一個要求,那就是:它必須有一個width寬度值
在理解其理由時,關鍵在於理解:正常狀況下,瀏覽器的一行裏不能容納兩個塊元素,全部沒有定義的塊元素的寬度都是默認爲auto,即只要沒定義,基本狀況上這元素的寬度爲瀏覽器大小的寬度。
浮動屬性是將一個元素浮動在整個頁面之上,經過兩個塊元素中內聯元素的互相約束,從而達到兩個塊元素並排的相似效果。
而此時若是不設置浮動元素的寬度,就沒法肯定正常流元素的寬度,最終會致使重疊狀況出現。對象

2.1 向右與向左浮動

向左向右浮動,結果是不同的,這又是爲何呢?在此以前,咱們須要在深入地理解一下浮動的定義繼承

#go-right { width:200px; float:right; }

當如上述定義浮動向右時,瀏覽器的解釋步驟:three

  • 首先瀏覽器會像以往那樣正常地由上至下將元素流入頁面
  • 當遇到浮動元素時,會把它放到最右邊,還會從流中刪除這個段落,就比如它浮在頁面
  • 因爲浮動元素從正常流中刪除,因此其餘元素就會像沒有浮動元素繼續流進頁面
  • 因此理論上後面正常流進來的元素是在浮動元素的下方,不過這時候就要考慮到這些塊元素中內嵌的內聯元素了。瀏覽器對內聯元素定位時,它們會考慮浮動元素的邊界,於是起到一個圍繞浮動元素的效果。

這裏還得注意的就是瀏覽器讀取元素順序,也就是說書寫HTML時,浮動元素必定要緊跟你排版頁面位於浮動元素上面的正常流元素,不然若是按照正常閱讀頁面時的順序,浮動元素就會掉到後頭去了(此時只有浮動元素有寬度,而正常流元素寬度是可調節的)。
因此此時就要考慮使用向左浮動了。

正常流塊元素仍是在浮動元素下方,能夠在正常流塊元素設置了一些邊框(不設置寬度),以便看出重疊效果。


3 屬性float

說那麼多沒用,仍是實戰敲一敲得好。

例如此次期待編寫出如下這頁面:

頁面

3.1 向右浮動定位

諸如其餘的樣式編寫完以後,要使用向右浮動定位,浮動向右定位的步驟:

  • 首先要定義姆爺板塊的寬度 width
  • 而後定義float 屬性
  • 接着還要計算姆爺板塊的總寬度,從而定義歌詞板塊的左外邊距,不然歌詞板塊背景會與姆爺板塊重疊(注意這裏邊距數值能夠是百分數或數值)。

到此時仿似一切正常,但縮小瀏覽器頁面一看,頁面內容都擠到一塊兒了,尤爲頁腳與姆爺模塊會有重疊
這裏使用一個新屬性clear,先解決頁腳的重疊問題。
clear 屬性提出請求:當元素流入頁面時,能夠設置在這個元素的左邊或右邊或兩邊(bothleftright)不容許有浮動內容。所以這屬性只能使用在頁腳,而不能使用到歌詞模塊上。

#bottom { background-color: #FFE957; clear:right; }

使用右浮動定位的問題:屏幕過小時,姆爺模塊會佔優點把歌詞模塊頂得很小塊,因爲內聯元素之間的排斥以至歌詞內容都掉下去,同時原本想先看歌詞後看姆爺信息的順序就被打亂了。
因此如今要考慮向左浮動定位。

3.2 向左浮動定位

使用左浮動定位的步驟:

  • 首先定義歌詞模塊寬度 width
  • 而後定義float屬性
  • 接着定義姆爺模塊左邊距
  • 最後定義頁腳clear 屬性

使用左浮動定位的問題:如今姆爺模塊爲可擴展模塊了,當屏幕太大,這模塊會過寬,很差看。

因此結論是:從設計的角度來說,向右浮動比較好,而從信息角度來說,向左浮動比較好。
那有沒有一個方法能夠同時獲得兩者的好處呢?

3.3 流體佈局,凍結佈局與凝膠布局

3.3.1 流體佈局

目前,咱們所採用的的方法都是流體佈局也就是不管瀏覽器調整得多大寬度,佈局都會擴展,填滿整個瀏覽器,使得用戶能充分利用他們的屏幕空間。
但也是由於這些不肯定的因素致使很難控制頁面,頁面大小不一樣呈現的效果與預期有出入。因此乾脆全都設置一些寬度把它們鎖死

3.3.2 凍結佈局

凍結佈局會鎖定元素,讓他們凍結在頁面上,這樣就能避免因爲窗口擴展引來的衆多問題。
它的作法就是定義一個封裝全部元素如<allcontent>元素的width數值,其餘元素的寬度,外距都用百分數定義,那麼此時就會造成一個總體「凍結」的頁面板塊
那麼此時假如瀏覽器真的足夠大,頁面板塊就會被掛到瀏覽器的一旁,不太美觀,這時就可使用凝膠布局

3.3.3 凝膠布局

接着上述的步驟,這時能夠定義<allcontent> 元素的左右外邊距爲auto,此時瀏覽器會肯定正確的外邊距,使得左右邊距相同,於是頁面板塊居中。而這種設計叫作凝膠布局


4 <position> 屬性

CSS中<position> 屬性有四個值:static靜態), absolute絕對), fixed固定) , relative相對), 默認值static,當靜態定位時,元素會依據正常的文檔流。

4.1 絕對定位

絕對定位(absolute positioning)能讓內容保持正確順序,同時避免流體佈局存在的一些問題(好比說自身是按順序書寫HTML,邊欄模塊是有寬度使得主內容模塊的寬度是可擴展
<position> 屬性設定值爲absolute時,就是絕對定位
使用絕對定位實現上述效果:

  • 絕對定位會先從流中刪除姆爺模塊
  • 而後根據指定的 top 、right、width(寬度) 屬性對姆爺模塊進行定位,定位方法是平移,如top=0% 則元素定位在頂端,right=50% 則元素從頁面右邊開始,以右邊外框(包括外邊距)爲準平移50%距離。

但問題在於:絕對定位不能使用clear 屬性,即頁腳重疊問題沒法解決

#singer { position:absolute; top:128px; right:0px; wdith:280px; }

4.1.2 關於定位受限問題

使用絕對定位,能夠編輯width, top ,left ,right 以及bottom 屬性用以肯定整一個定位元素的位置和大小。
那麼假如我設定的定位元素的屬性值過分受限怎麼辦呢?
比方說我要定義一個有衝突的定位元素,如left=50%right=50%,那麼這時瀏覽器就會忽略掉right值,並重置right值。
同理當垂直方向發生定位受限衝突時,瀏覽器會忽略掉bottom

4.2 固定定位

固定定位相信在不少網頁上都有看過,就是無論你的瀏覽器怎麼滾動上下頁面,固定定位元素仍是在固定位置上顯示着。
用法與絕對定位的差很少:

#singer { position:fixed; top:128px; right:0px; wdith:280px; }

4.3 相對定位

相對定位與固定定位的地方在於:固定定位時鹹魚瀏覽器窗口,而相對定位是相對於其父類元素來定位,其自己元素仍在正常的頁面流中(這句話要吃透),再按照指定的量來移動元素。(儘管是在正常流中,仍是會引發覆蓋)

#three { position: relative; top:-340px; left: 0px; width:1350px; }

最後,討論一下「自己元素仍在正常的頁面流中」這句話的意思。
看下圖,下圖的三條藍色線是在HTML裏是內嵌在頁腳模塊的元素,也就是說這裏移動是基於頁腳來移動的,設置移動距離爲負值。但有沒有注意到頁腳地下有塊空白區域,儘管把頁腳的margin值調爲零那區域仍是在這裏,這區域其實就是相對移動元素在正常流中的位置,儘管移動到別的地方,這個位置也是一直存在,一直被佔據的。

這裏思索一下爲何不使用姆爺模塊或標題頭模塊做爲基準對象,進行定位,而恰恰使用不討好的頁腳以致於生成空白區域?
這是由於會受到了繼承寬度等的影響,達不到原本預期的效果,如鐵定不能使用姆爺模塊,由於起始值被會在該模塊下面的左方位置(不是這個頁面的最左方),實現不了預期效果。

這裏寫圖片描述

4.4 z-index 屬性

關於覆蓋優先的問題,定位元素可使用z-index 屬性分層放置,一個z-index 值越大,說明它層次越高,在屏幕上離你越近。
如上圖的三條藍色線就是對z-index 屬性賦值爲-1,才達到後置在歌詞模塊的效果。

5 關於overflow屬性

當一個元素固定爲某特定大小,但內容卻在元素中放不下,此時可使用overflow屬性來定義這種狀況:
overflow的值分別爲:visible(默認值),hiddenscrollauto(含義是交給瀏覽器自己定義)以及inherit
然而設置了overflow='hidden'屬性後並非在任何狀況下都能正常操做,它的實現也是有條件的,假如內部溢出元素的包含塊爲該容器的父級元素時,overflow屬性無效。即假如符合如下狀況,即便設置了overflow='hidden'也無法成功剪裁:

  • 一、擁有overflow樣式的元素不具備position:absoluteposition:relative樣式
  • 二、內部溢出的元素是經過position:absolute進行定位

只要知足這兩個條件,overflow屬性就沒法對內部溢出元素進行剪裁。
這是由於一個絕對定位的元素,其包含塊是最近的擁有relative或者absolute定位屬性的祖先元素,若是任何一級祖先元素都不符合,則其包含塊是body元素。

包含塊簡單說就是定位參考框或者定位座標參考系,元素一旦定義了定位顯示(相對、絕對、固定)都具備包含塊性質,它所包含的定位元素都將以該包含塊爲座標系進行定位和調整。
對於相對定位及靜態定位來講,其包含塊都是最近的塊級元素或單元格或行內塊。
對於固定定位,其包含塊就是可視窗口


6 display 屬性(表格顯示)

CSS的表格顯示佈局須要增長HTML結構支持

  • 首先定義表格,在HTML增長一個<div>,如id爲」tablecontainer」,這個元素包含佈局意義上的行與列。
  • 而後定義行,在HTML增長一個<div>,如id爲」tablerow」,這個元素包含佈局意義上全部的行。
  • 最後定義單元格,在HTML增長一個<div>,如id爲」tablecell」,這個元素包含佈局意義上全部的單元格。
#tc { display: table; border-spacing: 10px; }

#tr { display: table-row; }

#singer { display:table-cell; vertical-align:top; }

#song { display: table-cell; vertical-align:top; }
/* 1. border-spacing爲表格邊框邊距,可看做爲外邊距,因此源元素的外邊距可取消 2. 「vertical-align:top;」---> 單元格元素垂直對齊 */

若是須要創建多欄佈局,並且內容欄是均勻的,表格顯示就是很是好的佈局策略

相關文章
相關標籤/搜索