定位锚点

2018-10-07

与定位相关的属性

position：static /absolute/relative/fixed

static：默认值，无特殊定位，对象遵循 HTML 原则；
absolute：绝对定位，将对象从文档流中拖离出来，使用 left/right/top/bottom 属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据 html 对象(浏览器)，而其层叠通过 z-index 属性定义；
relative ：相对定位，相对于标签原来的位置进行定位，对依据 right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；
fixed：固定定位：相对于浏览器定位，脱离文档流；

绝对定位与相对定位的区别

参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据空间。

包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
默认状态下，html 是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义父元素为包含块：给直接父元素添加声明 position：relative；

定位元素层叠属性

z-index : auto | number
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数

较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在 HTML 文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 absolute/relative/fixed 的对象。

命名锚点链接

命名锚点的作用：在同一页面内的不同位置进行跳转。
给元素定义命名锚记名

1	<!-- <标记 id="命名锚记名"></标记> -->

命名锚记连接
语法：

1	<a href="#命名锚记名称"></a>

元素透明兼容写法

Filter:alpha(opacity=50);IE8 以下浏览器可以兼容
Opacity:0.5;高版本浏览器可以兼容

Border-radius:10px; 可以写个圆角

补充部分

flash

1、插入 flash

1）语法：

1
2
3

<object width="value" height="value">
  <embed width="value" height="value" src="flash路径及全称"></embed>
</object>

2）将 flash 背景设置为透明

1	<embed wmode="transparent" />

给<embed>标记添加属性：wmode=”transparent”

说明：
flash 源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.
gif 格式：.gif

滚动字幕

<marquee
  behavior（行为）="scroll(滚动)/alternate（晃动）"
  direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"
  scrollamount（滚动速度）="value"
  height="value(上下滚动范围)"
  width=""
  (左右滚动范围)
>
  滚动内容
</marquee>

滚动条

Overflow 内容溢出时的设置属性：
overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置

visible 默认值。使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与 visible 相反。任何超出”width”和”height”的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

应用： 1)没有水平滚动条:

1	<div style="overflow-x:hidden">test</div>

2)没有垂直滚动条

1	<div style="overflow-y:hidden">test</div>

3)没有滚动条

1
2
3

<div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">
  test
</div>

4)自动显示滚动条

1	<div style="height:100px;width:100px;overflow:auto;">test</div>

自己定义滚动条的颜色

body {
  scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
  scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
  scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
  scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
  scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
  scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
  scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
}

Cursor 定义个性鼠标

1	cursor: pointer/move/text/help/wait/w-resize/s-resize/sw-resize/se-resize/crosshair/auto/default/;

本文作者：人模人样的搬砖老段
本文链接：定位锚点
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/03/11