html 元素 分為 塊狀元素 和 內聯元素
塊狀元素指的是在水平流上面一行展示的元素，常用的有 div, li 和 table
內聯元素的顯示，為了幫助理解，可以形象的稱為「文字模式」，即乙個挨著乙個，都在同一行按從左至右的順序顯示，不單獨佔一行，常見的有 span，label
盒模型 分為 border-box, margin-box, padding-box, content-box
預設 width，height 作用在 content-box
box-sizing 屬性可以改變 width，height 作用的盒模型
*內聯盒子 指的是元素的「外在盒子」
行框盒子 每一行就是乙個行框盒子
包含盒子 由一行一行的盒子組成
名叫strut存在每乙個 行框盒子 前面，同時具有該元素的字型和行高屬性的 0 寬度的內聯盒
文字的 baseline 基線對應的就是字型 x 的下邊緣
文字的行高是 line-height 數字控制的，line-height 設定為 1.5 等數值，表示 1.5* font-size 的高度
每行文字之間，為了便於美觀，會存在 半行距的 概念，即 (line-height - font-size)/2
表示文字的對齊方式
baseline，middle 是正對 字型 x 的 下邊緣或者中部 對其
top，bottom 正對當前 行框盒子 的 頂部或者底部 對其
div 設定寬度和 float 會 打破流模型，建議不要使用
當為設定 定位的時候 元素都是在當前位置顯示
包含塊是元素用來計算和定位的乙個框，明確定義如下
根元素(很多場景可以認為 html)被成為"初始包含塊"，其尺寸等同於瀏覽器可視視窗的大小
對於其他元素，如果該元素的 position 是 relative 或者 static，則 包含塊 由其最近的塊容器的祖先盒的 content-box 邊界決定
如果元素 position:fixed, 則 包含塊 是 初始包含塊
如果元素 position:absolute，則 包含快 由最近的 position 不是 static 的祖先元素建立，如果改 包含塊 是 存 inline 元素，1. 如果內聯元素被跨行分割，則屬於未定義行為，由瀏覽器實現，2. 否則，則是相當於在內聯盒子兩側各有乙個寬度為 0 的盒子，該兩個盒子 padding-box 的外包圍盒就是內聯元素的包含塊，否則 包含快 由該祖先的 padding-box 邊界形成
由內而外分別為
層疊上下文 backgroud/border
負 z-index
block 塊狀水平盒子
float 浮動盒子
inline 水平盒子
z-index:auto 或者 z-index:0
正 z-index
準則誰大誰上
後來居上
層疊上下文的建立
天生派： 根元素 自有層疊上下文
正統派： z-index 設定數值的元素，建立新的層疊上下文
擴招派： 其他 css3 屬性會建立
@font-facedisplay
visibility
clip
z-index
opacity
《CSS世界》讀書筆記
css三無準則 無寬度 充分利用流特性 無浮動 無 無寬度與寬度分離分離準則相通 瀏覽器相容 區別 ie8僅支援單冒號的偽元素 如 element before 常用清楚浮動方式 清楚浮動 clearfix.clearfix after 需求 頁面某模組的文字內容是動態的，希望文字少的時候居中顯示，...
《css世界》的讀書筆記
1.等元素在使用鍵盤進行tab鍵切換時可以被選中，即獲取到焦點，表現為虛框或者外發光，這類元素為焦點元素 非焦點元素 等沒有設定tabindex屬性，即無法被tab鍵獲取。在ie6 7瀏覽器下，非焦點元素對 active置若罔聞。這裡涉及到ie6，7的相容性 2.ie瀏覽器不支援 偽元素的 disp...
《CSS世界》讀書筆記（七）
根據是否具有可替換內容，我們可以把元素分為替換元素和非替換元素。或表單元素和都是典型的替換元素。1 內容的外觀不受頁面上的css的影響。用專業的話講就是樣式表現在css作用域之外。例如 直接 input type checkbox 無法更改內間距 背景色等樣式，需要用瀏覽器自身暴露的一些樣式介面，例...