css 的包含塊 、負外邊距，字型，文本行高

標籤：字型   塊元素   idt   play   ble   res   行內元素   水平對齊   包含   

一、包含塊
目的：確定元素的位置和相對大小（%）

1.正常文檔流元素和浮動元素 ---- 父元素的 content-box
2.絕對位置元素 ---- 父元素的 padding-box
3.固定定位元素 ---- 視口

二、負外邊距

document.documentElement.clientWidth; 視口寬度

window.onresize 監控視口改變

三、字型

字型簡寫：
當 line-height 書寫在 font 屬性上 ，會覆蓋 line-height 的值

字型大小：
預設是 16px
在Chrome 最小字型只能設定到 12px

字型族
襯線字型 筆畫起始位置有修飾，橫豎寬度不同
非襯線字型 筆畫起始位置沒有修飾，橫豎寬度相同

四、文本

水平對齊（text-algin）
設定在塊元素中（指定寬度）

讓塊元素中的文本，行內元素（內嵌元素 inline），行內塊（inline-block ,img input）一行的水平方向對齊。

行高

設定在塊元素中（指定寬度，高度）

當 行高 = 元素高度時，讓塊元素中的文本，行內元素（內嵌元素 inline) 在一行中的的垂直方向對齊。

行內塊元素需要設定 垂直對齊 （vertical-align: middle ）

 

行高計算：
當行高的值是 number(數字) 是基於元素的文字大小計算

行高對父元素高度的影響：
當父元素未指定高度，行高撐起父元素的高度。

垂直對齊 （vertical-align）

1、給行內塊元素設定垂直對齊，設定在行內垂直方向的位置

2、給行內元素設定垂直對齊，設定在行內垂直方向的位置

3、給行<td>,或者 display: table-cell的元素設定垂直對齊，

讓其常值內容，後代元素在元素自身的垂直方向對齊。

五、背景

區別背景的使用情境： 不重要的網站資訊，表徵圖。

css 的包含塊 、負外邊距，字型，文本行高