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

    css定位

      1.定位可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。

      2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

      3.定位的组成:将盒子定在某一个位置    ‘

        1.定位模式(position):用于知道一个元素在文档中的定位方式。

        2.边偏移:则决定了该元素的最终位置。

      4.position  

        static静态定位   relative相对定位  absolute绝对定位  fixed固定定位

      5.边偏移 top  bottom  left  right   :相对于其父元素四条边线的位置    

      6.静态定位:

        选择器 { position : static} //无定位 很少用  

      8.相对定位:元素在移动过程中,元素相对于其原来的位置。(不脱标,继续保留原来的位置)

      9.绝对定位:在移动位置时,是相对于他的祖先元素来说的。(脱标,不占有原来的位置)

          9.1如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位

          9.2如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置

      10.子绝父相:子集是绝对定位的话,父集则用相对定位,这样子盒子将在父盒子上面显示。 

      11.固定定位:固定与浏览器的可视区域。页面滚动时元素的位置不会改变

        特点:以浏览器的可视窗口为参照点移动元素  跟父元素没有任何关系  不随滚动条滚动  脱标的(特殊的绝对定位)

      12.粘性定位:被认为是相对定位与固定定位的混合(不常用)

        特点:以浏览器的可视窗口为参照点移动元素(固定定位特点)  粘性定位占有原先的位置(相对定位特点)

    选择器 {position :sticky ;top:10px}   必须添加top、bottom、left、right中的一个才可以显示

      13.定位叠放次序:

     选择器 {z-index:1;} 数值可以是正整数、负整数、0、默认为auto,数值越大,盒子越靠上

       14.绝对定位水平垂直居中:子绝父相;left:50%-自身宽度或者高度。

      15.定位的拓展:特殊特性: 绝对定位与固定定位也和浮动类似。 行内元素 添加绝对或者固定定位,可以直接设置高度和宽度。   块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小  

        浮动的元素不会压住下面标准流的文字/绝对定位会压住下面标准流的文字

  • 相关阅读:
    Jerry入职SAP成都研究院14周年纪念日
    深入学习SAP UI5框架代码系列之七:控件数据绑定的三种模式
    深入学习SAP UI5框架代码系列之六:SAP UI5控件数据绑定的实现原理
    让电影票房飞一会儿,五一换个姿势重温经典
    云图说|ModelArts Pro,为企业级AI应用打造的专业开发套件
    抵制羊毛党,图计算“加持”互联网电商风控
    Faiss源码剖析:类结构分析
    一文带你了解华为云GaussDB的五大黑科技
    华为云云原生数据库GaussDB加速创新,企业核心数据上云信赖之选
    云图说|华为数据安全中心,助你保障云上数据安全!
  • 原文地址:https://www.cnblogs.com/zyq982796687/p/14429345.html
Copyright © 2011-2022 走看看