1、overflow属性的值？
overflow 属性规定当内容溢出元素框时发生的事情；
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
- visible：默认值，内容不会被修剪，会呈现在元素框之外；
- hidden：内容会被修剪，并且其余内容是不可见的。
- scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit：规定应该从父元素继承 overflow 属性的值。
2、position属性有哪些值？
position属性的值：relative, absolute, fixed, static
（1）position:static 无定位
没有声明即为static。
有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
（2）position:absolute 绝对定位
使用position:absolute，能够很准确的将元素移动到你想要的位置
（3）position:fixed 相对于窗口的固定定位
元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。
（4）position:relative 相对定位
相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
3、定位元素的层级关系是怎样的？
首先是遵循DOM的规则，同级的后面居上。
一般有定位属性的元素会高于无定位属性的同级元素。
都有定位属性的同级元素，z-index大者居上
如果是非同级的元素， 则会忽略元素本身z-index，取与对比元素同级的祖先元素的z-index属性，大者居上
4、谈谈CSS sprites
（1）定义
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。
它可以将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
（2）实现
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
（3）优点：
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
（4）缺点：
图片合并的时候要合理，留好足够的空间，防止板块内出现不必要的背景；
开发时需要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，比较繁琐
维护麻烦，要修改很多的css，如果在原来的地方放不下，只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情
5、before after伪元素和content的用法？
（1）::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。
（2）使用：
::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。
::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。
::after和::before是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child或者:last-child这种伪类选择不会造成影响，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
（3）content属性
content取值：
string
attr ：attr(‘href’)
url() / uri()
counter()
（4）伪类与伪元素
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
（5）使用场景：
- 间隔符用法：
使用::after伪元素做间隔符，并使用伪类:not排除掉最后一个元素。 - 做border三角图标
- 字符图标，插入小图标，小图标有html字符表
- 实现一些标签对placeholder的支持
- 实现文字图片居中
- 清除浮动
6、css设置链接样式顺序是怎样的？
- link:连接平常的状态
- visited:连接被访问过之后
- hover:鼠标放到连接上的时候
- active:连接被按下的时候
正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .
因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。
7、outline属性有哪些值？
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
8、清除浮动的方式
- 在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div> - 通过设置父元素overflow值为hidden；给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
- 给父元素添加clearfix类
- 使用伪类:before，:after
深信服面试题：一个div，里边有两个子元素，div1 高度是300px，div2高度是200px，div1 和div2都是float:left，问如何把父元素的高度撑开？
解决方法：清除浮动
9、css选择器有哪些？
10、CSS属性的组合互斥
（1）float属性
float在绝对定位和display为none时不生效。
float:right的时候，第一个绘制的元素在最右边，
子元素的float属性都是非none时，父元素不会被撑开，浮动元素脱离了正常的流式布局，需要在父元素内清除浮动，可以使用::after来添加伪元素，为伪元素设置clear:both即可。
定义float:left时，再定义margin-right属性，margin-right属性是有效的
（2）z-index属性
一般而言，只要有弹窗的地方，z-index就会出现，在目前的单页应用流行的时候，弹窗是必不可少的，也是影响层叠上下文的关键因子；
z-index只能在position属性值为relative或absolute或fixed的元素上有效。【flex子项除外】
子元素的层叠顺序不可能超过父级，如果父级层叠顺序低，子元素再高也不会超过父级同级但是层叠顺序高的的其他元素
在设置了overflow的子元素下设置z-index可能导致z-index无效。
transformZ和z-index最好不要一起使用。
（3）text-overflow属性
经常会在一个行内标题等地方，文本如果过多的话希望使用…来隐藏，那么这时需要使用text-overflow属性：
取值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）。
要使得 <’ text-overflow ‘> 属性生效，块容器必须显式定义 <’ overflow ‘> 为非visible值，同时显式或者隐式的定义 <’ width ‘> 为非auto值， <’ white-space '> 为nowrap值。
超出不隐藏、或者可以换行或者宽度可以自动延伸的话，均不会出现溢出，所以text-overflow会失效
（4）flex属性
在父级元素是display:flex的时候，子元素的很多布局就失效了，float、clear、vertical-align这三个属性在子元素上不起作用，需要使用flex相关的布局来完成。
（5）伪元素
伪元素其实就是一个子元素，div::after是在div的最后面添加了一个元素，元素就是::after，所以 需要注意在自闭合标签后面不可以添加伪元素，因为自闭合标签不能有子元素，比如img、br这样的标签。
