一.標籤轉換：
html中所有標籤都是可以通用的，分為行級標籤、行內塊級標籤、塊級標籤
1.行級標籤：本身不具有寬高，不換行，即使設定了寬度也不生效
解決方法：如果要設定寬高，可以將行級標籤轉換為行內塊級標籤或者塊級標籤
display: inline-block轉換為行內塊級標籤，不換行
display: block轉換為塊級標籤，會換行
2.行內塊級標籤：本身具有寬高，不換行
解決方法：如果要換行，可以將行內塊級標籤轉換為塊級標籤
display: block轉換為塊級標籤，會換行
display:inline轉換為行級標籤，不會換行
3.塊級標籤：本身具有寬高，並且會換行
解決方法：如果要設定不換行，可以將塊級標籤轉換為行級標籤或者行內塊級標籤
display: inline轉換為行級標籤，無寬高，不會換行
display: inline-block 轉換為行內塊級標籤，有寬高，不會換行
二.顯示與隱藏：
1.display
例：display: none 隱藏，隱藏後不占有空間 display: block 顯示
2.visibility
例：visibility:hidden 隱藏，隱藏後依然占有空間
3.overflow
例：overflow: none 只有超出的時候才隱藏
三.定位：
定位分為相對定位(relative)、絕對定位(absolute)、固定定位(fixed)
1.相對定位(relative)：物件遵循標準文件流，並且參照自身所在的文件流位置通過top，right，bottom，left四個偏移量來設定對應的位置（一般使用兩個偏移量來確定位置），占有空間。數值的計算法從自身的位置開始。
2.絕對定位(absolute)：不占有空間，物件脫離了文件流。此時偏移量屬性參照離自身最近的定位父標籤來設定對應的位置，如果一直沒有找到定位的父標籤，最後就以瀏覽器視窗（document）來設定對應的位置。
3.固定定位(fixed)：就是把標籤元素固定在頁面的某乙個位置。 物件脫離了文件流，此時物件是以瀏覽器視窗來設定偏移量。ie6它不支援固定定位。
三大定位的特性：
1.relative a)不影響標籤自身特性 b)標籤不脫離文件流,依然會占有原來的位置 c)提公升層級
2.absolute a）標籤會脫離文件流 b)內容撐開寬高 c)支援所有css樣式 d)提公升層級 e)它最好和相對定位配合使用 f)如果有定位的父標籤，就針對父標籤來設定偏移量，如果第乙個父標籤沒有定位，那就找父標籤的父標籤，如果找著了，就以該父標籤來設定偏移，如果一直都未找到，最終就以視窗來設定偏移量，父標籤的定位不一定是相對定位，也可以是絕對定位。g)如果絕對定位標籤下的子標籤有浮動，就可以不用bfc（清除浮動）。
3.fixed a) ie6不相容 b)就是針對視窗設定偏移量，雖然標籤中是巢狀關係，實際上它們互不影響。c) g)如果固定定位標籤下的子標籤有浮動，就可以不用bfc（清除浮動）
四.標籤層級：
z-index 數字（可以正數 或負數）
比較方法：
1.當定位的標籤都沒有給z-index時，那就按照後寫的在上面；
2.當z-index的值相同時，就看哪個標籤寫在後面，誰就在上面
3.誰的z-index值越大，誰就在前面，和標籤書寫順序沒有關係
注意點：
z-index必須和有定位的標籤使用，就是有position樣式時才可以使用z-index，其他情況都沒有效。
例：1.
2.
lang
="en"
>
3.
26.
27.
class
="one"
>
28.
class
="two"
>
29.
30.
（2）通過XPath位址定位標籤
xpath是一門在xml文件中查詢資訊的語言。xpath可用來在xml文件中對元素和屬性進行遍歷。xpath是w3c xslt標準的主要元素，並且xquery和xpointer都構建於xpath表達之上。xpath在python的爬蟲學習中，起著舉足輕重的作用，對比正規表示式re，兩者可以完成同樣的...
將同層級的h1 h6標籤轉為不同層級關係的列表
昨天晚上寫隨筆時對的文章目錄產生了好奇心，原本同級的標題標籤是怎麼轉化為不同層級關係的列表呢？對此我展開了思考，終於，在今天早上按照自己的想法將轉化的邏輯寫了出來。文章目錄圖 問題分析 要對乙個元素進行操作，就要先獲取元素。既然每種標籤對應不同層級那麼先用列舉法將它們的權重乙個個列舉出來。最後比較標...
css Position定位屬性與層級關係
今天同事發現乙個有意思的問題，關於position的層級關係的，他要不說我也沒注意過 測試後果然有趣，有待深入研究 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title css中position定位屬性與層級關係 title 6 styl...