HTML、CSS筆記

盒模型

在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊 與 內容邊。

• 在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
• 在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

外邊距合併

塊的頂部外邊距和底部外邊距有時被組合(摺疊)爲單個外邊距，這種行爲稱爲外邊距塌陷(margin collapsing)，有的地方翻譯爲外邊距合併。

• 相鄰的兄弟元素：相鄰的兩個兄弟元素之間的外邊距會塌陷。
• 塊級父元素與其第一個/最後一個子元素：若是塊級父元素中，上邊框寬度及上內邊距距離爲0時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合併現象。
• 空塊元素：若是存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那麼此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合並。

BFC

它決定了塊級元素如何對它的內容進行佈局，以及與其餘元素的關係和相互關係
建立BFC的方式以下：

• 根元素或其它包含它的元素（html標籤）
• 浮動元素 (元素的 float 不是 none)
• 絕對定位元素 (元素的 position 爲 absolute 或 fixed)
• 內聯塊 (元素具備 display: inline-block)
• 表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
• overflow 值不爲 visible 的塊元素
• 彈性項 (display: flex 或 inline-flex元素的子元素)
• 網格項 (display: grid 或 inline-grid 元素的子元素)

BFC做用

水平居中

子元素爲行內元素仍是塊狀元素，寬度必定仍是寬度未定，採起的佈局方案不一樣。

子元素爲

行內元素：對父元素設置text-align:center;
定寬塊狀元素: 設置左右margin值爲auto;
不定寬塊狀元素: 設置子元素爲display:inline,而後在父元素上設置text-align:center;
通用方案: flex佈局，對父元素設置display:flex;justify-content:center;

垂直居中

垂直居中對於子元素是單行內聯文本、多行內聯文本以及塊狀元素採用的方案是不一樣的。
父元素必定，子元素爲單行內聯文本：設置父元素的height等於行高line-height
父元素必定，子元素爲多行內聯文本：設置父元素的display:table-cell，再設置vertical-align:middle;
塊狀元素:設置子元素position:absolute 並設置top、bottom爲0，父元素要設置定位爲static之外的值，margin:auto;
通用方案: flex佈局，給父元素設置{display:flex; align-items:center;}。

聖盃佈局和雙飛翼佈局

聖盃雙飛翼

FLEX佈局

flex

grid佈局

連接描述
CSS Grid 佈局徹底指南(圖解 Grid 詳細教程)
如何使用 CSS Grid 快速而又靈活的佈局

各類像素單位

設備像素，設備獨立像素，CSS像素

session，cookie，localStorage，sessionStorage

淺談session,cookie,sessionStorage,localStorage的區別及應用場景

transform、transition和animation

CSS3中動畫屬性transform、transition和animation