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

  • A+
所属分类:HTML 前端

继续接上篇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就谢谢大家了!

未完待续...

发表评论

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

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

    • avatar benen005 4

      确实很实用。

      • avatar hawkhost 2

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

        • avatar MAOLAI博客 0

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

          • avatar 姚嘉鑫 0

            不错哦 互踩

            • avatar 森云 4

              我竟然认真的看完了

              • avatar 东方汀波 4

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

                • avatar 免费新大陆 1

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

                  • avatar 成都川科卫校 3

                    好听,

                    • avatar 跨境电商平台 1

                      非常不错!!!!

                      • avatar 狂族晨曦 5

                        讲的不错,赞一个