HTML 行内元素 與 塊級元素

行内元素和塊級元素

行内元素一般是内容的容器，而塊級元素一般是其他容器的容器。一般情況下，行内元素隻能包含内容或者其它行内元素，寬度和長度依據内容而定，不可以設定，可以和其它元素和平共處于一行；而塊級元素可以包含行内元素和其它塊級元素，且占據父元素的整個空間，可以設定 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 值

常用的 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 來填滿整行。

塊級元素 與 overflow

塊級元素當沒有明确指定 width 和 height 值時，塊級元素尺寸由内容确定，當指定了 width 和 height 的值時，内容超出規定的尺寸就會溢出，元素的尺寸并不會随着内容改變。這時候使用 overflow 可以指定内容超出時的行為，當然， overflow 隻對塊級元素起作用，指定當内容超出塊級容器的時候，塊級元素該如何處理内容的顯示。overflow 可能的值如下表：

值	說明
visible	預設值，如果内容超出容器尺寸，不做任何處理
hidden	超出的内容被截斷并隐藏
scroll	無論内容是否超出，總是顯示滾動條。可以控制隻顯示一個方向的滾動條，這時應該設定 overflow-x 和 overflow-y
auto	内容沒有超出時，不顯示滾動條；内容超出時，顯示滾動條，且如果隻有一個方向超出，那麼隻顯示該方向上的滾動條

舉個例子，html 結構是三個 DIV 元素，css 樣式一樣，隻有 overflow 的值不同：

​​<div class='block'>
 blockblockblock
 </div> 

 <div class='block-hidden'>
 blockblockblock
 </div>

 <div class='block-auto'>
 blockblockblock<
 /div>​​​
​​.block{
 height: 40px;
 width: 100px;
 font-size: 30px; 
 padding: 10px; 
 border: 6px solid rgb(120, 120, 120); 
 margin: 20px; 
 background-color: rgb(255, 0, 0);
 }

 .block-hidden{ 
 height: 40px; 
 width: 100px; 
 font-size: 30px; 
 padding: 10px; 
 border: 6px solid rgb(120, 120, 120); 
 margin: 20px;
 background-color: rgb(255, 0, 0); 
 overflow: hidden;
 }

 .block-auto{ 
 height: 40px; 
 width: 100px;
 font-size: 30px;
 padding: 10px; 
 border: 6px solid rgb(120, 120, 120);
 margin: 20px; 
 background-color: rgb(255, 0, 0); 
 overflow: auto;
 }​​      

總結