zoukankan      html  css  js  c++  java
  • 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;

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

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

  • 相关阅读:
    类与类之间的关系图
    UML介绍
    数据建模
    状态图
    部署图
    用例图
    业务建模
    时序图
    postgresql 维护手册
    ashx文件的使用(转)
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/12910026.html
Copyright © 2011-2022 走看看