有關布局和定位的屬性

有關布局的屬性

布局與定位屬性，主要是用來确定一個頁面上的各個盒子（幾乎所有标簽都是盒子）怎麼排布，以及怎麼固定在頁面所要求的區域和位置。

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軸方向的“疊放層次”的高低，用整數表示。越大值表示越高，也就是離眼睛越近，自然就會覆寫住比它低的其他盒子。