BOX Model盒模型

在html裡的每一個標籤（tag)都是box，代表每一個tag

都具有width、 height、 content、 padding、 border、 margin六種重要屬性

padding內距 （margin外距）設定的三種寫法

button.examle {
  第一種設定padding（同margin)的方法
  padding-top: 2rem;
  padding-right: 4rem;
  padding-bottom: 6rem;
  padding-left: 3rem;

  第二種設定padding的方法 
  padding:2rem 4rem 

  第三種設定padding的方法
  padding: 2rem 4rem 6rem 3rem;
}

其他盒模型屬性用法：

margin 屬性同padding:上右下左

border:單位 樣式 顏色

width及height:可確定絕對寬高px;或者相對父層元素單位％ or 相對裝置高寬vh vw

anchor tag常見設定：移除底線/：hover當滑鼠經過時

.survey {
  background-color: cornflowerblue;
  color:aliceblue;
  text-decoration: none;
  padding: 0.5rem 0.75rem ;
}
.survey:hover {
  background-color: darkblue;
}

Block及inline及inline block這三者之間的差異

block(可以設定寬高）像是h1~h6、div、p段落等

inline（不可以設定寬高）預設寬度為content;像是a連結、span等

inline block(img 、input、 buttom、 textarea 、select)

網頁排版由左至右同inline;但可設定寬高同block

POSITION