---
tags: Css, Rwd
---
# CSS 常用設定
###### tags: `css`, `rwd`
## Box Sizing

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

## Clearfix 清除浮動

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1; /*For IE 6&7 only*/
}

## RWD
### 響應式Table設定

.table-container {
  width: 100%;
  overflow-y: auto;
  _overflow: auto;
  margin: 0 0 1em;
}

.table-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-container::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

### 響應式GoogleMap設定

.google-maps {
  position: relative;
  padding-bottom: 25%;
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

### 響應式Video設定

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.vw-solution {
  width: 31vw;
  height: 17.4375vw; 
  /* calculating 16/9 ratio ---- 31vw / 16 * 9 = 17.4375vw */
} 

.aspect-ratio {
  width: 31vw;
  aspect-ratio: 16 / 9;
  /* aspect-ratio auto calculating 16/9 ratio */
}

https://codepen.io/elad2412/pen/MWmbLdx
## Font Awesome Icon 使用before/after插入 CSS寫法
- 4.x

.item {
  content: "\f000";
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

- 4.x

.item {
  content: "\f000";
  font: normal normal normal 14px/1 FontAwesome;
}

- 5.x

.item {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.item {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}
.item {
  content: "\f007";
  font-family: "Font Awesome 5 Brands";
}

*若fontawesome有用到兩種(或以上)版本時 請依照此順序擺放(預設4.7.0版 要在最下方)
<font color="purple">*** 可在嘗試若顛倒是否正常，只能自行測試 ***</font>
https://cdnresource.gtmc.app/iconfonts/fontawesome/5.13.0/css/all.min.css
https://cdnresource.gtmc.app/iconfonts/fontawesome/4.7.0/css/font-awesome.min.css

## 等比例缩放的盒子
1. 將元素的 height 設成 0，使得元素的高度等於 padding-bottom。
2. 合理設置 padding-bottom 的值。比如每個元素的 width 是 25%，現在想讓元素的高度始終保持為其寬度的兩倍，則 padding-bottom 的值應該設置為 50%。

.item {
  width: 25%;
  height: 0;
  padding-bottom: 50%;
}

## 設定最後一列呈現不一樣的樣式(以三欄為例)

li:nth-child(3n+1):nth-last-child(-n+3),
li:nth-child(3n+1):nth-last-child(-n+3)~li {
  檥式內容
}