block，inline和inline-block概念和區別（轉）

時間 2019-11-30

標籤 block inline 概念區別简体版

原文原文鏈接

整體概念

根據CSS規範的規定，每個網頁元素都有一個display屬性，用於肯定該元素的類型，每個元素都有默認的display屬性值，好比div元素，它的默認display屬性值爲「block」，稱爲「塊級」元素(block-level)；而span元素的默認display屬性值爲「inline」，稱爲「行內」元素。
行內元素指的是書寫完成後不會自動換行，而且元素沒有寬和高。
塊級元素寫完後會自動換行，有寬高能夠修改。

還有一種特殊的元素叫作行內塊元素。

大體分類是：

行內元素有：title span br a style em b i strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo

塊級元素有：body form textarea h1-h6 html table button hr p ol ul dl center div pre noscript blockquote fieldset address

行內塊元素常見的有： img input td select textarea label

block, inline, inline-block細節對比

display：block

block元素能夠包含block元素和inline元素，塊級元素通常做爲容器出現，用來組織結構，但並不全是如此。有些塊級元素，如<form>只能包含塊級元素；p 元素，只能包含inline元素，而不能包含block元素，也有一些塊級元素既能夠包含塊級，也能夠包含行級元素。
block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。當只設置了height屬性時，則width默認是其父類元素的寬度。
block元素能夠設置margin和padding屬性。

display：inline

inline元素只能包含inline元素。
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效，若是你要改變內聯元素的行高即相似文本的行間距，那麼你只能使用這三個屬性：line-height，font-size，vertical-align。若想給inline元素設置寬高屬性，則可以使用如下兩種方法（下面的方法是我我的收集的，若有不對，但願你們能夠指出）

將inline元素轉換爲塊級元素後就均可設置了，即添加CSS樣式時，加上」display:block;「這句話。
將該inline元素的position設置爲absolute或fixed，這樣子它就具備塊級元素的屬性了。

inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果，注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
border:0;
}
.a1{
background:pink;
margin-top:30px;
margin-bottom: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
.div1{
width: 100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<a class="a1">CSDN</a>
<div class="div1"></div>
</body>
</html>

運行結果以下左圖所示：

查看元素時，可看到右圖的效果，在右圖中，紫色部分爲內邊距，紫色下面的黃色部分是外邊距，但它們二者並不起做用，塊級元素div仍緊挨着元素a的底部，因此這就是元素範圍是增大了，可是對元素周圍的內容是沒影響的。

display：inline-block

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。
能夠設置margin和padding屬性。

文中不少內容都是參考前輩的，添加了一點點本身寫的內容。由於本身仍是菜鳥，因此寫不出像前輩們那麼優秀的文章，並且要是僅僅依靠我我的的經驗去寫，我怕寫出來的文章會誤導你們，不過我會繼續努力的！

參考網址： http://www.javashuo.com/article/p-zfyowszx-hm.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。