深刻理解盒子模型與元素型別，有助於快速確定布局方式：
一、盒子模型
從外到裡：margin、border、padding、content。
關鍵：height與width指的是content文字區的尺寸。
二、元素型別及本質區別
1、inline：內聯元素。
本質特點：預設baseline對齊，且content尺寸剛好包含文字（所以設定width、height無效），故不單獨佔據整行。
2、block：塊元素。
本質特點：單獨佔據一整行，該行行高為該塊元素高度。
3、inline-block：內聯塊元素。
本質特點：兼具inline元素與block元素的一些特點，表現為：對自身而言仍是塊元素，對一整行而言，又被視為內聯元素，可併排處於同一行。
三、居中問題
從元素型別考慮，且使用margin與padding：
1、對inline元素。
內聯元素的整體高度只取決於總內容的高度，因而margin-top/bottom與height均無效。故使inline元素居中一般方法。
(1)、padding：apx bpx；
作用：使內容相對於自身border居中。
注意：此時雖然高度被padding撐大了，但實踐可知道，它在父元素中體現的高度仍然不變，可複製**一執行。解決辦法：調整父元素行高，同時合理設定設定a的數值。
2、對block元素。
(1)、margin：0 auto;
作用：自身相對于父元素水平居中。
(2)、padding：apx bpx；
作用：使內容相對於自身border居中。
3、對inline-block元素。
對inline-block一般只為了使內容居中。
(1)、padding：apx bpx；
作用：使內容相對於自身border居中。
不使用margin、padding時：
1、本身不為內聯元素，使內容垂直居中通用方法：
設定自身height、line-height相同。
說明：關鍵在於理解line-height，line-height指從元素自身y=0的位置到一行底部的高度，因為行的內容本身在一行內使垂直居中的，當行高等於自身高度時，內容也就相對於自身垂直居中。
2、內聯元素相對於其它內聯元素的垂直對齊方式：（同樣適用於內聯塊元素）
vertical-align：middle；
作用：設定自身在一行中的對齊方式，取值baseline、bottom、top等，因而與line-height相關。因為是同行內不同元素間的對齊方式，所以只對inline與inline-block。
3、使內容水平居中通用(非內聯元素)：
text-align：center；
說明：text-align指內部元素相對於自己的水平對齊方式，可取left、center等值。
**一：
你好
行內元素與塊級元素垂直居中
行內元素的垂直居中 1.給塊級元素中的想要居中的行內元素設定 vertical align middle 這表示這些行內元素是以它們各自的中間的位置來與其他行內元素對齊的 若還是沒對齊的話,可通過在這些行內元素的父元素中設定line height 來調節.2.若行內元素的父元素高度不定,可通過設定行...
父元素與子元素之間的margin top問題
父元素的盒子包含乙個子元素盒子，給子元素盒子乙個垂直外邊距margin top,父元素盒子也會往下走margin top的值，而子元素和父元素的邊距則沒有發生變化。css樣式 box1 box2 bug原因 in this specification,the expression collapsin...
DIV元素垂直居中的分析與實現
首先,對於需要垂直居中的元素常規居中處理 margin 0 auto 接下來要設定div的祖先元素的寬高為100 在預設的設定中他們都為0 html,body接下來設定該元素的posion值為relative,不讓它脫離文件流,接下來設定 top 50 margin top 自身高度的一半 當然了這...