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的主要内容，如果未能解决你的问题，请参考以下文章