【css筆記】css中的盒模型和三種定位機制(固定定位,絕對定位,浮動)

html頁面上的元素均可以當作是框組成的,框經過三種定位機制排列在一塊兒就過程了咱們看到的頁面.而框就是盒模型.

盒模型

 

 

1.頁面上的每一個元素能夠當作一個矩形框，每一個框由元素的內容，內邊距，邊框和外邊距組成。

2.若是在元素上添加背景，則背景是邊框, 內邊距和內容組成的區域.

3.在css中width和height指的是內容區域的寬度和高度。增長內邊距，邊框和外邊距不會影響內容區域的尺寸，但會增長元素框的總尺寸。即width=element

注意：ie的盒模型中，width指的是內容，內邊距，和邊框的寬度總和（沒有外邊距）。即：width=element+padding+border

 

外邊距疊加：當兩個或更多的垂直外邊距相遇時，它們將造成一個新外邊距。這個新外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。

注意：只有普通文檔流中的塊框的垂直外邊距纔會發生外邊距疊加。行內框，浮動框或絕對定位框之間的外邊距不會疊加.

會有如下四種狀況:

 

 

 

html中的元素分爲塊級元素和行內元素,對應的生成的框即爲塊框和行內框.

塊框從上到下一個接着一個排列,塊框之間的距離由垂直外邊距決定.

行內框在一行中水平排列.

注意:可經過設置display屬性改變框的類型.

 

css的三種定位機制

css由3中基本的定位機制:普通流,浮動和絕對定位.

若非經過css樣式指定,全部的框都在普桶流中,普通流中的元素框位置由元素在html中的位置決定.

相對定位(視爲普通流定位):由於是相對定位元素的位置是」相對於」元素在普通流中的初始位置而定,因此視爲普通流定位的一種.相對定位的元素任佔據原來的空間,而且能夠覆蓋其餘框.

將屬性position設置爲relative.經過設置top和left使框相對於原來元素的起點移動

 

絕對定位:絕對定位的元素的位置是相對於距離它最近的那個已定位的祖先元素肯定的.絕對定位的元素位置與文檔流無關,所以不佔據空間.

注意:

相對定位元素的位置是」相對於」元素在普通流中的初始位置而定.

絕對定位是」相對於」距離它最近的已定位祖先元素,如不存在,則相對於初始包含塊.

注意:絕對定位由於與文檔流無關,所以也會覆蓋頁面上的其餘元素.p47

當絕對定位的元素由重合時刻經過z-index設置疊放次序.

將屏幕當作湖面,z-index設置的值越高,離湖面越近,則顯示的優先級就越高.z-index值高的元素顯示優先級高於z-index值低的元素.

固定定位:視爲絕對定位的一種. 固定元素的包含塊爲瀏覽器窗口.

 

浮動:浮動會讓元素脫離文檔流.浮動框能夠左右移動知道它的外邊距碰到包含框或者另外一個浮動框的邊緣.

若浮動的元素後面有一個文檔流中的元素,那麼浮動元素旁邊的行框將被縮短.文檔流中的元素會緊跟浮動框以後（例如文本圍繞圖像）.

解決方法:對行框應用clear屬性,屬性值爲left,right,both,none.而在具體實現時,瀏覽器會在元素頂上添加足夠的外邊距,是元素的頂邊緣垂直降低到浮動框下面.

與css定位有關的屬性(第一個屬性值爲默認屬性):

position	規定元素的定位類型	static, absolute, fixed, relative
top	設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移	auto, 百分數, 數值
right	設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移	auto, 百分數, 數值
bottom	設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移	auto, 百分數, 數值
left	設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移	auto, 百分數, 數值
float	規定框的浮動	none, left, right
clear	規定元素的哪一側不容許其餘浮動元素	none, left, right, both
display	規定元素應生成框的類型	inline, none, block, inline-block
clip	剪裁絕對定位元素	auto, 形狀rect (top, right, bottom, left)
overflow	規定當內容溢出元素框時發生的事情	visible, hidden, scroll, auto
vertical-align	設置元素的垂直對齊方式	baseline, sub, super, top, bottom, 數值,百分數
visibility	規定元素是否可見	visible, hidden, collapse
Z-index	設置元素的堆疊順序	auto, 數值
cursor	規定要顯示的光標的類型	Auto, text, help,pointer, move