顯示模式

每個元素都有預設的顯示模式(瀏覽器定義),可以透過 CSS 來修改

區塊

.block {
    display: block;
}
  • 會佔據一列
  • 具備寬度(width)與高度(height)的概念

demo

內聯

display: inline;
  • 不會佔據一列
  • 不具備寬度(width)與高度(height)的概念
  • 預設兩個元素之間會有空隙,且無法消除

demo

內聯區塊

display: inline-block;
  • 不會佔據一列
  • 具備寬度(width)與高度(height)的概念
  • 預設兩個元素之間會有空隙,且無法消除

demo

隱藏區塊

display: none;

超出寬高處理

overflow: hidden;
overflow: auto;
overflow: scroll;
overflow-y: auto;
overflow-x: auto;