文章緣起於在編寫**時看到別人在將行內元素轉換為塊級元素時的乙個簡便方法：
為元素加定位position：absolute；
或者position：fixed；
之前沒遇到過的情況，今天就來一塊說說幾種行內元素轉化為塊級元素的方法~
在這之前先回顧下何為塊級元素何為行內元素:
簡單來說塊級元素和行內元素的區別：
大家都知道塊級元素可以設定width，height，並且有獨佔一行的特徵
而行內元素不能設定寬高，即使設定了也不起作用，並且行內元素是在一行文件流中排列開來。
常見塊級元素：div , p , ul , li , o l, dl, address, fieldset, hr, caption , table
行內元素：span, strong, em,br, img , input, label, select, textarea, cite,
說到行內元素又不得不扯兩句替換與非替換元素：
行內替換元素：瀏覽器根據標籤元素屬性去判斷相應的顯示內容，例如：input
行內替換元素的width,height,margin的四個方向都正常顯示
行內非替換元素：瀏覽器直接根據標籤元素顯示，例如：a，span
行內非替換元素的width,height不起作用，但可以利用line-height來控制高度
所以他們之間的轉換終於來了~
方法一：as we all know妙用display
塊級元素預設display:block；
行內非替換元素預設display:inline;
行內替換元素預設：display:inline-block;（行內塊級元素）
因此通過display:block；與display:inline;輕鬆實現兩類元素的轉換~~~
方法二：浮動之float
當為行內元素設定float:left; or float:right;行內元素就會變為塊級元素
反之，如果為有3個div同時為其設定浮動也可以將其以行內元素一行顯示的形式表現出來
方法三：定位之position
最近遇到的為行內元素設定定位position:absolute就可以讓其擁有塊級元素的性質設定寬高等等
經過補充發現position:frixed也可以實現同樣的效果
行內元素和與行內塊元素的margin top問題
內聯 行級 元素 不能設定寬高，但padding屬性可以設定，需要注意的是行級元素不能設定margin top和margin bottom屬性，但可以設定margin left和margin right屬性。如果需要設定行級元素的margin top或margin bottom屬性，必須將行級元素轉...
塊元素 行內元素 行內塊元素
塊級元素 一行只能放乙個，可以設定寬度高度，預設為容器的100 可以包含任何標籤 常用元素 div hr p h1 h6 ul ol dl form table 行內元素 一行可以放多個行內元素，不可以直接設定寬度高度，預設為本身內容的寬度，容納文字或其他行內元素 常用元素 span a i em ...
行內元素 塊級元素和行內塊元素
a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...