# CSS 疑難雜症

###### tags: `css`、`application`、`note`
### 使用 inline 和 inline-block 時產生的空隙
使用上述兩個 display 時，假如原先切版需求是把元素之間做合併，會有一個困擾是相鄰的元素之間會有空隙，這時只要在所有相鄰元素他們上一層的父元素做 `font-size: 0` 的設定即可以取消之間的空隙與空白。

#### 參考資料
[css font-size=0有什么妙用？](https://segmentfault.com/q/1010000008628181)

----

### `display: inline-block` 的元素如果設定 overflow: visible 以外的屬性，產生的高度問題（可能還有其它解決方式）
如果一個擁有 `display: inline-block` CSS 屬性的元素，又把 `overflow` 預設值（`visible`）改為其它的值，像是 `overflow: hidden` 的話，那麼元素在父元素的容器位置會有所變化，會變成元素的底部貼齊父元素的 baseline （基準軸）位置（普遍是中間）。

參考網址：https://my.oschina.net/u/214483/blog/663133

在參考網址裡面還有附上一個 stackoverflow 的參考網址，裡面的解法是使用 `display: block` 就可以解決這個問題。

但是有另外一個問題是，我今天同時想要有 `display: inline-block` 與 `overflow: hidden` 兩個屬性同時存在於同一個元素，那該怎麼辦？

我自己的解決方式是：父元素 `poistion` 設定 `static` 以外的屬性，然後子元素使用 `poisition: relative` 後再藉由 `top`、`bottom` 調整子元素在父元素位置。

下面這張圖，`li` 是父元素，`span` 是子元素，設定完螢光色那三行設定後，我的元素看起來就比較置中了。


#### Before：

#### After：


----
### 調整元素比例

1. `zoom: 150%;`
2. `transform: scale(1.5);`

方法二似乎比較佳，排版比較不會有問題。

#### 參考資料
[[CSS] 利用CSS將checkbox控制項放大](https://sistergub.blogspot.com/2014/12/css-csscheckbox.html)

-----
### 消除 ul 列表的圓圈

ul { list-style-type: none; }

`list-style-type` 可以調整各種樣式：https://www.w3schools.com/cssref/pr_list-style-type.asp

----

### 去掉 button 點擊後的藍框

button {
    outline: none;
}

-----
### 調整置換元素的內容（img, video 等元素）
像是使用 `<img>` 的 `src` 載入圖片時，可能比例會跑掉變成不是自己想要的，這時就可以使用 `object-fit` 的 CSS 屬性來改，像是 `object-fit: cover` 就是維持元素內容的原比例，但可能會裁掉多餘的部分。

#### 延伸資料
1. [[CSS] object-fit / object-position 調整置換元素(img..等)的內容](https://blog.camel2243.com/2017/01/21/css-object-fit-object-position-%E8%AA%BF%E6%95%B4%E7%BD%AE%E6%8F%9B%E5%85%83%E7%B4%A0img-%E7%AD%89%E7%9A%84%E5%85%A7%E5%AE%B9/)
2. [css-tricks: object-fit](https://css-tricks.com/almanac/properties/o/object-fit/)
3. [css-tricks: object-position](https://css-tricks.com/almanac/properties/o/object-position/)

------

### input icon 實作
在表單欄位前方的圖案可以使用僞元素或是 `text-indent` 的CSS 屬性實作。

#### 參考資料
1. [CSS: 偽元素應用- input icon](https://ithelp.ithome.com.tw/articles/10200426)

-----

### 當點擊 input 表單欄位的瞬間，placeholder 的值就消失，不須等到輸入值才消失
加入下面的 CSS 語法即可：

input:focus::placeholder {
  opacity: 0;
}

或是

input:focus::placeholder {
  color: transparent;
}

也可以

#### 參考資料
1. [How do I auto-hide placeholder text upon focus using css or jquery?](https://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery)
2. [input搜索框获取焦点时，placeholder消失](https://blog.csdn.net/yxmanyxman/article/details/78016159)

-----
### opacity、visibility、display 的差異

#### 參考資料
1. [CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析](https://segmentfault.com/a/1190000015116392)

-----
### focus 偽類別加上 ::before 或 ::after 無法使用
採用 `:focus-within` 即可：

&__account:focus-within::before {
  @include popUpInputTitle('使用者名稱(信箱)');
}

上面的例子是設定在輸入信箱的 `input` 欄位中，當使用者點擊欄位就會顯示「使用者名稱（信箱）」的字樣。

-----
### 不讓文字被選中（反白）

.content {
  user-select: none;
}

#### 參考資料
1. [user-select [MDN]](https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select)

-------
### 垂直置中
#### 參考資料
1. [CSS垂直置中技巧，我只會23個，你會幾個](http://csscoke.com/2018/08/21/css-vertical-align/)

-----
### <input /> 的預設尺寸
`<input />` 標籤的 `box-sizing` 預設為 `content-box`，假設整體的 `box-sizing` 設為 `border-box`，還必須單獨設定`<input />` 的` box-sizing` 為 `border-box`

-----
### 取得 HTML 設定的文字給 CSS 做使用
比如想要設定元素 CSS 的 `before` 偽元素的內容，此內容要和 HTML 的內容的值一致，那就可以把值設定在 HTML 的屬性上，CSS 再根據 `attr(屬性名稱)` 去得到 HTML 的屬性值。

.input-container::before {
  content: attr(placeholder);
}

#### 延伸資料
1. [The CSS attr() function got nothin' on custom properties | CSS-Tricks](https://css-tricks.com/css-attr-function-got-nothin-custom-properties/)

-----
### 文字首行縮排

.text {
  text-indent: 5px;
}

/* 凸出來也可以 */
.text {
  text-indent: -5px;
}

------
### checkbox 和文字垂直置中

<label>
  <input type="checkbox" />
  <span>確定</span>
</label>

上面的例子，會發現 checkbox 會比文字高一些，如下:

#### 解決方式
只要在 checkbox 上新增 `vertical-align: middle;` 的 CSS 屬性就大功告成：