zoukankan      html  css  js  c++  java
  • html+css定位

    边偏移【top/right/bottom/left】

    定位模式

    position:

    static(默认):对于边偏移无效,一般用于清除定位的。/一个原来有定位的盒子,不需要定位了,就改成static/

    relative(自恋型):以自己的左上角为基点进行移动   //相对定位重要的一点事,他可以通过边偏移移动位置,但是原来占有的位置继续占有【不脱标】

    absolute(拼爹型):【脱标】//向上找定位,直到找到定位的父亲,直到html                        relative 占有位置【不脱标】  ; absolute /fixed不占有位置 【完全脱标】

    fixed(认死理型):跟父亲没有任何关系,完全脱标,不占有位置,不随滚动条滚动

    【2脱2不脱】

    static/relative:不脱标

    absolute/fixed:脱标

     通过z-index改变显示层级【取值可以是正值,负值或0】【默认为0,取值相同后来者居上,数字一定不能加单位】【只有(相对定位、绝对定位、固定定位)才有此属性,其余标准流、浮动、静态定位都无此属性,也不可指定此属性

    margin-left: -100px;会使盒子向右移动,而margin-right:100px不会【非常重要】/*就是margin为负值,就会项相反的方向移动*/

     复习一下:浮动也是脱标,转化成行内块样式

    绝对定位固定定位脱标才会转换成行内块样式; 不脱原来是什么样式还是什么样式;

    因此行内样式如果给了固定定位、绝对定位或浮动后,直接给宽高就行,不用转换display:inline-block/block

  • 相关阅读:
    react按钮防抖
    mac解决 gyp: No Xcode or CLT version detected!
    offsetTop、getBoundingClientRect().top
    纯前端实现微信自定义分享
    redux概念
    数字验证码多个输入框实现一个输入框效果
    使用vue-cli脚手架工具搭建vue工程项目以及配置路由
    jq实现广告栏单行或者多行上下无缝接滚动
    ant pagination分页
    小程序广告位上下滚动的效果
  • 原文地址:https://www.cnblogs.com/ningxinjie/p/10883302.html
Copyright © 2011-2022 走看看