• css 定位详解


    定位模式
    static 静态定位-> 几乎不用

    relative 相对定位
    1 相对于原来在标准流中的位置来说的;
    2 在原来标准流的区域继续占有,后面盒子仍然以标准流方式对待它, 后面盒子不会动
    相对定位 水平居中方法:
    (1) margin : 0 auto;

    absolute 绝对定位: 是元素带有定位的父级元素来 移动位置
    1 完全托标----完全不占位置
    2 父元素没有定位,则浏览器为准定位
    子绝父相 -》 子元素绝对定位,父元素相对定位

    绝对定位水平居中方法:
    (1) left:50%;
    (2) margin-left: -100px; : 让盒子向左移动 自身宽度的一半, 负值

    fixed 固定定位
    1 完全托标----完全不占位置
    2 只认浏览器的可视窗口---- 浏览器可视窗口 + 边偏移属性 来设置元素的位置
    (1) 跟父元素没有任何关系
    (2) 不跟随滚动条滚动
    定位 = 定位模式 + 边偏移


    叠放顺序
    z-index 特性:
    1 属性值:正整数 负整数 或 0,数值越大,盒子越靠上
    2 数字后面不能加单位
    3 只能应用于 相对定位 ,绝对定位 和固定定位的元素, 其他标准流,浮动和静态定位无效.

    绝对定位改变display属性
    /*块级元素 不给width 默认通栏显示*/
    /* 1 利用 display inline-block 行内块不给 width 默认的宽度就是内容的宽度*/
    /*display: inline-block;*/

    /* 2 浮动, 也能转换*/
    /*float: left;*/

    /*3. 绝对定位(固定定位) 也能转换 */
    /*position: absolute;*/
    /*position: fixed;*/

    height: 100px;
    background-color: pink;
    padding: 20px;

    所以说: 一个行内的盒子,如果加了浮动,固定定位 和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等

    绝对定位和浮动不会触发外边距合并

  • 相关阅读:
    win7安装ruby on rails开发环境
    ZOJ 3802 Easy 2048 Again 像缩进DP
    【IOS】 遍历info 所有内容 && 唯一的节能设备UUID
    IBM即将倒闭,微软也从崩溃18个月
    F4107Usart数据处理程序
    Samza/KafkaAnalysizing
    krpano音量控制(我们已经转移到krpano中国网站 krpano360.com)
    使用Visual Studio创建映像向导(Image Sprite)——Web Essential
    C#控件系列--文本类控件
    Java Swing 探索(一)LayoutManager
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/12910026.html
Copyright © 2020-2023  润新知