zoukankan      html  css  js  c++  java
  • 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解。

    引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话:
    position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),
    只要设置了position:absolute、
    float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。


    postion属性一共有4个值,分别为static,absolute,relative和fixed。
    (1)static为默认值,它表示块保持在原本应该在的位置上,即改值没有任何移动的效果。

    (2)当子块的postion值设为absolute时子块已经不再从属于父块。
    注:top,right,bottom和left这4个css属性,他们都是配合position属性使用的,不但可以设置为绝对像素,也可以设置为表分数,
    表示块的各个边界离页面边框(postion=absolute)的距离,或者各个边界离原来位置(postion=relative)的距离。
    只有当postion属性设置为absolute或者relative时才能生效。如果设置为static,则子块不会有任何变化

    (3)块的postion设置为relative时,与将其设置为absolute时完全不同。这时子块是相对于其父块来进行定位的,同样配合top,right,bottom和left这4个属性来使用的

    1. 设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过;
    2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
    3. 上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”


  • 相关阅读:
    接口文档:第二章:使用Swagger接口的文档在线自动生成
    js断点调试心得
    架构漫谈(二):认识概念是理解架构的基础
    vps 虚拟机 云服务器
    云服务器和虚拟主机的区别
    SQL嵌套子查询和相关子查询的执行过程有什么区别(推荐)
    查询速度优化用not EXISTS 代替 not in
    NULL 与空字符串
    MySQL中处理Null时要注意两大陷阱
    MySQL中NOT IN语句对NULL值的处理
  • 原文地址:https://www.cnblogs.com/lianghong/p/8022911.html
Copyright © 2011-2022 走看看