分層div,css定位position,層疊上下文
一. div分層
接下來就使驗證div分層各元素位置，主要思路是重疊覆蓋
1.1 背景範圍是從哪到哪？背景顏色div在什麼位置
背景範圍是從border外邊沿圍成的區域。
思路
如何驗證呢？
可以通過設定邊框半透明來看
過程
**如下
>
... charset
="utf-8"
>
>
js bintitle
>
>
.demo
style
>
head
>
>
class
="demo"
>
內容div
>
body
>
通過開發者工具調邊框透明度1到0得到的效果如下
結論
紅色變透明，藍色顯現–》可以得出背景範圍是到border外邊沿圍成的區域結束，證明了background背景顏色在邊框boder的下面
1.2 那文字內容在什麼位置呢？
思路
從正面可以看出，內容是遮住了背景顏色，內容在background之上，那內容是不是在邊框之上呢?
可以通過**來驗證。
過程
在上面**基礎上再在div裡加上span元素( 內容),再給其設定字型變大的樣式(.text)。
具體**可以檢視
可以看出效果如下
結論
從圖里可以看出內容遮住了邊框–》故內容在邊框之上
1.3 那塊級子元素在什麼位置呢？
思路
通過新增塊級子元素，使它和比較物件重疊
過程
還是通過**驗證下
>
...>
.demo
.childdiv
style
>
head
>
>
class
="demo"
>
我是文字內容
class
="childdiv"
>
div>
div>
body
>
結論
可以看出塊級子元素白色div在父div背景之上–》得出塊級子元素在background之上。
有可以看出父div文字內容蓋住了白色div–》可以得出文字內容即內聯子元素在塊級子元素之上
1.4 那浮動元素又在什麼位置呢？
思路
在父div裡新增綠色左浮div，並設定右外邊距為-20px，使其和文字重疊。
過程
**如下
>
... >
.demo
.childdiv
.float
style
>
head
>
>
class
="demo"
>
我是文字內容
class
="float"
>
div>
class
="childdiv"
>
div>
div>
body
>
效果圖如下
結論
可以看出綠色浮動元素蓋住了白色不浮動元素–》得出浮動元素在塊級子元素的上面。
可以看出文字蓋住了綠色浮動元素–》得出內聯子元素在浮動元素的上面
css 入門筆記
知識一 巢狀選擇器 知識二 display 顯示 與 visibility 可見性 1.隱藏元素 display none或visibility hidden 2.display 塊和內聯元素 3.如何改變乙個元素顯示 可以更改內聯元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，並仍...
CSS入門筆記
按照css樣式書寫的位置 或者引入方式 css樣式表可以分為三大類 行內樣式表 行內式 內部樣式表 嵌入式 外部樣式表 鏈結式 內部樣式表是寫到htnl頁面內部，將所有的css 抽取出來，單獨放到乙個標籤中。divstyle 行內樣式表是在元素標籤內部的style屬性中設定css樣式，適合於修改簡單...
CSS入門筆記02
塊級元素和行內元素 塊級元素 特點 1.總是從新行開始 2.高度 行高 外邊距 內邊距都可控制 3.預設寬度是容器的100 4.可容納內聯元素和其他塊元素 行內元素 特點 1.和相鄰行內元素在一行 2.寬 高無效，但水平方向padding和margin可以設定，垂直方向無效 3.預設寬度為本身內容寬...