定位:
static
默认值。位置设置为 static 的元素会正常显示,它始终会处于文档流给予的位置(static
元素会忽略任何top
、bottom
、left
或right
声明)absolute
相对于父级元素的绝对定位,浮出、脱离布局流,它不占据空间,就是我们所说的层,其位置相对于最近的已定位父元素而言的位置,可直接指定left
、top
、right
以及bottom
属性。若父级都没有定位,则以html
(根元素)。(层叠的顺序z-index
:value
)relative
是相对于默认位置的偏移定位,通过设置left
、top
、right
、bottom
值可将其移至相对于其正常位置的地方(相对于自己的开始的位置发生的位置上的移动,【不会破坏正常的布局流】)fixed
相对浏览器的绝对定位,是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过left
、top
、right
以及bottom
属性来规定。不论窗口滚动与否,元素都会留在那个位置。
定位元素层叠属性:
z-index
: auto
| number
检索或设置对象的层叠顺序。
auto
:默认值
number
: 无单位的整数值,可为负数
没有设置z-index
时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上;
让一个元素始终在窗口水平、垂直位置居中:
/* 第一种方式 */
div{
width:200px;
height:200px;
background:#f00;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
/* 第二种方式 */
div{
width:200px;
height:200px;
background:#f00;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
滚动条
- Overflow内容溢出时的设置
属性:
overflow
水平及垂直方向内容溢出时的设置
overflow-x
水平方向内容溢出时的设置
overflow-y
垂直方向内容溢出时的设置
以上三个属性设置的属性值:
visible
、scroll
产生滚动条
hidden
超出隐藏
auto
超出自动显示滚动条
visible
默认值,其中的内容无论是否超出范围都将被显示。
<!-- flash语法 -->
<object width="value" height="value">
<param name="movie" value="flash路径及全称" />
<!-- (其他浏览器识别) -->
<embed width="value" height="value" src="flash路径及全称">
<!--(ie浏览器识别)-->
</object>
flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.
<!-- 滚动字幕应用 -->
<!-- behavior: 滚动形式 scroll/alternate -->
<!-- direction: 滚动的方向 up/down/left/right -->
<!-- scrollamount: 滚动速度 -->
<!-- height width: 滚动的范围 -->
<marquee
behavior="scroll"
direction="left"
scrollamount="10"
height="300"
width="300">
港珠澳大桥将于2018年10月24日上午9时正式通车
</marquee>