zoukankan      html  css  js  c++  java
  • 一个新手后端需要了解的前端核心知识点之position(一)

    以下内容是基于观看慕课网视频教程总结的知识点,边打代码边总结,符合自己的思维习惯。不是针对新手入门

    我做程序的初衷是想做一个网站出来。HTML语言当然重要啊,缺什么就百度什么,很浪费时间,还是好好的打好基础吧。

    作为一个没有真正前端基础的后端开发,用框架很爽,可以做出简洁美观的基本界面,但是突然看见一些边距、位置想挪一挪才发现,百度作用也越来越小,怎么弄都不太对!

    这次我已写个原生HTML页面的网站为出发点,准备基本的几个核心东西,position是其中之一:

    知识前提:布局方式

    #标准流,按顺序排列,表现为块级、内联;块级元素会占用设置的整行,内联是内容满一行才自动换行

    #浮动,//TODO

    #定位,使用position脱离标准流,position属性决定了元素如何定位,通过top、right、bottom、left实现位置改变

    使用postion之后,使元素有层级关系,后写的在先写的前边(可遮挡先写的)

    position的relative 参数,相对定位受父元素的约束,如果父元素没有position属性,则子元素无效

    position 的absolute参数,如果父元素没有定位属性,元素将以窗口进行定位

    position 的fixed参数,配合top、left、right、bottom的位置属性,文档会脱离正常的文档流,不受制于标准流的约束,在整个窗口进行移动定位并拥有层级的概念,常见的场景有对联广告,弹窗登录; 而且不受拥有定位属性的父元素的约束(这是固定定位和绝对定位的区别),仍然是相对于窗口进行定位

    position的inherit 参数,其含义是继承的意思,继承父元素设置的position属性,如果父元素没有设置position属性,则子元素也不会有(相当于没写position属性)

    注意:当元素设置position之后,没有设置left、right、top、bottom时,其实相当于没有设置position

    最后就是z-index啦,使用position之后由于有了层级关系,我们可以通过z-index设置元素的叠加关系,但是要依赖定位属性哦

    学习时的误区!      普通的元素之间也是有层级关系的,后写覆盖先写的

    要点:

    # z-index大的元素会覆盖z-index小的元素

    # z-index为负值,元素被普通的标准流的属性覆盖

    # z-index为 auto的元素不参与层级比较

    注意:当设置position但不写z-index的时候默认是0,浏览器则默认是auto。还有当position是static的时候,设置z-index是无用的。还有就是子元素基于父元素的层级关系

  • 相关阅读:
    支付宝 微信支付 移动支付 网站支付 开发
    2017 开源中国评比的前100个优秀开源项目
    解决error: Your local changes to the following files would be overwritten by merge
    Spring-JDBC配置
    server library[unbound] 服务未绑定解决办法
    MyEclipse安装EGit插件方法
    使用GitHub和Eclipse进行javaEE开发步骤
    Spring-AOP
    SQL-字符串连接聚合函数
    Spring-注入外部值
  • 原文地址:https://www.cnblogs.com/maodot/p/9499434.html
Copyright © 2011-2022 走看看