整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前在項目的過程中遇到了一個問題，某個 div 希望始終顯示在最上面，而在之后的元素都顯示在它之下，當時設置了 z-index 也沒有效果，不知道什么原因，因此找了一下 CSS 相關資料，解決了這個問題的同時，也學習了很多知識，特此和大家分享一下。
屏幕是一個二維平面，然而 HTML 元素卻是排列在三維坐標系中， x 為水平方向， y 為垂直方向， z為屏幕由內向外方向，我們在看屏幕的時候是沿著 z 軸方向從外向內的。由此，元素在用戶視角就形成了層疊的關系，某個元素可能覆蓋了其他元素也可能被其他元素覆蓋；
這里有幾個重要的概念：層疊上下文 (堆疊上下文, Stacking Context)、層疊等級 (層疊水平, Stacking Level)、層疊順序 (層疊次序, 堆疊順序, Stacking Order)、z-index、BFC（塊級格式化上下文，Block Formatting Context），這些概念共同決定了你看到元素的位置，下面我們就圍繞著這幾個概念來一起學習一下。
聲明：
1. 層疊上下文 (Stacking Context)
層疊上下文 (堆疊上下文, Stacking Context)，是 HTML 中一個三維的概念。在 CSS2.1 規范中，每個元素的位置是三維的，當元素發生層疊，這時它可能覆蓋了其他元素或者被其他元素覆蓋；排在 z 軸越靠上的位置，距離屏幕觀察者越近。
文章 <關于z-index 那些你不知道的事> 有一個很好的比喻，這里引用一下；
可以想象一張桌子，上面有一堆物品，這張桌子就代表著一個層疊上下文。如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另一個層疊上下文。現在想象在第一張桌子上有四個小方塊，他們都直接放在桌子上。在這四個小方塊之上有一片玻璃，而在玻璃片上有一盤水果。這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中一個不同的層疊層，而這個層疊上下文就是桌子。
每一個網頁都像一個房間，這個房間就是 <html></html>，其他層疊上下文就像這個房間里的桌子，HTML 標簽中的一切都被置于這個房間中。
當給一個元素的 position 值賦為 fixed 或 sticky 值時，你就創建了一個新的層疊上下文，其中有著獨立于頁面上其他層疊上下文和層疊層的層疊層，這就相當于你把另一張桌子帶到了房間里。
層疊上下文 1 (Stacking Context 1)是由文檔根元素形成的， 層疊上下文 2 和 3 (Stacking Context 2, 3) 都是層疊上下文 1 (Stacking Context 1) 上的層疊層。他們各自也都形成了新的層疊上下文，其中包含著新的層疊上下文。
在層疊上下文中，其子元素按照上面解釋的規則進行層疊。形成層疊上下文的方法有：
總結:
2. 層疊等級 (Stacking Level)
層疊等級 (層疊水平, Stacking Level) 決定了在同一個層疊上下文中，元素在 z 軸上的顯示的順序；
對于普通元素的層疊水平探討只局限于在當前層疊上下文中：
層疊上下文本身是一個強力的「層疊結界」，普通的元素水平是無法突破這個結界和結界外的元素去較量層疊水平的。
— CSS 世界
另外，層疊等級并不一定由 z-index 決定，只有定位元素的層疊等級才由 z-index 決定，其他類型元素的層疊等級由層疊順序、他們在 HTML 中出現的順序、他們的祖先元素的層疊等級一同決定，詳細的規則見下面層疊順序的介紹。
3. z-index
在 CSS 2.1 中, 所有的盒模型元素都處于三維坐標系中。除了我們常用的橫坐標和縱坐標， 盒模型元素還可以沿著「z 軸」層疊擺放，當他們相互覆蓋時，z 軸順序就變得十分重要。
-- CSS 2.1 Section 9.9.1 - Layered presentation
z-index 只適用于定位的元素，對非定位元素無效，它可以被設置為正整數、負整數、 0、 auto，如果一個定位元素沒有設置 z-index，那么默認為 auto；
元素的 z-index 值只在同一個層疊上下文中有意義。如果父級層疊上下文的層疊等級低于另一個層疊上下文的，那么它 z-index 設的再高也沒用。所以如果你遇到 z-index 值設了很大，但是不起作用的話，就去看看它的父級層疊上下文是否被其他層疊上下文蓋住了。
4. 層疊順序 (Stacking Order)
層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個層疊上下文中的順序規則（之前的層疊上下文和層疊等級是概念），從層疊的底部開始，共有七種層疊順序：
第 7 級順序的元素會顯示在之前順序元素的上方，也就是看起來覆蓋了更低級的元素：
除層疊順序優先級規則之外，還有一條后來居上規則：同一個層疊順序的元素按照在 HTML 里出現的順序依次層疊。這兩個規則共同決定瀏覽器元素在文檔中是如何層疊的。
5. 文檔流 (Document Flow)
5.1 常規流 (Normal flow)
5.2 浮動 (Floats)
5.3 絕對定位 (Absolute positioning)
6. BFC （Block Formatting Context）
6.1 什么是 BFC
BFC (Block Formatting Context) 塊級格式化上下文，是用于布局塊級盒子的一塊渲染區域，相對應的還有 IFC（Inline Formatting Context）內聯格式化上下文，不是本文重點，讀者可以自行查閱相關知識。
BFC 是 Web 頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區域。
— MDN - 塊格式化上下文
一個 BFC 的范圍包含創建該上下文元素的所有子元素，但不包括創建了新 BFC 的子元素的內部元素。這從另一方角度說明，一個元素不能同時存在于兩個 BFC 中。因為如果一個元素能夠同時處于兩個 BFC 中，那么就意味著這個元素能與兩個 BFC 中的元素發生作用，就違反了 BFC 的隔離作用。
觸發 BFC 的方式有：
注意： display:table 也可以生成 BFC 的原因在于 Table 會默認生成一個匿名的 table-cell，是這個匿名的 table-cell 生成了 BFC。
6.2 用法
1. 阻止相鄰元素的 margin 合并
屬于同一個 BFC 的兩個相鄰塊級子元素的上下 margin 會發生重疊，(設置 writing-mode:tb-rl時，水平 margin 會發生重疊)。所以當兩個相鄰塊級子元素分屬于不同的 BFC 時可以阻止 margin 重疊。可以給任一個相鄰塊級盒子的外面包一個 div，通過改變此 div 的屬性使兩個原盒子分屬于兩個不同的 BFC，以此來阻止 margin 重疊。
代碼和預覽參見：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN
2. 阻止元素被浮動元素覆蓋
一個正常文檔流的塊級元素可能被一個 float 元素覆蓋，擠占正常文檔流，因此可以設置一個元素的 float、 display、 position 值等方式觸發 BFC，以阻止被浮動盒子覆蓋。
代碼和預覽參見：Codepen - 使用BFC阻止元素被浮動元素覆蓋：https://codepen.io/SHERlocked93/pen/pazdzB
3. 包含浮動元素
通過改變包含浮動子元素的父盒子的屬性值，觸發 BFC，以此來包含子元素的浮動盒子。
代碼和預覽參見：Codepen - 使用BFC包含浮動元素：https://codepen.io/SHERlocked93/pen/OQLOqG
7. 實戰
下面一起來看幾個例子實戰一下，幫助理解。
7.1 普通情況
三個 relative 定位的 div 塊中各有 absolute 的不同顏色的 span.red、 span.green、 span.blue，它們都設置了 position:absolute；
代碼和預覽參見：Codepen - 普通情況：https://codepen.io/SHERlocked93/pen/aaPord
那么當沒有元素包含 z-index 屬性時，這個例子中的元素按照如下順序層疊（從底到頂順序）：
紅綠藍都屬于 z-index 為 auto 的定位元素，因此按照 7 層層疊順序規則來說同屬于層疊順序第 6 級，所以按 HTML 中的出現順序層疊：紅->綠->藍
7.2 在相同層疊上下文的父元素內的情況
紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute， first-box 與 second-box 都設置了 position:relative；
代碼和預覽參見：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw
這個例子中，紅藍綠元素的父元素 first-box 與 second-box 都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素，且都是層疊順序第 6 級，所以按 HTML 中的出現順序層疊：紅->綠->藍
7.3 給子元素增加 z-index
紅綠位于一個 div.first-box 下，藍黃位于 div.second-box 下，紅綠藍都設置了 position:absolute，如果這時給綠加一個屬性 z-index:1，那么此時 .green 位于最上面；
如果再在 .second-box 下 .green 后加一個絕對定位的 span.gold，設置 z-index:-1，那么它將位于紅綠藍的下面；
代碼和預覽參見：Codepen - 設置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK
這個例子中，紅藍綠黃元素的父元素中都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素
所以這個例子中的從底到高顯示的順序就是：黃->紅->藍->綠
7.4 在不同層疊上下文的父元素內的情況
紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute，如果 first-box 的 z-index 設置的比 second-box 的大，那么此時無論藍的 z-index 設置的多大 z-index:999，藍都位于紅綠的下面；如果我們只更改紅綠的 z-index 值，由于這兩個元素都在父元素 first-box 產生的層疊上下文中，此時誰的 z-index 值大，誰在上面；
代碼和預覽參見：Codepen - 不同層疊上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ
這個例子中，紅綠藍都屬于設置了 z-index 的定位元素，不過他們的父元素創建了新的層疊上下文；
所以這個例子中從低到到顯示的順序：藍->紅->綠
(我遇到的的情況就屬于這個例子類似情形)
7.5 給子元素設置 opacity
紅綠位于 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute，綠設置了 z-index:1，那么此時綠位于紅藍的最上面；
如果此時給 first-box 設置 opacity:.99，這時無論紅綠的 z-index 設置的多大 z-index:999，藍都位于紅綠的上面；
如果再在 .second-box 下 .green 后加一個 span.gold，設置 z-index:-1，那么它將位于紅綠藍的下面；
代碼和預覽參見：Codepen - opacity的影響：https://codepen.io/SHERlocked93/pen/GXPRWB
之前已經介紹了，設置 opacity 也可以形成層疊上下文，因此：
所以這個例子中從低到到顯示的順序：黃->紅->綠->藍
關注微信公眾號：安徽思恒信息科技有限公司,了解更多技術內容……
德經第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導致自身的混亂。結合我親身經歷，更容易理解這句話的意思。
有一段時間，我們天都學習10個小時，這種情況一直持續了大半個月。可是效果卻幾乎等于沒有，這段時間內每天都會有大量的信息涌入你的腦袋，在學的那一刻，你感覺你已經完全會了。但是過個一兩天，你卻完全不記得你到底學過些什么，像失憶了似的。
艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復練習。直到隨時隨地拿來就用的地步，你就再也不會忘記了。
為什么說少則得，多則惑呢？每天只學一點，練習好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發現你已經學會了很多。每天學習很多知識點，很少時間去練習，過段時間你會發現你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學習一遍。徒增學習成本，也就是多則惑的道理。
好了言歸正傳，今天我們來學習html中的表格和表單，這兩個可不是一個東西哦。
表格：excel表格知道吧，橫行豎起列的那種表格。看圖：
上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標簽來實現一個5行3列的表格。
上圖中table標簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。
在瀏覽器中的效果：
和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設置的緣故，table標簽允許你通過border屬性來設置邊框（也就是格子），那我們來給它設置一個邊框吧。
通過給table標簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：
還是有點別扭，我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標簽的cellspacing屬性把距離去掉，試一下：
加了cellspacing="0" 屬性后，瀏覽器中的效果如下：
當然了， table標簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設置成20試一下：
瀏覽器中的效果：
cellspacing屬性的值應該取多少，按照你的需求來設置就好了。
現在還有一個問題，我覺得每個單元格的太小了，也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置，其實也就是設置內邊距，關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過，如果忘記的同學可以返回去看一下。
我們將cellpadding設置為10，在瀏覽器中的效果如下：
現在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標簽允許你調整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度：
調整表格的寬度為600，瀏覽器中的效果如下：
表格中的文字現在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標簽的align屬性來控制：
注意文字對齊方式，是給tr標簽（也就是table的行標簽）設置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認是左對齊。
設置了文字對齊方式后，瀏覽器中的效果如下：
最我們整體調整一下，我需要有邊框（border="1"，設置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設置成其它值就是有距離），內邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統一都是居中對齊（table標簽的tr標簽上面設置align="center"）,整體設置后的代碼如下：
瀏覽器中的效果如下：
其實table標簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學可以自己嘗試一下。
最后提醒一句，代碼中的各種標簽和標簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。
舉個例子：
良好的行動力，是成功的一半，動手練起來。
篇中我們介紹了文本的一些樣式，這篇接著講文本樣式。
6.文本下劃線
一般文本下劃線都用在什么地方呢？我想到一個就是畫重點考前劃重點，有沒有畫面感，^v^。
用css來實現劃重點，也是別具風格呀。
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
</p>
</body>
</html>text-decoration可以給文本設置下劃線，上劃線，刪除線，取消線。
上面代碼實現效果如下：
這個效果看起來兩行之間的距離有點擁擠，我們可以調整的它們的距離，稍微遠一點，讓它們看起不那么擁擠。
7.文本的行間距
用line-height來指定行間距，因為文本都包含在p標簽中，所以我們給p標簽加了行間距為50px
調整后的效果如下：
看起來下劃線的文字還是不夠顯眼啊，我們再給它加點顏色上去，會更好。
這回好多了。夠顯眼，就絕對記得住。
text-decoration后面可以設置的值如下：
值 | 說明 |
none | 讓本身有劃線裝飾的文本取消掉 |
underline | 讓文本的底部出現一條下劃線 |
overline | 讓文本的頭部出現一條上劃線 |
line-through | 讓文本的中部出現一條刪除線 |
blink | 讓文本進行閃爍，基本不支持了 |
text-decoration：none這個會讓本身有劃線裝飾的文本取消掉的意思，例如a標簽，天生就帶下劃線，那要不想要自帶的下劃線就可以利用這個樣式給它去掉。
來嘗試一下
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
</p>
</body>
</html>百度兩個字下面天生就帶了下換線，要去掉請使用text-decoration：none
其余幾個大家可以自己動手嘗試一下效果。
8.設置英文文本轉換為大小寫
這個標題很好理解，就是專門針對英文的，如果想把英文文本轉換大小寫可以使用
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<span class="english">
no zuo no die you why cry
<br>
you zuo you die don't ask why
</span>
</p>
</body>
</html>頁面效果如下：
這里的英文文本也是寫在了span標簽里面，受span標簽樣式的影響這里也變成了紅色，也加了下劃線。我們給它取消掉這些樣式。并給它設置讓英文單詞首字母變成大寫的樣式。
下面給出text-transform的值和作用的表格，大家可以自行動手嘗試效果。
值 | 說明 |
none | 將已被轉換大小寫的值恢復到默認狀態 |
capitalize | 將英文單詞首字母大寫 |
uppercase | 將英文轉換為大寫字母 |
lowercase | 將英文轉換為小寫字母 |
9.文本添加陰影
text-shadow:5px 5px 5px red;
這里有四個值（3個5px和一個red）：第一個值代表水平偏移；第二個值代表垂直偏移；第三個值代表陰影模糊度（可選）；第四個值代表陰影顏色（可選）。
10.設置文本的對齊方式
我們可以設置文本的對齊方式，如果你用過word文檔的話，那一定知道左對齊、右對齊、居中對齊。css里面同樣有
我們來嘗試一下居中對齊
值 | 說明 |
left | 靠左對齊，默認 |
right | 靠右對齊 |
center | 居中對齊 |
justify | 內容兩端對齊 |
start | 讓文本處于開始的邊界 |
end | 讓文本處于結束的邊界 |
start和end屬于css3新增的功能，IE和Opera瀏覽器可能不支持。
11.處理文本之間的距離（letter-spacing）
也就是兩個字間的距離，通過例子來感受一下
很明顯的可以看到字間距變大了。
12.設置英文單詞之間的距離（word-spacing）
13.文本首行的縮進（text-indent）
一般每個段落的首行都要縮進，這是書寫書信文件時的規定。
我們去掉了居中對齊的樣式，是為了更好地演示首行縮進的效果。
看效果圖紅框的地方，明顯有縮進。
好了，以上就是今天的內容了。
希望大家可以早日學會編程，踏上高薪之路，早日成為白富美、高富帥。動手練，聽我的沒錯。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
