• html中的定位


    html中的定位体系

    一、 分类

    1、常规流static

    2、浮动float

    3、相对定位relative

    4、绝对定位absolute

    5、固定定位fixed

    二、使用时的区分

    在网页布局中,常常都会使用到这5中定位方式 ,总体分为三大类:静态static、浮动float、绝对定位(relative、absolute、fixed)。

    1、默认值为static静态

    2、float浮动

    使用浮动布局时,需要注意2个问题

    1. float会导致父元素高度塌陷

    2. BFC 块格式化上下文

    * BFC能解决高度塌陷问题,用clear或overflow 属性 来解决  overflow不等于hidden  那么就会创建一个BFC

    clear:both 和overflow 的区别

    clear 判断外部元素影响到自身布局

    overflow 判断自身元素是否影响到网页布局

    3、绝对定位

    1.相对定位

    相对定位会在常规流中保留位置,并在原本位置的相对定位实际的坐标,使用相对定位时,会对其他元素进行覆盖。

    2.绝对定位

    绝对定位不会在常规流中保留位置,使用时注意原点的位置(祖先元素position不等于static),若没有这样的元素,那么原点为html包含块的原点

    3.固定位置

    固定定位不会在常规流中保留位置,坐标为当前视口的起点为起点

    三、在正常网站布局中,各种布局都会有使用,根据自己的实际情况具体使用不同的布局。

  • 相关阅读:
    libgdx 2D 粒子效果
    libgdx robovm binding umeng
    libgdx 3D Bullet 碰撞检测三
    《学习CSS布局》学习笔记
    保研机试准备之常用机试代码
    保研面试准备之自然语言处理知识点梳理
    软件工程应用与实践复习笔记
    Git学习笔记
    C、C++、C#中struct的简单比较
    从PEP-8学习Python编码风格
  • 原文地址:https://www.cnblogs.com/Csharp-Learn/p/9503089.html
Copyright © 2020-2023  润新知