英文 | https://medium.com/frontend-handbooks/top-5-most-popular-css-questions-all-time-on-stack-overflow-6a1334ce0448#aafe
翻譯 | 楊小二
Stack Overflow是程式員裡最流行的問答平台。如果一個問題在Stack Overflow上很流行，則你可能有或将有相同類型的問題。
以下是關于Stack Overflow裡的最受歡迎的5個CSS問題，這些問題可能對你有用。
Chrome 開發者工具調試技巧
在講解CSS相關知識點的時候，我覺得一個GIF的表達效果遠遠超過純英文。是以在本文中，我不會使用太多概念性的句子，我将使用 Chrome DevTools 制作一些富有表現力的 GIF。
為了讓你更好地了解本文的其餘部分，請讓我簡要介紹一些在 Chrome Devtools 中調試 CSS 的技巧。
假設我們有這樣一個 HTML 檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
font-size: 30px;
}
</style>
</head>
<body>
<div>Hello Friend!</div>
</body>
</html> 然後，我們在浏覽器中打開這個網頁，接着打開Chrome Devtools，進入Element面闆。這時候應該可以看到如下界面：
在上面的界面中：
- 區域1是我們的網頁
- 區域2是目前頁面的DOM結構
- 區域3是滑鼠目前選中的節點的一些屬性
目前，區域3仍是空白。如果我們<div>Hello Friend!</div>用滑鼠選擇，區域 3 将顯示該節點的屬性：
那麼，我們來分析一下這個區域：
在上面的界面中，區域1顯示的CSS屬性是浏覽器的預設樣式。那麼區域2中顯示的CSS屬性就是我們在HTML檔案中為這個節點設定的CSS樣式。
我們可以在這裡直接檢查或取消某個 CSS 屬性：
同時，我們也可以在這裡修改CSS屬性的值：
最後一個區域3是一個特殊區域，是Chrome浏覽器提供的，友善我們調試CSS樣式。如果我們在這裡添加一個 CSS 樣式，它将直接作用于我們目前選擇的元素。
上面提到的三種技巧可以幫助我們調試 CSS 效果，在下一篇文章中将廣泛使用。
TOP1：禁用文本選擇突出顯示
- 觀看次數：220 萬
- 投票數：5511
- 書簽：1337
通常，使用者可以通過滑鼠選擇網頁上的文字并産生高亮效果：
如果我們想禁用高光效果，我們應該怎麼做？
很簡單，隻需添加一行CSS：
user-select: none; 示範：
TOP2：水準居中一個元素
- 觀看次數：430 萬
- 投票數：4594
- 書簽：1027
假設這是我們的 HTML 檔案：
<head>
<style>
#outer {
border: 1px solid red;
}
#inner {
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">bytefish</div>
</div>
</body> 有很多方法可以使元素水準居中，這裡是最常用的兩種。
1、margin: auto
我們可以将子元素的寬度設定為50%，然後将其margin-left和margin-right屬性設定為auto，然後元素就會自動水準居中：
#inner{
width: 50%;
margin: 0 auto;
} 2、 flex
在 flex 布局中，該屬性justify-content: center;還可以使元素水準居中：
TOP3：更改 HTML5 input 的占位符顔色
- 觀看次數：180 萬
- 投票數：4112
- 書簽：1033
輸入框的占位符不是一個獨立的DOM元素，但我們仍然可以通過一個特殊的選擇器中選擇它：::placeholder。
HTML：
結果：
TOP4：表格的使用
Stack Overflow 上的原始問題隻提到了這個标簽的某個使用細節。為了更好的幫助大家了解，我對原問題進行了擴充。下面我們介紹一下這個标簽的用法。
下面是table标簽的一個常見用法：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> 它在頁面上的顯示效果是這樣的：
- 該<table>标簽是根标記，用來建立一個表。
- 該<tr>标簽用于建立一行。
- 在<th>和<td>标簽用于建立一個列。
該<th>标簽是一個有點類似<h1>：在它的文字将變得更大，更厚。<td>标簽中的文本将正常顯示。
讓我們通過 CSS 為這個 DOM 元素建立一個合适的樣式：
添加邊框
給表格添加邊框很簡單，就像其他HTML标簽一樣，我們隻需要添加一個邊框屬性即可：
table, th, td {
border: 1px solid black;
} 結果：
同時，我們可以在Chrome Devtools中修改border的值：
然後，我們發現表格的單元格之間存在一定的間隙。如果我們不想要這個差距，我們應該怎麼做？
其實，我們可以通過CSS來控制這個樣式，也就是border-collapse屬性。
預設情況下，此屬性的值為separate。
table {
border-collapse: separate;
} 顧名思義，分離是指在不同的單元格之間進行分離。我們隻需要修改border-collapse這個屬性的值，将此屬性的值改為collapse就可以取消。
table {
border-collapse: collapse;
} 在 Chrome Devtools 中調試：
最後，像大多數其他标簽一樣，我們也可以設定每個單元格的填充：
td {
padding: 1px;
} 其實，Stack Overflow上的問題問的是如何設定padding。
TOP5：使Textarea無法調整大小
在很多場景中，我們不希望使用者随意調整文本框的大小。這時候，我們可以為文本框設定這個CSS屬性：
textarea {
resize: none;
} 在 Chrome Devtools 中調試：