盒模型到底是什麼？
盒模型是css實現頁面布局的一種思想：把頁面的所有元素都看成乙個類似於禮品盒的盒子，禮品盒可能會有好多層包裝組成，那麼頁面元素也對應的有內容、邊框、內外邊距等組成。這裡特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的屬性，我在後面詳細介紹。
盒模型的概念明白了，就該注意盒模型的種類了
目前有：標準盒子模型和ie盒子模型 2種盒模型。他們各自長這樣：
根據上圖可以看出他們的不同：
標準盒模型：元素的width和height = content
ie盒模型：元素的width和height =( content+border+padding )
因為存在這樣的差異，所以要滿足跨瀏覽器的時候就會比較麻煩。當然兩種方式肯定是標準盒模型比較好，這裡有乙個解決跨瀏覽器的方案：
在網頁頂部增加doctype的宣告：
上面還提到了盒子模型是有空間的，主要表現在組成盒子的各個部分的層次不同。他們從上到下的順序是
border----->content、padding----->background-image----->background-color----->margin 如下圖
所以在處理頁面元素的樣式時還需要注意到這點。
行內元素和塊級元素的區別和他們的特點是什麼？
塊級元素會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.
行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外
塊級元素可以設定width,height屬性.
行內元素設定width,height屬性無效，它的長度高度主要根據內容決定.
塊級元素即使設定了寬度,仍然是獨佔一行.
塊級元素可以設定margin和padding屬性.
行 內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果, 但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.
塊級元素對應於display:block.
行內元素對應於display:inline.
塊級元素常見的有：div......行內元素常見的有：a，span
如果想讓乙個元素可以設定寬度高度，又讓它以行內形式顯示，我們可以設定display的值為inline-block。
以上內容均來自網際網路搜尋整理的結果，如有侵權請告知！
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...
行內元素 塊級元素和行內塊元素
a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...
塊級元素 行內元素和行內塊元素
每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度 高度 對齊等屬性，常用於網頁布局和網頁結構的搭建。行內元素的特點 1 和相鄰行內元素在一行上。2 高 寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。3 預設寬度就是它本身內容的寬度。4 行內元素只能容納文字或則其...