Div+Css塊狀元素和內聯元素css
1、塊元素html
塊元素（block element）通常是其餘元素的容器元素,塊元素通常是重新行開始,它能夠容納內聯元素和其餘塊元素,常見塊元素是段落標籤「P」。「form」 這個塊元素比較特殊,它只能用來容納其餘塊元素。web
若是沒有css的做用,塊元素會順序以每次另起一行的方式一直往下排。而有了css之後,咱們能夠改變這種html的默認佈局模式,把塊元素擺到你想要的位置上去,而不是每次都愚蠢的另起一行。須要指出的是：table 標籤也是塊元素的一種，table based layout 和css based layout 從通常使用者（不包括視力障礙者、盲人等）的角度來看這兩種佈局，除了頁面載入速度的差異外，沒有其餘的差異。可是若是普通使用者不經意點了查
看頁面源代碼按鈕後，二者所表現出來的差別就很是大了。基於良好重構理念設計的css佈局頁面源碼，至少也能讓沒有web 開發經驗的普通使用者把內容快速的讀懂。從這個角度來講，css layout code 應該有更好的美學體驗。瀏覽器
2、內聯元素ide
內聯元素(inline element)通常都是基於語義級（semantic）的基本元素,內聯元素只能容納文本或者其餘內聯元素,常見內聯元素 「a」。佈局
提到內聯元素,咱們會想到有個display的屬性display:inline; 這個屬性可以修復著名的IE雙倍浮動邊界問題。性能
塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差別是塊元素通常都是重新行開始的。而當加入了css控制之後,塊元素和內聯元素的這種屬性就不成爲差別了。好比,咱們徹底能夠把內聯元素cite加上display:block 這樣的屬性,讓它也有每次都重新行開始的屬性。字體
塊元素（block element）spa
address -地址 blockquote -塊引用 center -居中對齊塊設計
dir -目錄列表 div -經常使用的塊級元素,也是css layout的主要標籤
dl -定義列表 filedset -form控制組 form -交互表單
h1 -大標題 h2 -副標題 h3 -3級標題
h4 -4級標題 h5 -5級標題 h6 -6級標題
hr -水平分割線 menu -菜單列表 ol -排序表單
p -段落 table -表格 ul -非排序列表
內聯元素(inline element)
a -錨點 abbr -縮寫 acronym -首字
b -粗體(不推薦) big -大字體 br -換行
cite -引用 code -計算機代碼（在引用源代碼的時候須要）
dfn -定義字段 em -強調 font -字體設定（不推薦）
i -斜體 img -圖片 input -輸入框
kbd -定義鍵盤文本 label -表格標籤 q -短引用
s -中劃線（不推薦） smap -定義範例計算機代碼 select -項目選擇
small -小字體文本 span -經常使用內聯容器,定義文本區塊
strike -中劃線 strong -粗體強調 sub -下標
sup -上標 textarea -多行文本輸入框 tt -電傳文本
u -下劃線 var -定義變量
當內聯元素,在css中定義下列屬性中的一種,便具備塊元素的特徵
一、display: block;
二、float:left; （不但具備塊元素的特徵,同時向左側浮動）
這時候的內聯元素,雖然具備了塊狀元素的特徵,可是這兩種有一點區別,第一種：徹頭徹尾和塊元素如出一轍,都要單獨佔一行,從左至右,前提沒有width 和 height屬性,嚴格遵循流動佈局模型塊元素的流動佈局方式,自上至下流動。第二種：大小是剛好能將內容包含,而且右側浮動,能夠多個在一行。
當加上position:absolute/relative的時候,塊狀元素和內聯元素就不受父級區域的限制了,能夠移動到任何位置,此時若是加上width和height屬性,那麼就具備層的特徵了（加上width和height 還有一點好處,就是能夠兼容IE瀏覽器了,全部的瀏覽器實現效果都同樣了）。