美文网首页css
[前端学习]css部分学习笔记,第九天

[前端学习]css部分学习笔记,第九天

作者: 印象rcj | 来源:发表于2017-09-04 22:43 被阅读0次

    固定定位

    • 格式: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轴移动时,是把图片往返方向移。所以测出来的坐标值,需要设置成负的才行。

    精灵图制作

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

    相关文章

      网友评论

        本文标题:[前端学习]css部分学习笔记,第九天

        本文链接:https://www.haomeiwen.com/subject/bdncjxtx.html