永無島的個人部落格
盒模型可以想象成乙個包裝的月餅，包裝(div),內容(月餅)，月餅和包裝盒間的距離(padding),兩個包裝的月餅之間距離(margin)，塊級元素都具有盒模型的特徵。
在html中div、 p、h1、form、ul 就是塊級元素。設定display:block就是將元素顯示為塊級元素。塊級元素的特點：
每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，乙個塊級元素獨佔一行）
元素的高度、寬度、行高以及頂和底邊距都可設定。
元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定乙個寬度。
如何將內聯元素轉塊級元素？
a在html中，span>、a、label、strong和em就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過**display:inline將元素設定為內聯元素內聯元素的特點：
和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設定；
元素的寬度就是它包含的文字或的寬度，不可改變。
如何將塊級元素轉內聯元素？
div內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點,img、input就是內聯塊級元素內聯塊級元素的特點：
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設定。
如何將乙個其他元素轉內聯塊級元素？
divp
p
盒模型總寬度=margin+width
width=border+padding+content
標準盒模型
盒模型總寬度=margin+border+padding+width
width=content
解決方案
w3c 最後為了解決這個問題，在 css3 中加了 box-sizing 這個屬性。當我們設定 box-sizing: border-box; 時，border 和 padding 就被包含在了寬高之內，所以，為了避免你同乙份 css 在不同瀏覽器下表現不同，最好加上：
*, *:before, *:after布局模型與盒模型一樣都是 css 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本，那麼 css 布局模板就是末了。
流動模型是瀏覽器預設的布局模式，具備兩個特徵塊狀元素以自上而下的方式布局
內聯元素以從左自右的方式布局
如果現在我們想讓兩個塊狀元素併排顯示,可以使用浮動模型。
欄目1欄目2
欄目3
margin collapse 邊界塌陷或者說邊界重疊設定 clear 非 none 的元素的 margin-top 是否生效，主要取決於這個 margin-top 能否推動該元素越過所有 float 元素的height
解決浮動後因clear：both;導致其後元素使用margin失效最有效的辦法是：
不要把clear和其他樣式混用，重新定乙個標籤清除浮動，如上**中的p標籤
層布局模型就像是影象軟體photoshop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作層模型有三種形式：
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的。
.txtcenter
我想要在父容器中水平居中顯示。
當被設定元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。定寬塊狀元素：塊狀元素的寬度width為固定值。
我是定寬塊狀元素，哈哈，我要水平居中顯示。
hi,imooc!
可以借用table
設定display:table-cell；
借用table實現高度居中
使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了。
HTML水平居中方法
一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位，父元素left 50 子元素left 50 相對自己的長度減回5...
html 元素水平居中方式
本文將簡單敘述元素居中的基本方法。區 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title center title 67 head 8 body 9 h1 style text align center html中元素的...
HTML 內容居中方式總結
在html網頁排版經常會用到關於對其方式的情況，水平居中和垂直居中。特別是水平居中，並不是乙個簡單的text align就可以解決所有的情況。開始之前普及一點html知識，目標很明顯，不同的頁面結構情況下，要達到居中的效果方式不同。常用的塊狀元素有 div p h1 h6 ol ul dl tabl...