CSS顯示屬性

• display控制layout最重要的CSS屬性，有以下幾種寫法

display: none; 不顯示
display: inline; 樣式的樣子更改成行內
display: block; 樣式的樣子更改成塊狀
// 注意: display只改變元素顯示的樣子，而不是元素本身類型，因此本身為行內元素套用display: block;還是不能包含在塊元素裡//

• visibility:hidden; 跟 display: none; 一樣會隱藏元素，但前者會佔空間，後者不會
• 最大寬度 max-width 螢幕小於元素寬度後，會自動跳行，適用在各尺寸螢幕上瀏覽

CSS位置屬性

• position 有五種位置值

<!--預設，元素靜態定位，不受top、bottom、left、right屬性影響-->
position: static; 
<!--相對定位，可用top、bottom、left、right屬性調整-->
position: relative; 
<!--固定定位，不隨頁面滾動而改變位置，可用top、bottom、left、right屬性調整-->
position: fixed;
<!--絕對定位，可用top、bottom、left、right屬性調整-->
position: absolute;
<!--黏性定位，可用top、bottom、left、right屬性調整，注意支援問題-->
position: sticky;

• z-index屬性
  • 當元素被定位position 時，可以跟其他元素重疊，z-index指定元素的堆疊順序
  • HTML預設為寫在最下面的元素，顯示會在最上層

CSS溢出屬性

• overflow僅適用在有指定高度width，可以控制元素內容太大時要怎麼處理，可單獨指定overflow-x水平和overflow-y垂直，具有以下四個值

visible- 預設，
hidden- 溢出隱藏
scroll- 溢出隱藏，但有滾動條
auto- 類似scroll，但僅在必要時添加滾動條