css布局屬性（重點！！！）

（重點）position定位屬性：

relative相對定位特點是：

相對於遊覽最上邊的左上角或者右上角來定位，但是**不會讓出原位置**，除非浮動後，才會讓出原位置；

absolute絕對定位特點：

這個有兩種情況：

情況1：看他是否有脫離文件流（浮動或相對定位）的父元素，有的話就以他的父元素來定位，情況2：如果沒有那麼就以遊覽器最上邊的左上角或者右上角來定位，讓出原位置

（這兩種常用，要求必須完全掌握！！！）

fixed固定定位：

通過定位可以將其定位在上下左右角任意乙個地方，無論網頁上下左右如何滑動，他的位置不變，是以我們的電腦螢幕來定位的。 static(預設)：預設文件流，靠margin來定位,忽略 top, bottom, left, right 或者 z-index 宣告。 top上，bottom下，left左，right右

舉例說明：

相對：

type="text/css">
h2.pos_abs
style>
head>
class="pos_abs">這是帶有絕對定位的標題h2>
通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。p>
body>
html>

絕對：

type="text/css">
h2.pos_left
h2.pos_right
style>
head>
這是位於正常位置的標題h2>
class="pos_left">這個標題相對於其正常位置向左移動h2>
class="pos_right">這個標題相對於其正常位置向右移動h2>
相對定位會按照元素的原始位置對該元素進行移動。p>
樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。p>
樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。p>
body>
html>

固定：

type="text/css">
p.one
p.two
style>
head>
class="one">一些文字。p>
class="two">更多的文字。p>
body>
html>

浮動屬性：

float： none left right

float屬性定義元素在哪個方向浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止

不論是行內元素還是塊元素只要設定了float屬性，就可以用width、height設定寬高

（重點來了！！！每寫完一層浮動後的**要脫離浮動！！！不然會影響下面寫的**！！！）

清除浮動：

clear:規定元素的哪一側不允許其他浮動元素

none:預設值。允許浮動元素出現在兩側

left:在左側不允許浮動元素

right:在右側不允許浮動元素

both:在左右兩側均不允許浮動元素

（可以寫在css檔案中，那層需要可以在html裡面引用就可以了）

堆疊屬性：

z-index 數字越大，離瀏覽者越近只針對脫離文件流的元素生效

可見性屬性：

visibility:hidden visibility屬性指定乙個元素應可見還是隱藏 visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間 visibility:visible 預設值，元素是可見的

顯示屬性：

display display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間 display:visible可以顯示某個元素，預設就是visible

塊級元素與行級元素：

塊級標籤：顯示為「塊」狀，獨佔一行

不管內容多少都會佔據一整行具有寬度和高度，可以通過width、height屬性設定寬高

行級標籤：在一行內按照先後順序顯示

只佔據顯示自己內容的寬度，不會佔據整行不能通過width、height屬性設定寬高如果設定了float屬性，就可以設定寬高

inline-block:不會佔據整行，但可以通過width、height設定寬高

例如：，按鈕，單核取方塊，單行/多行文字框等

可以通display屬性相互轉換：

display:block/inline/inline-block

溢位屬性：

overflow |overflow-x |overflow-y
visible(預設允許溢位)
hidden
scroll
auto

使用盒子模型的浮動布局：

雖然使用絕對定位可以實現頁面布局，但由於調整某個區塊框時其它區塊的位置並不會跟隨著改變，所以並不是布局的首選方式。而使用浮動的區塊框可以向左或向右移動，直到它的外邊緣碰到包含它區塊的邊框或另乙個浮動框的邊框為止。並且由於浮動框不在文件的普通流中，所以文件的普通流中的區塊框表現得就像浮動框不存在一樣。

使用盒子模型設計頁面布局：

8.1 區塊居中設計 8.2 設定兩列浮動的布局 8.3 設定三列浮動的布局 8.4 設定多列浮動的布局

css布局屬性（重點！！！）

CSS布局屬性

CSS的布局屬性

Css布局屬性詳解

css布局屬性（重點！！！）

CSS布局屬性

CSS的布局屬性

Css布局屬性詳解

相關推薦