固定定位

• 格式：position:fixed;
• 固定定位的三个重要特性：
  • 固定定位与父元素没有任何关系，只会基于浏览器可视区来移动
  • 固定定位不会随着页面滚动而滚动
  • 固定定位是完全脱标的，不占位置

定位总结

• 静态定位：标准流，不能设置边偏移，会随页面滚动而滚动
• 相对定位：标准流，可以设置边偏移，基于自己位置来移动，会随页面滚动而滚动
• 绝对定位：脱标，可以设置边偏移，基于父级来移动（父级必须定位），会随页面滚动而滚动
• 固定定位：脱标，可以设置边偏移，基于浏览器来移动，不会随页面滚动而滚动

z-index设置堆叠位置

• z-index的默认值都是0，都是0的时候，是根据书写顺序来进行堆叠
• 设置了值之后，数值越大，堆叠位置越高
• 只有相对定位，绝对定位，固定定位可以使用这个属性。

定位模式的转换

• 和浮动一样，在设置了绝对定位或者固定定位（相对定位不行）之后，也会转换为行内块元素的模式，默认大小是由内容来撑开，可以设置宽和高。总结一下：目前学习了三个完全脱标的类型，都是这样的。

元素的隐藏和显示

display隐藏

• display:none|block
• display属性有多个值，这里常用的是none和block。none就是隐藏元素，并且元素不占位，如果用display隐藏了元素，那么下面的元素会顶上去。block值正好与none相反，display:block除了转换为块级元素外，还有显示元素的意思。

visibility隐藏

• visibility:visible|hidden
• visible是默认值，就是显示元素。hidden值是隐藏元素，与display不同的地方是，使用visibility:hidden隐藏元素后，元素的位置会保留不变。

overflow

• overflow:visible|auto|hidden|scroll
• overflow是溢出的意思，visible是默认值，就是溢出正常显示。auto会判断内容是否溢出，如果溢出就显示滚动条，反之则不显示。hidden是溢出隐藏，超出盒子大小部分的内容会被隐藏。scroll是直接显示滚动条，即不管你内容是否超出，都会显示滚动条。

CSS界面设置

鼠标样式设置

• cursor:default|pointer|move|text(只写几个常用的)
• 当元素设置了cursor样式后，鼠标移动到元素上就会显示对应的形状
• default是默认样式，就白色小指针
• pointer是白色小手的形状
• move是一个设置大小的形状
• text是文本光标的形状

轮廓线

• outline: 0;
• 因为浏览器兼容问题，轮廓线一般设置为0，取消轮廓线即可。

防止文本域拖拽

• resize: none;
• 在页面布局中，我们并不希望用户能自由的拉伸文本域，所以统一给文本域设置resize:none，即可。

垂直居中

• vertical-align:baseline|middle|top
• 注意：vertical-align只能作用于行内元素或者行内块元素，对块级元素和里面的内容无效。
• baseline是默认值，基线对齐方式。middle是居中对齐，top是顶部对齐。

解决空白缝隙问题

• 在网页中一些没有基线的元素（例如：图片、表单），默认会用底线和父元素的基线对齐。如果出现这样的情况，底部因为底线和基线的距离，就会出现一块小缝隙。
• 解决方案：
  • 设置vertical-align:middle|top，两个值都行，取消基线对齐
  • display:block转换为块元素，也能解决

CSS精灵技术(sprite)

为什么产生css精灵技术

• 随着网速的普遍提高，图片大小对网页加载速度的影响已经不是那么大了，为了追求更快的加载速度，css精灵技术就诞生了。它的原理是把若干张小图制作成一张大图，这样对服务器的请求次数就只需要一次，通过减少请求回复次数来提高加载速度。

css精灵技术的使用

• 实际上css精灵技术用起来很简单，就是使用background背景图来调好具体显示位置就行。
• 小技巧：因为背景图片默认都是左上角对齐，所以当你要设置x、y轴移动时，是把图片往返方向移。所以测出来的坐标值，需要设置成负的才行。

精灵图制作

• 大部分情况下是美工做，可以给美工讲一下怎么做
• 精灵图的宽度取决于最宽的那张背景图
• 精灵图只适合放一下背景装饰图片，不能放插入的图片
• 每张图片的间隔最好是偶数值，方便设置
• 精灵图底部都一点小空隙，方便拓展图片