HTML基础总结–CSS样式定位(六)

继续接上篇HTML基础总结–CSS样式的框模型(五)

什么是定位?

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

定位机制

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基础部分已经将完了,等过段时间给大家带来HTML高级部分,如果你对文章有什么意见和建议的话请提出来,小C就谢谢大家了!

未完待续...

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

    A+
发布日期:2016年02月23日  所属分类:HTML  Web
标签:

发表评论

gravatar

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

目前评论:9   其中:访客  9   博主  0

  1. avatar hawkhost 1

    能以实例来讲解就完美了!

  2. avatar MAOLAI博客 0

    学习!学习!绝对定位position: absolute+相对定位position: relative用的比较多。

  3. avatar 姚嘉鑫 0

    不错哦 互踩

  4. avatar 森云 4

    我竟然认真的看完了

  5. avatar 东方汀波 4

    这些都是经常要用到的咧!

  6. avatar 免费新大陆 1

    这些属性很经常用到,得学习学习。

  7. avatar 成都川科卫校 3

    好听,

  8. avatar 跨境电商平台 1

    非常不错!!!!

  9. avatar 狂族晨曦 5

    讲的不错,赞一个

评论加载中...