HTML基础之CSS样式定位

悲酥清风 Html评论5,788,5831阅读模式

什么是定位?

定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位机制:

CSS分成三种定位机制:

普通定位(默认)

绝对定位

相对定位

普通定位:

普通定位也是默认定位。即浏览器自动将所有元素按正常出现顺序显示。

绝对定位:

以网页坐标系为基准定位

  1. #box_abs {
  2.     position: absolute;
  3.     left: 30px;
  4.     top: 20px;
  5. }

HTML基础之CSS样式定位

相对定位:

相对本来正常的位置定位

  1. #box_re {
  2.     position: relative;
  3.     left: 30px;
  4.     top: 20px;
  5. }

HTML基础之CSS样式定位

z-index属性:只有使用了定位的元素才能使用此属性,z-index的值越小,越靠近底部,并且可以是负数,默认是0。

什么是层?

层在网页中是一种容器,用<span></span>或者<div></div>表示

层的样式属性:

绝对定位:position:absolute;

背景色:background-color:#a5a5a5;

宽度:width:200px;

高度:height:200px;

在网页中的横坐标:left:100px;

在网页中的纵坐标:top:50px;

隐藏或显示:display:none或者display:block;

边框:border: 1px solid #ff0000;

显示/隐藏属性:

display属性设定元素块的显示和隐藏

用法:display:block | none ;

visibility属性设定元素在网页中是否可见

用法:visibility:visible | hidden ;

区别:

visibility隐藏了元素,但元素还占据原来的位置;

display隐藏了元素,但不占据原来的位置;

鼠标滑入和滑出事件:

鼠标滑入事件:onmouseover

鼠标滑出:onmouseout

 

Html最后更新:2016-5-18
悲酥清风
  • 本文由 发表于 2016年5月17日 09:32:44

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定