CSS 元素和基本定位

對基礎的元素和定位作個總結，原文發表在我的個人部落格：kmknkk.xin

塊級元素顯示為一塊內容（即」塊框」），若不做其他處理（如float:left）一般為乙個接乙個豎直排列。

塊級元素的垂直距離由垂直外邊距決定，可能會發生margin合併現象，具體可以參考我的另一篇文章：**bfc和margin重疊。

常見的塊級元素有：

- menu

- p, pre

- h1~h6, hr

- div, dir, dl

- table, ul, ol, li, form

- address, blockquote, center

行內元素通常顯示在行中（即」行內框」）水平依次排列。常見的有strong、span等元素。

與塊級元素相比，行內元素的 height、width、transform、豎直方向上的 margin 和 padding 等屬性是無效的（水平方向上的 margin 和 padding 有效）。

ps: 在行內元素中有個特例，即image。它雖然是行內元素，但是卻有著block的特性。所以我們可以喜聞樂見的發現它既可以同行排列，又可以使用height、width、豎直方向的margin 和 buttom等屬性。

顧名思義，這個定義使得元素像行內元素一樣水平依次排列，但是其內容仍然符合塊級框的行為。

例如可以顯示地設定寬度、高度、豎直方向上的 margin 和 buttom。

在開發中如有需要，我們可以使用dispaly來更改元素的型別，以達到預期的效果：

display

: block;
/* 使行內元素表現的像塊級元素一樣 */
display
: inline;
/* 預設值，像行內元素一樣顯示 */
display
: inline-block;
/* 行內盒元素 */
display
: list-item;
/* 像列表項一樣顯示 */
display
: none;
/* 使這個框的內容不顯示，不占用文件空間 */

1、 浮動

2、 絕對定位（position：absolute）

3、 相對定位（position：relative）

4、 固定定位（position：fixed）

5、 繼承定位（position：inherit）

6、 預設定位/無定位（position：static）

在介紹定位之前，我們先來了解乙個概念：普通流或者叫文件流

將窗體自上而下分成一行一行，並在每行中按從左至右的挨次排放元素，即為普通流/文件流。除非專門指定，否則所有元素均在普通流中。

內聯元素不會獨佔一行，而每個非浮動塊級元素都獨有一行。當乙個元素脫離正常文件流後，依然在文件流中的其他元素將忽略該元素並填補其原先的空間。

浮動元素不佔據文件流的空間，但浮動元素的定位會基於正常的文件流，且文字會會環繞在浮動元素周圍，可能會覆蓋掉文件流元素。

不同於文件流元素，浮動元素按規則浮在行的一端，若當時行容不下，則另起新行再浮動。

下面我們來看看一些元素浮動布局的場景：

1、框1脫離文件流向右浮動直到碰到邊界：

2、浮動元素之間會相互影響：

3、文字環繞在浮動元素周圍：

可以通過給文字元素增加clear屬性（left、right、both、none）來表示哪邊不應該挨著浮動框以達到上圖左邊的效果。

為什麼要清除浮動?

fe們對浮動可謂是又愛又恨，一方面：利用float，我們可以快速的進行一些布局；另一方面：使用float又會產生許多***，比如元素脫離父元素導致排版混亂、父元素高度坍塌，又比如文字環繞浮動元素等。

所以清除浮動就是為了更好地利用浮動的優點且規避其缺點。

清除浮動主要有兩種方法：

(1)overflow:hidden: 原理是產生bfc，強制包裹住元素，但是bfc會導致內容被截斷或產生滾動條。當然，其他所有可產生bfc的方式都可以清除浮動，產生***也一樣。

（1）絕對定位使元素位置與文件流無關，因此不佔據文件空間。普通文件流元素就當絕對定位元素不存在一樣。

（2）相對定位元素的left、top等屬性的基準為：以當前元素向外尋找已定位祖先元素（一般為我們用position: relative來設定該元素），如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

（1）在使用相對定位時，無論是否移動，元素仍然佔據原來的空間（佔據文件空間）。因此，移動元素會導致覆蓋其他框。

（2）相對定位元素的left、top等屬性的基準為其原先的位置。

position: fixed;

position: inherit;

position: static;

css元素定位和布局

一 定位 模型和定位是密不可分的，就像買了家具，要找地方放家具一樣，要不然沒地方放，放到人家家裡面，是沒有意義的。下面就介紹一下定位的屬性 position 定義元素在頁面的定位方式 left 指定元素和最近乙個具有定位設定的父物件左邊的距離 right 指定元素和最近乙個具有定位設定的父物件右邊的...

css元素定位

我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下 relative 生成相對定位元素，元素所佔據的文件流的位置不變，元素本身相對文件流的位置進行偏移 absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上...

CSS 元素的定位

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動 參見第13課 你將能夠建立多種高階而精確的布局。本課我們將討論以下內容 把瀏覽器視窗想象成乙個座標系統 如果我們要把這個標題放置在距文件頂部100畫素 左邊200畫素的地方，我們可以在css中輸入以下 h1 得到的顯示效...