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

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

  • 相关阅读:
    取随机数
    端口号
    cut命令
    渗透
    ssh免密登陆
    漏洞扫描
    信息收集1:DNSEUM命令
    Centos6与Centos7的区别
    HAPROXY+KEEPALIVED实现负载均衡
    this的用法
  • 原文地址:https://www.cnblogs.com/zyq982796687/p/14429345.html
Copyright © 2020-2023  润新知