zoukankan      html  css  js  c++  java
  • CSS中定位机制的想法

      对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制。

      position:static | relative | absolute | fixed

      适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素。

      继承性:无。

      归类总结一下定位的四种属性特点:

      

      绝对定位:

      1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的。

      2:盒子嵌套的时候,如果父盒子设置了定位,那么子盒子是以父盒子左上角为基准设置定位的。如果父盒子没有设置定位,那么子盒子以浏览器左上角为基准设置定位的。

      3:设置了绝对定位的盒子,不占原来的位置。

      4:设置了绝对定位的盒子可以实现模式的转换)

      相对定位:

      1:以自己左上角为基准设置定位。

      2:相对定位占原来的位置

      3:相对定位不能实现模式的转换

      4:子绝父相(子元素设置绝对定位,父元素设置相对定位))

      固定定位(1:固定定位不占位置;

      2:可以实现模式的转换;

      3:以浏览器为基准进行定位;

      4:在屏幕上的位置固定不动。

      静态定位:(元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

      尤其有一点要说明的是z-index:设置元素的堆叠顺序,只有设置了绝对定位或者相对定位的元素才会使z-index的值起作用。

      那么定位和浮动又有什么关系和区别呢?

      首先,定位和浮动都会使元素脱离标准文档流,定位往往会更加精确的使元素在某个特定的区域显示,而浮动则会有许多不确定性。这些不确定性往往会使页面产生一下超出我们预期范围的影响。

      而且浮动往往是针对网页中盒子布局的时候使用,或者在li标签中。定位往往针对的是某个具体的元素或者块。

      总而言之,不管白猫黑猫能够抓到老鼠的就是好猫,所以,不管浮动还是定位,能够达到预期效果的都是可取的。所以要多看多写代码,将这些结构布局熟记于心,才能更加流畅的运用。

      

    用IE6的以后吃方便面都没有调料包!!!
  • 相关阅读:
    java工程文件路径的问题
    to_char
    tnsname.ora
    Linux(Centos)快速搭建SVN
    /etc/profile不生效问题
    不同servlet版本的web.xml的头部信息
    The serializable class XXX does not declare a static final serialVersionUID field of type long的警告
    面试:第六章:面试题收集
    面试:第一章:java基础各种区别
    面试:第二章:各种框架和中间件以及缓存数据库
  • 原文地址:https://www.cnblogs.com/H5C3XXN/p/5858356.html
Copyright © 2011-2022 走看看