css教程2

Posted webcyh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css教程2相关的知识,希望对你有一定的参考价值。

定位:

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

 

static:

平常我们根本就用不到“position:static”,不过呢,如果有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现

 

fixed:

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

Fixed定位使元素的位置与文档流无关,因此不占据空间。

 

relative:

相对定位元素的定位是相对其正常位置。

移动相对定位元素,但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

 

absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

 

 

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

 

 

重叠元素:

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

 

裁剪元素:

clip:rect(0px,60px,200px,0px);

 

超出

 overflow: visible; 超出可见

 overflow: auto; 超出出现滚动条

 overflow: hidden; 超出隐藏

 overflow: scroll; 出现滚动条

 

 

改变光标:

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

 

以上是关于css教程2的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式表代码布局基础教程

CSS 变量教程

css初级教程 操作方法如下

前端开发教程CSS规范 CSS 的命名和书写

webuploader 教程

视频分享Twitter前端CSS框架Bootstrap视频教程