Stack Overflow是最受程序员群体喜爱的问答平台。如果一个问题在Stack Overflow上比较受欢迎，那么你大概了已经遇到或者将要遇到同类型的问题。
这里我总结了Stack Overflow上最受欢迎的5个CSS相关的问题，希望对你有帮助。
版权声明：Stack Overflow上的内容是基于CC BY-SA 分发的。
Chrome Devtools
在讲解CSS相关的知识点的时候，我认为一个GIF的表达效果远远超过了普通文字。所以在这篇文章中，我不会过多的使用一些概念性的语言，我会使用Chrome DevTools来制作一些富有表现力的GIF。
为了让你更好的理解本文接下来的内容，请让我简单的介绍一些在Chrome Devtools中调试CSS的技巧。
如果你还不了解Chrome Devtools，可以参考一下我之前发布的文章：
10个Chrome Devtools的使用技巧（附带大量动图）
假设我们有这样的一个HTML页面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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
一般情况下，用户可以通过鼠标选中网页上的文字，并产生高亮效果：
如果我们希望禁用高亮效果，那么我们该怎么做呢？
非常简单，只需要添加一行代码:
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;这个属性也可以让元素水平居中
如果你对如何将一个元素水平垂直居中感兴趣，可以参考我之前写过的一匹文章:
10 Ways to Center a Div Horizontally and Vertically in CSS
TOP3: 修改input输出框的placeholer的颜色
- 阅读数:180万
- 赞同数: 4112
- 收藏数: 1033
input输入框的placeholer不是一个独立的DOM元素，但是我们依然可以通过一个特殊的选择器::placeholder来选择它。
代码如下：
这个是效果：
TOP4: table标签的用法
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标签一样，直接添加一个border属性就行了：
table, th, td { border: 1px solid black;}
下面是效果：
同时我们可以在Chrome Devtools中修改一下border的数值：
然后我们发现，表格的cell之间都留有一定的空隙。如果我们不想要这个空隙，那么我们该怎么做呢？
其实我们可以通过CSS来控制这个样式，那就是border-collapse
默认情况下，这个属性的值是separate;
table {
border-collapse: separate;
}
顾名思义，separate 就是让不同的cell之间分割。我们只要把这个属性修改为collapse就可以取消其中的空隙了：
table {
border-collapse: collapse;
}
在Chrome Devtools中调试：
最后，我们和大多数其他的标签一样，还可以设置每一个cell的padding：
td { padding: 1px;}
其实那个Stack Overflow上的问题问的就是如何设置padding。
TOP5: 让用户无法改变文本框的大小
很多场景下，我们不希望用户可以自由的调解文本框的大小，这时候我们可以为文本框设置这个CSS属性：
textarea {
resize: none;
}
通过Chrome Devtools调试结果如下：
小结
感谢你的阅读。
同时这篇文章的英文版也会同步在Medium上。
