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会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”


  • 相关阅读:
    Ubuntu 14.04 下 Chromium 出现 未安装Adobe Flash Player 问题解决
    UESTC 764 失落的圣诞节 --RMQ/线段树
    TopCoder SRM 639 Div.2 500 AliceGameEasy --乱搞
    HDU 4578 Transformation --线段树,好题
    linux下发布操作
    Memcached 安装部署手册
    Java中集中常见的数据结构(转自CSDN,整理编写)
    oracle数据库2种临时表的使用
    weblogic服务部署
    springboot入门学习(一)
  • 原文地址:https://www.cnblogs.com/lianghong/p/8022911.html
Copyright © 2011-2022 走看看