１ 行高

◆瀏覽器默認文字大小

瀏覽器默認文字大小：16px

行高：是基線與基線之間的距離

行高=文字高度+上下邊距

一行文字行高和父元素高度一致的時候，垂直居中顯示。

行高的單位

總結:單位除了像素以為，行高都是與文字大小乘積。

總結:不帶單位時，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素為單位，就是定義的行高值。

◆推薦行高使用像素為單位。

盒子模型

邊框 border

Border-top-style: solid 實線

dotted 點線

dashed 虛線

Border-top-color 邊框顏色

Border-top-width 邊框粗細

邊框屬性的連寫

特點：沒有順序要求，線型為必寫項。

邊框合並 border-collapse:collapse;

獲取焦點

label for id 獲取光標焦點

內邊距

Padding-left | right | top | bottom

padding連寫

Padding: 20px; 上右下左內邊距都是20px

Padding: 20px 30px; 上下20px 左右30px

Padding: 20px 30px 40px; 上內邊距為20px 左右內邊距為30px 下內邊距為40

Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

◆內邊距撐大盒子的問題

影響盒子寬度的因素

內邊距影響盒子的寬度

邊框影響盒子的寬度

盒子的寬度=定義的寬度+邊框寬度+左右內邊距

◆繼承的盒子一般不會被撐大

包含（嵌套）的盒子，如果子盒子沒有定義寬度，給子盒子設置左右內邊距，一般不會撐大盒子。

外邊距

margin-left | right | top | bottom

外邊距連寫

Margin: 20px; 上下左右外邊距20PX

Margin: 20px 30px; 上下20px 左右30px

Margin: 20px 30px 40px; 上20px 左右30px 下 40px

Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px

◆垂直方向外邊距合並

兩個盒子垂直一個設置上外邊距，一個設置下外邊距，取的設置較大的值。

◆嵌套的盒子外邊距塌陷

解決方法: 1 給父盒子設置邊框

2給父盒子overflow:hidden; bfc 格式化上下文

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

Css學習(三)