&文章解读&

看标题可能大家还不太清楚我要将的是什么，“我的CSS 疑问大全”指的是我自己不理解的CSS知识，可能这些问题对其其它人没那么难，但是对于我来说还是有些难度的。要快速的解决不理解的知识，最好的办法就是去实践、做实验，通过实践和实验能够快速的彻底了解一个知识点。本文将会记录我的CSS疑问，在此记录下来，作为学习CSS的参考。

&CSS 为元素::selection&

::selection 为元素其实很好理解，就是当我们用鼠标选择文本的时候“选中文本”的样式。只有少数的CSS属性可以被应用到::selection：color, background, cursor, and outline（颜色，背景，光标和轮廓）。

/* 选择样式 */
::selection {
    background: #0d6cbf;
    color: #fff;
    text-shadow: none;
}
/* 选择样式 "针对火狐" */
::-moz-selection {
    background: #0d6cbf;
    color: #fff;
    text-shadow: none; 
}

兼容性

::selection 在IE中，只有IE9+才支持。在Firefox中需要前缀 "-moz"。详图如下：

selection_CSS.png

&text-shadow （文本的阴影效果）&

如果你知道PS之类的图形设计软件的话一定知道“阴影效果”是什么意思，text-shadow 跟PS中的阴影效果一样，都是在当前文本的底部复制一份当前的文本，只不过底部那一份的水平和垂直位置与顶部的不完全在一个位置，这样就形成的阴影效果，而且底部那一份文本的颜色可以任意指定。
text-shadow 有4个参数，分别是h-shadow、 v-shadow、 blur、 color;

1. h-shadow 水平阴影位置，单位 px
2. v-shadow 垂直阴影位置，单位 px
3. blur 阴影的模糊度，单位 px
4. color 阴影的颜色

兼容性

所有主流浏览器都支持 text-shadow 属性。 注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

text-shadow_CSS.png

&CSS overflow-x 属性&

overflow-x 有一个参数，可选值：visible|hidden|scroll|auto|no-display|no-content;

1. visible （不裁剪内容，可能会显示在内容框之外。）
2. hidden （裁剪内容 - 不提供滚动机制。）
3. scroll （裁剪内容 - 提供滚动机制。）
4. auto （如果溢出框，则应该提供滚动机制。）
5. no-display （如果内容不适合内容框，则删除整个框。）
6. no-content （如果内容不适合内容框，则隐藏整个内容。）

兼容性

所有主流浏览器都支持 overflow-x 属性。注释：overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

&box-sizing&

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

box-sizing_CSS.png