zoukankan      html  css  js  c++  java
  • 浮动float,定位position理解

    浮动,定位可以实现网页的排版

    float属性总结
    使用场景一:实现网页中并排布局
    特点:
    实现左右并排时
    1、当父元素足够宽度足够时,则依次布局
    2、浮动的元素占据空间的宽度就是内容的宽度

    缺点:
    影响:父元素高度塌陷
    原因:子元素

    清除浮动方法
    1、可以增加父元素的高度
    2、可以增加一个空的div,然后让他清除上下左右浮动及clear:both;

    position属性总结
    使用场景:定位可以使元素固定在某一位置


    1、有绝对定位,相对定位,固定定位3中属性


    A、绝对定位(要有一个参照点),最好以最近的一个父类元素为参照,让父类元素相对定位
    特点:
    a、会脱离文档流,原本在文档流占用的空间会释放出来
    b、原点计算是根据最近一个有定位的父类元素,如果有定位,就根据body的(0 ,0)定位

    B、相对定位
    使用场景一:两个元素明显重叠时
    a、不会脱离文档流(不会释放原来空间)
    b、原点计算根据自己在标准文档流的位置

    C、固定定位
    a、脱离文档流(内容有多宽,就有多宽)
    b、原点计算永远跟着窗口

  • 相关阅读:
    vue--常用指令
    vue--npm的使用
    DRF--认证和权限
    DRF--路由组件和版本控制
    nginx--代理和负载均衡
    DRF--重写views
    DRF--ModelSerializer和时间格式化
    DRF--验证器
    DRF--序列化
    DRF--介绍和安装
  • 原文地址:https://www.cnblogs.com/hy-sunny/p/5187001.html
Copyright © 2011-2022 走看看