html之標籤內聯塊元素的那些事

這幾天經常看到inline和block元素，inline，block……那麼我們索性就來了解一下html中哪些是內聯元素，哪些又是塊元素呢？我們來看一下常見的語義化標籤

塊級元素（block）：自動佔據一行的，通過設定高度，寬度可以直接改變大小

div，h1 ~ h6，p，ul，ol，dl，li，form，table，menu，address，pre，blockquote，hr，noscript

內聯元素（inline）：不佔行的，依附於塊級元素存在，直接修改高度，寬度一般是無效的

a，span，label，input，select，textarea，img，strong，em，code，br

可變元素：隨環境變化，根據上下文語境確定

button，iframe，onjecct，map，script，applet，

瞭解了這些問題後，就涉及到程式碼規範問題了，比如說，

塊級元素可以包含內聯元素和塊級元素，但內聯元素不能包含塊級元素，就好比如是，塊級元素是一個大容器，內聯元素是一個小容器，大容器明顯可以存放小容器的，那小容器能存放大容器麼？請自行腦補。此外，塊級元素是以新行開始的，顧名思義，相當於一塊；內聯元素是行內元素，不換行。

ok，既然說到這裡，我們來說說文件流吧。

傳說中，文件流是一個很神奇的鬼，文件由左上角開始流，自上而下，由左向右，隨波逐流，把窗體分成一行行，一列列，將其切割開，“嘶嘶嘶”，而塊狀元素預設佔據的位置是一整行。網頁中大部分物件是佔用文件流的，也有的自成一派，慢慢的，就衍生成了野鬼，脫離了文件流，比如說：

float（浮動），浮動元素不佔任何文件流空間，但定位還是基於正常的文件流

fixed（固定定位），相對於視區進行偏移，比如說部分網站的導航欄

absolute（絕對定位），相對於父元素進行偏移

那不免要說下他們的兄弟了，relative，是相對於原本的位置進行偏移，還是比較乖的一個小孩，是佔用文件流的

先分享到這，如有言語，敬請交流哈~~~