行內元素一般是內容的容器，而塊級元素一般是其他容器的容器。一般情況下，行內元素只能包含內容或者其它行內元素，寬度和長度依據內容而定，不可以設定，可以和其它元素和平共處於一行；而塊級元素可以包含行內元素和其它塊級元素，且佔據父元素的整個空間，可以設定 width 和 height 屬性，瀏覽器通常會在塊級元素前後另起乙個新行。
因此，行內元素適合顯示具體內容，而塊級元素適合做布局。常用的行內和塊級元素如下：
級別元素
行內元素
a,b,strong,span,img,label,button,input,select,textarea
塊級元素
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
之所以說「一般情況下」，是因為元素的級別不是一成不變的，瀏覽器是按照規範規定元素預設的級別，但是可以通過「display」屬性改變其級別。
常用的 display 可能的值如下：值說明
inline
以行內元素行為展示
block
以塊級元素行為展示
inline-block
行內元素和塊級元素特性兼而有之，既不會佔滿父元素，又可以設定width和height屬性
table
以**的形式展示
table-cell
以**單元格的形式展示
table-row
以**行的形式展示
table-column
以**列的形式展示
flex
css3 新增，雖然處於cr階段，但是很多現代瀏覽器已經支援無字首的該特性，ie從11開始部分支援。類似塊級元素，但是可以用於製作自適應布局
inline-flex
類似行內元素，但是可以用於製作自適應布局
grid
css3 新增，目前處於「實驗階段（experimental）」,只是得到了ie11和edge的部分支援
行內元素尺寸由內含的內容決定，盒模型中 padding, border 與塊級元素並無差異，都是標準的盒模型，但是 margin 卻只有水平方向的值，垂直方向並沒有起作用。
塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出塊級元素的尺寸就會溢位，這時塊級元素要呈現什麼行為要看其 overflow 的值，下面會提到。塊級元素的 padding, border 和標準的盒模型一致，但是如果width + padding + border + 指定的margin小於其父元素的寬度時，瀏覽器會通過補margin 來填滿整行。
塊級元素當沒有明確指定 width 和 height 值時，塊級元素尺寸由內容確定，當指定了 width 和 height 的值時，內容超出規定的尺寸就會溢位，元素的尺寸並不會隨著內容改變。這時候使用 overflow 可以指定內容超出時的行為，當然， overflow 只對塊級元素起作用，指定當內容超出塊級容器的時候，塊級元素該如何處理內容的顯示。overflow 可能的值如下表：值說明
visible
預設值，如果內容超出容器尺寸，不做任何處理
hidden
超出的內容被截斷並隱藏
scroll
無論內容是否超出，總是顯示滾動條。可以控制只顯示乙個方向的滾動條，這時應該設定 overflow-x 和 overflow-y
auto
內容沒有超出時，不顯示滾動條；內容超出時，顯示滾動條，且如果只有乙個方向超出，那麼只顯示該方向上的滾動條
舉個例子，html 結構是三個 div 元素，css 樣式一樣，只有 overflow 的值不同：
blockblockblock
blockblockblock
blockblockblock
.block
.block-hidden
.block-auto
文章總結了行內元素和塊級元素的區別，每個元素都可以通過 display 來設定行內還是塊級顯示，inline 和 block 是兩種顯示模型，瀏覽器對每個元素都要採用一種模型來呈現元素，上面我們提到的行內元素和塊級元素分組，其實並不是它們天生就應該這樣，而是瀏覽器按照規範指定了預設值，因此即使我們沒有指定這些屬性，那些元素仍然會按照其所屬類別渲染呈現。通過display 可以改變元素對應的渲染呈現模型，也就是盒模型。當塊級元素的內容超出容器時，使用 overflow 屬性來指定塊級元素的行為。
但凡涉及頁面渲染呈現，都脫離不了與 css盒模型的關係，所以掌握盒模型是理解前端規範和瀏覽器行為的前提。display 屬性各種值其實是不同的渲染呈現模型，包括新增的 flex 和 grid，後面的文章我們再分享看的 flex 布局是神馬，它解決了什麼痛點，為什麼比較火
HTML 塊級元素和行內元素
行內內容是說由行內元素組成的內容，行內元素大家都知道吧，比如 span 元素，iframe元素和元素樣式的display inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。塊級內容跟則是由塊級元素構成，div 是最常用的塊級元素，元素樣式的display blo...
html塊級元素和行內元素
塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要 的位置上去。而不...
HTML行內元素和塊級元素
特點注意 塊級元素 div h1 h6 p ul ol li 比較霸道 自己獨佔一行 高度，寬度 外邊距以及內邊距都可以控制 寬度預設是容器 父級寬度 的100 是乙個容器及盒子，裡面可以放行內或者塊級元素 文字類的元素內不能使用塊級元素 標籤主要用於存放文字，因此 裡面不能放塊級元素，特別是不能放...