css inline元素與inline-block,block元素

工做緣由不多寫CSS,結果總結過好屢次的東西，用起來的時候我仍是忘了，如今打算由有道雲筆記完全轉戰博客園，貌似跟方便些，有道雲記錄了那麼多筆記，我卻不多翻閱.....

一，inline元素

1,內聯元素不能包含塊元素，它只能包含其餘的內聯元素

塊級元素是不能放在<p>裏面的

所謂的不可自由嵌套的元素就是裏面只能放內聯元素的，它們包括有：標題標記的<h1>、<h2>、<h3> 、<h4>、<h5>、<h6>、<caption>; 

<p>;分隔線<hr>和一個特別的元素<dt>(它只存在於列表元素<dl>的子一級)。

block.inline和inline-block細節對比：

display:block

1. block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
2. block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
3. block元素能夠設置margin和padding屬性。
• form.table元素都是塊狀元素。
• 擴展知識點：table嵌套div時，div必須放到td中，不然達不到預期的效果;可是div嵌套table時，div中寫table、tr、td任意一個均可以正常顯示。

• 若是要對tr、td隱藏時，這個時候div就不起做用了，能夠直接對tr、td進行隱藏，固然若是閒一行一行隱藏太麻煩了，那就試試tbody吧，把div替換成tbody將須要隱藏的tr、td放到tbody中，這樣就能夠顯示和隱藏了

display:inline

1. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
2. inline元素設置width,height屬性無效。
3. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block

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