一. 塊級(jí)元素和內(nèi)聯(lián)元素
塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，
就是里面文字或圖片的大小;
塊級(jí)元素主要有：
?address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex ,
?menu , noframes , noscript , ol , p , pre , table , ul , li
內(nèi)聯(lián)元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s ,
?samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變?cè)?根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級(jí)、內(nèi)聯(lián)元素的應(yīng)用：
利用CSS我們可以擺脫上面表格里HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽/元素上應(yīng)用我們需要的屬性。
主要用的CSS樣式有以下三個(gè)：
display:block??-- 顯示為塊級(jí)元素
display:inline??-- 顯示為內(nèi)聯(lián)元素
display:inline-block?-- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
二. display
display屬性用于規(guī)定元素生成的框類型，影響顯示方式
值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-colume | table-cell | table-caption | inherit
初始值：inline
【1】block? ? ?例如: span {display:block;}
【特征】
【1】不設(shè)置寬度時(shí)，寬度為父元素寬度
【2】獨(dú)占一行
【3】支持寬高
【2】inline? ?可以使列表元素顯示為內(nèi)聯(lián)元素
【特征】
【1】?jī)?nèi)容撐開(kāi)寬度
【2】并非獨(dú)占一行
【3】不支持寬高
【4】代碼換行被解析成空格?
3.inline-block
【特征】
【1】不設(shè)置寬度時(shí)，內(nèi)容撐開(kāi)寬度
【2】非獨(dú)占一行
【3】支持寬高
【4】代碼換行解析成空格
4.none
【特征】
可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。
5.list-item
【特征】
【1】不設(shè)置寬度時(shí)，寬度撐滿一行
【2】獨(dú)占一行
【3】支持寬高
6.run-in
【特征】
run-in是一個(gè)有意思的塊/行內(nèi)元素混合，可以使某些塊級(jí)元素成為下一個(gè)元素的行內(nèi)部分。如果一個(gè)元素生成run-in框，而且該框后面是一個(gè)塊級(jí)框，那么該run-in元素將成為塊級(jí)框開(kāi)始處的一個(gè)行內(nèi)框，run-in框格式化成另一個(gè)元素中的行內(nèi)框，但它們?nèi)詮奈臋n中的父元素繼承屬性
若run-in框后面不是塊級(jí)框時(shí)，run-in框本身將成為塊級(jí)框
【注意】只有Safari和IE8+支持
變更元素的顯示類型看該元素是如何顯示，它是什么樣的元素。例如：一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素
1.table
【特征】
【1】不設(shè)置寬度時(shí)，寬度由內(nèi)容撐開(kāi)
【2】獨(dú)占一行
【3】支持寬高
【4】默認(rèn)具有表格特征，能夠設(shè)置table-layout ?
【注意】對(duì)于display為table和inline-table，若處于分隔邊框模型即border-collapse:separate;，margin和padding都可設(shè)置；若處于合并邊框模型即border-collapse:collapse，只可設(shè)置margin
2.inline-table
【特征】
【1】不設(shè)置寬度時(shí)，寬度由內(nèi)容撐開(kāi)
【2】非獨(dú)占一行
【3】支持寬高
【4】默認(rèn)具有表格特征
3.table-cell
【特征】
【1】不設(shè)置寬度時(shí)，寬度由內(nèi)容撐開(kāi)
【2】非獨(dú)占一行
? ? ? ? ? ? ? 【3】支持寬高
【4】垂直對(duì)齊
【5】同級(jí)等高
【注意】display:table-cell的元素不能設(shè)置margin，但是可以設(shè)置padding
4.table-caption
【特征】
【1】不設(shè)置寬度時(shí)，寬度由內(nèi)容撐開(kāi)
【2】獨(dú)占一行
【3】支持寬高
