佈局與定位屬性，主要是用來確定一個頁面上的各個盒子（幾乎所有標籤都是盒子）怎麼排布，以及怎麼固定在頁面所要求的區域和位置。
6.1 佈局屬性
6.1.1 盒子的顯示效果屬性 display
含義：
指設置一個盒子（元素，標籤）在網頁中的基本顯示特性，最常見的就是顯示爲塊元素特性還是行內元素特性。
tip：通過這個屬性，則所有表現型元素，都可以任意將其作爲塊元素或者行內元素來使用！
常用的屬性值有：
block： 顯示爲塊狀元素
inline： 顯示爲行內元素
block-inline：顯示爲行內塊元素
含義：整體表現爲塊元素(不會自動折行)，但可以跟其他行內元素並行在一行(表現爲行內元素)。
說明：一個img就是典型的行內塊元素（它本身不會折行，但一行可以放置多個）。
none：不顯示（隱藏元素）
關於元素按顯示特性分類：
塊狀元素：
元素獨佔“一行”。
典型標籤：div, p, h1~h6, pre, hr, ul, ol, li, dl, dt, dd, table。
行內元素：
元素在一行內從左到右“流式顯示”，直到碰到行尾，再自動換行下一行顯示。
典型元素：span, a, b, strong, i, font, em,
行內塊元素：
元素本身不換行（不折斷），但只要能顯示得下，則一行可以顯示多個（跟行內元素一樣）。
典型元素：img, input, select, textarea, button, video, audio
特別注意：
1，行內元素不能設置寬高值。行內元素的寬高值由其中的內容多少、文字大小和行高決定。
2，行內元素不能設置上下外邊距和上下內邊距（實際可以設置，但無效，不佔空間）。
3，行內元素可以設置邊框，但上下邊框不佔空間（左右邊框會佔空間）。
4，行內塊和塊元素都具有盒子的所有屬性，唯一區別是行內塊可以多個出現在一行中。
6.1.2 浮動特性 float
浮動就是讓一個元素往左或右邊“儘量擠靠”，以使其周邊文字（行內元素）可以圍繞該浮動元素顯示。
其典型的表現就是一張圖片向左對齊（align=”left”）的時候，圖片標籤前後的文字都能夠繞着圖片展示。
浮動屬性float的值包括：
left（向左浮動）， right（向右浮動）， none（不浮動）。
語法： float：left； 或 float：right；
6.1.2.1 浮動的特性
1，對行內元素來說：浮動元素會先於同一行中的行內元素而佔據其所設定方向的水平空間；
2，對塊狀元素來說：浮動元素相當於“浮起來了”，塊狀元素會被浮動元素“遮擋”；
3，多個浮動元素會依次往設定的方向“擠靠”，直到放不下，再往“下一行”，繼續“擠靠”；
4，浮動元素往下一行擠靠時，如碰到“突出物”，則會被“卡住”，但仍然按擠靠規則進行顯示；
5，浮動盒子失去“垂直支撐力”，表現爲不佔它外層盒子高度，但仍然有寬度；
6.1.2.2 浮動的清除
當一個盒子內部出現浮動元素，則該盒子不會被該浮動元素“撐高”，也就是說，父盒子失去了理應包住子盒子的高度。
（當然，如果父盒子中有其他非浮動元素撐着，也就具有該其他非浮動元素所應該撐出的高度）
這通常都不符合正常的文檔佈局的需要——正常的需要就是外層盒子需要包住內層盒子。
怎麼辦？
——清除浮動。
使用屬性clear，有常見的3個值：
clear: left:表示該元素左邊不要出現浮動元素；
clear: right：表示該元素右邊不要出現浮動元素；
clear:both：表示該元素兩邊都不要出現浮動元素；——這是最常見的需求（場景）。
所謂清除浮動，其實就是讓父盒子中的浮動特性“終止”（結束）。這樣父盒子就具有了正常的高度，可以正常包住其內部的浮動盒子。
做法1： 設置父盒子的overflow屬性爲hidden；
做法2： 在父盒子內部的末尾添加一個“清除浮動”的空盒子。
做法3： 給父盒子的末尾添加一個“清除浮動”的僞元素（:: after）。 ——推薦做法！
6.1.3 溢出浮動 overflow
當一個盒子裏面有浮動元素，則：
1，如果該盒子不設置高度，就應該清除浮動。
2，如果該盒子設置了高度，此時就應該考慮溢出時的處理效果！
3，如果該盒子設置了高度，則裏面盒子的浮動，清不清除都無關緊要。
含義：
就是設置一個盒子內部的內容，超出了該盒子的設定大小的時候，怎麼顯示該內容的問題。
overflow常用值有：
auto： 自動，按瀏覽器的默認設置自動處理，可能各瀏覽器會有所不同。
scroll： 滾動，就是超出範圍的時候，盒子出現滾動條（像瀏覽器的滾動條那樣）。
hidden： 隱藏，就是將超出部分隱藏起來（視覺上不可見）。
visible： 顯示，就是雖然，超出去了，但仍然顯示出來，這是這個屬性的默認值，無需設置。
此時，雖然可能超出外層盒子，但不會影響外層盒子後續的位置（佈局）。
6.1.4 可見性屬性 visibility
含義：設置元素的可見性。
主要有兩個值：① visible： 可見；
② hidden： 隱藏。
特別注意： 設置visibility爲hidden，雖然元素不可見了，但元素原本所佔的空間仍然存在（效果是一片空白）
對比：設置display爲none，也是隱藏，但此時該元素不但不可見，而且不佔版面空間。
定位屬性
定位就是通過有關定位的屬性來明確設定一個盒子的在以下兩個方面的位置：
1，在（x,y）平面上所處位置。
2，在高度（z軸）方向的位置（層次）。
這是相對於一個盒子的“自然位置”和“浮動位置”而言的。
自然位置就是所謂的正常的文檔流所確定的位置。
浮動位置就是由於浮動的特性而確定的位置。
6.2.1 定位方式屬性 position
position用於設定一個元素的位置按什麼方式來確定。
通俗說就是設定元素“放在哪個位置”（可由4個定位屬性確定：top，left, right, bottom）。
有如下4個值可用：
static： 靜態定位（其實就是沒有定位）
是一個元素的默認定位方式，也就是一個文檔中元素的正常文檔流所確定的定位。
對其給定定位位置（top，left, right, bottom）的值無效。
relative：相對定位
相對於其本來應該所處的位置而設定一個相對性定位。
需給定位置（top，left, right, bottom）
absolute：絕對定位
相對於其上層最近的一個非static定位元素而設定的一個絕對性定位。
需給定位置（top，left, right, bottom）；
而如果其所有上級都沒有非static 定位元素，就相對於窗口來定位——手冊上說的相對於body，是不準確的！
fixed： 固定定位
相對於當前網頁窗口而設定的一個絕對性定位。
需給定位置（top，left, right, bottom）。
注意：
1，relative定位雖然會改變元素的位置，但不影響上級盒子和相鄰盒子該有的正常寬高和位置。
2，absolute定位和fixed定位的元素脫離了文檔流，也就是上級盒子中不會計算其寬高（像沒有一樣）
6.2.2 定位位置的屬性 :top left right bottom
就是對於3種定位方式（relative， absolute， fixed），所給定的具體位置值。
可以是使用距離“上”，“左”，“下”，“右”各多少來定。
比如：
.cc1{ position: absolute; left: 5px; top: 10px; }
注意：top和bottom不能同時用；left和right不能同時用！
6.2.3 層疊屬性 z-index
含義： 就是將一個元素（盒子）默認情況下所展示在的那個平面（就是屏幕所在面）的垂直線當做z軸方向（就是眼睛盯屏幕時的那個“視線”方向），朝眼睛方向爲z軸的正方向。則z-index可以設定一個元素（盒子）在z軸方向的“疊放層次”的高低，用整數表示。越大值表示越高，也就是離眼睛越近，自然就會覆蓋住比它低的其他盒子。