display: none / block / inline / inline-block;
position: staitc (預設) / absolute / fixed / relative;
float: none (預設) / left / right;
z-index: 0 (預設) / 整數; (數值越大，在越上面。)(正整數 > 0 > 負整數)
visibility: visible (預設) / hidden;

※ position 為 absolute or fixed 時，要參考到 left, top, right, bottom。
※ width, height 的設定是否生效，要看其他參數的狀況。

.class01
{
  display: none;         /* 整個消失，不影響布局。內部的元素全都看不到，且不會影響到布局。 */
  display: block;        /* 變成 block-level element */
  display: inline;       /* 變成 inline-level element */
  display: inline-block; /* 變成 inline-level element 但內容的呈現套用 block-level element 的行為 */
}

.class02
{
  visibility: visible;   /* 元素可見 */
  visibility: hidden;    /* 元素不可見，但占用的空間沒有釋放，會影響布局。若內部包含的元素有指定 visibility 為 visible 的話，他們會變成可見的。 */
}

javascript

var div1 = document.getElementById("div1");


※  CASE A
※
※  display: block; /* 預設值 */
※  float: none; /* 預設值 */
※  width: 某值;
※  height: 某值;


border-left + padding-left + width + padding-right + border-right
  => border-left + div1.clientWidth + border-right
  => div1.offsetWidth
  => div1.getBoundingClientRect().width 

border-top + padding-top + height + padding-bottom + border-bottom
  => border-top + div1.clientHeight + border-bottom
  => div1.offsetHeight
  => div1.getBoundingClientRect().height 


※  CASE B
※
※  display: inline;
※  float: none;
※  width: 某值; /* 此設定自動失效 */
※  height: 某值; /* 此設定自動失效 */


div1.clientWidth = 0
div1.clientHeight = 0

div1.getBoundingClientRect().width 
  => div1.offsetWidth (四捨五入後的整數值)
  => (content+padding+border)的總寬度 (margin, border, padding 乃至四周的元素都有不同的影響)

div1.getBoundingClientRect().height 
  => div1.offsetHeight (四捨五入後的整數值)
  => (content+padding+border)的總高度 (margin, border, padding 乃至四周的元素都有不同的影響)


※  CASE C (寬高計算等於 CASE A)
※
※  display: inline;
※  float: left;
※  width: 某值;
※  height: 某值;