zoukankan      html  css  js  c++  java
  • CSS盒子定位

    又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功,好了,闲聊就到这里吧,下面我分享下这周老师讲到的一些内容,以下都是自己的理解哈,仅供参考:

    CSS盒子定位:

    什么是盒子定位呢,顾名思义,就是元素盒子(以下主要以块级盒讲解)在页面中的位置,定位就是确定他的位置,盒子定位分为以下四种 :

    1、静态位置(position:static)也就是默认值:

    每一个元素在没有float值的时候,都有position值,就是static,可以直接理解它在是默认值的时候就是常规流,所有规则与常规流一样;

    2、相对位置(position:relative):

    相对定位:相对于自己原来的位置进行移动。
    实际代码操作:对于标签样式先声明
    position:relative;
    再描述移动方向与像素大小
    left带正数向右移,以此类推,正数情况下方向相反,那么在这种情况下对于初学的我们,这种定位可以以带负数形式就与标签头方向相同了。
    以相对定位移动盒子后盒子时不脱离标准流的,所移动的是一个“虚影”,并非整个盒子往那边移动,所以盒子移动之后,周围的盒子是不会发生变化的。
    相对定位在实战中用得比较少,一般用于盒子微调。
    3、固定位置(position:fixed):

    固定定位,顾名思义就是固定盒子不随网页滑动而移动

    实际代码:position:fixed;

    可以通过top、bottom、left、right设置像素值来固定位置;

    一般用于导航栏或者网页角落的广告;

    4、绝对位置(position:absolute):

    绝对定位使元素的位置与文档流无关,也就是脱离文档流,因此不占据空间,比如说有三个纵向排列的三个元素盒子,尺寸宽高都为100px,如果给中间的盒子设置了position:absolute;那么他就会脱离出来,它下面的那个盒子就会向上浮,绝对定位盒子的包含块主要看他父级或祖先级里面有没有定义了position值的,如果有,就是他的包含块;

    这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

    其实相对定位与绝对定位都属于常规流。

  • 相关阅读:
    如何用机器学习强化市场营销活动。
    大数据统计脚本, 分城市订单统计
    宇宙常量与增长黑客。
    病毒传播效果的衡量公式
    浅谈对增长黑客的理解
    大数据分析, 数据挖掘, 机器学习,找到产品改进的爆点。
    R语言的日期运算
    安装语言包-英文(美国)
    selenium page objects
    logging模块
  • 原文地址:https://www.cnblogs.com/potapo-tudou/p/10540166.html
Copyright © 2011-2022 走看看