塊級元素與行內元素的區別

塊級元素與行內元素的區別

塊級元素和行內元素是布局最基本的兩種元素，我們都知道常見的塊級元素有div,p,form,ul,li等，行內元素有span，strong，em等，對於這兩者的區別，我也只是簡單的了解了一番，要正真的理解及掌握，還得在不斷的練習中深入體會。下面是他們的區別：

對於塊級元素：

• 他會獨占一行，在默認情況下，其其寬度自動填滿其父元素的寬度；
• 塊級元素可以設置width、height屬性；
• 塊級元素即使設置了寬度也是獨占一行，塊級元素可以設置margin、padding屬性；

對於行內元素：

• 行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到行排不下，就自動換行，其寬度隨內容而變化；
• 行內元素的width、height屬性則無效；
• 行內元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會產生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產生邊距效果。

塊級元素和行內元素的css相關屬性是：display，其中塊級元素對應與display:block;行內元素對應於display:inline;我們可以通過這個屬性來切換這兩個元素。

display:inline 的作用是設置對象做為行內元素顯示，inline是內聯對象的默認值（ps:內聯對象就是不自動產生換行的元素，比如span） 而我們一般用的div是塊級元素，默認display屬性是block, 但將div的display設置為inline的話，則多個div可以像span一樣顯示在一行了。

相關聯的幾點總結

1. display:inline 對應不顯示為 display:none
2. display:block 對應不顯示為 hidden

說通俗點 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。

3. visibility:visible（元素可見，默認值）
4. visibility:hidden（元素不可見，但仍然為其保留相應的空間）

Visibility:none 和 Display:hidden 的區別是：

1. display:none;
   使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
2. visibility:hidden;
   使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

如果想讓某一段代碼在前台不顯示，最簡單的方法是用css的display:none（某些情況下可以使用left:-100000px來達到同樣效果。）,這樣，下邊的內容就自動填補這個空隙。但是在一些特殊的情況下，我們只需要隱藏這個元素，但它的位置不能被占用了，那么，visibility:hidden就可以實現這個要求。