固定定位
- 格式:
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轴移动时,是把图片往返方向移。所以测出来的坐标值,需要设置成负的才行。
精灵图制作
- 大部分情况下是美工做,可以给美工讲一下怎么做
- 精灵图的宽度取决于最宽的那张背景图
- 精灵图只适合放一下背景装饰图片,不能放插入的图片
- 每张图片的间隔最好是偶数值,方便设置
- 精灵图底部都一点小空隙,方便拓展图片
网友评论