• position定位,CSS入门必备, 好像以后有个更厉害的flex!


    定位

    可通过position属性还设置元素的定位。

      ​可选值:static 默认值 没开启

    ​       relative 开启相对定位

    ​       absolute 开启绝对定位

    ​       fixed 开启固定定位(绝对定位的一种)

      开启定位后可通过left、right、top、bottom四个属性来设置元素偏移量。

      left:元素相对于其定位位置的左侧偏移量。(距离左边多少 ——— 向右移)

      通常只需选择其中两个就可对元素进行定位。(水平垂直方向各一个)

    relative

      1、相对定位指相对于元素在文档流中原来的位置进行定位。

      2、开启相对定位的元素不会脱离文档流。故相对定位不会改变元素性质,

         即块还是块,内联还是内联。

      3、相对定位会使元素提升一个层级。(定位元素可以盖住文档流元素)

      4、开启相对定位而不设置偏移量时元素不会发生任何变化。

      .box1{

    ​     position:relative;

    ​     left:100px;

      }

    absolution

      1、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。

    ​     若所有的祖先元素都没有开启定位,则相对于浏览器的窗口。

        ​ 故一般开启了子元素的绝对定位都会同时开启父元素的相对定位。

      2、开启绝对定位的元素会脱离文档流。故绝对定位会改变元素性质,

        内联会变成块,块的宽高默认都被内容撑开。

      3、绝对定位也会使元素提升一个层级。

      4、开启绝对定位而不设置偏移量时元素位置不变化。

    fixed

    与绝对定位不同的地方:

      1、固定定位永远相对于浏览器窗口进行定位。

      2、固定定位会固定在浏览器窗口的某个位置,不会随着滚动条而滚动。

        (广告、视频、回到顶部等)

      3、ie6不能兼容固定定位。

    元素的层级

      1、若定位元素的层级一样,则下边的元素会盖住上边的元素。(代码后写的盖住先写的)

      2、可通过z-index属性来设置元素的层级。

    ​     为z-index指定一个正整数作为其值,该值将会作为当前元素的层级。

    ​       a、层级越高,越优先显示;

    ​       b、父元素的层级再高,也不会盖住子元素;

    ​       c、对于没有开启定位的元素不能使用z-index.

    背景图片

      1、设置背景图片的重复方式:

    ​     可选值:repeat 默认值(双方向重复)

    ​         no-repeat 不重复(有多大就显示多大)

    ​         repeat-x 背景图片沿水平方向重复

    ​         repeat-y 背景图片沿垂直方向重复

      2、若背景图片大于元素默认显示图片的左上角,一样大就全部显示,小于就平铺。

      3、语法:background-image:url(相对路径);

      4、可同时给一个元素指定背景颜色和背景图片,则背景颜色将成为图片底色。

        (一般同时指定)

      5、背景图片默认贴着元素的左上角显示。

    ​     可通过background-position来调整背景图片在元素中的位置。

    ​       a、该属性可使用top、bottom、left、right、center中的两个值来指定。

    ​         如果只给一个值,则第二个之默认为center。

    ​         “九宫格“ top left 左上; center center 居中;

    ​       b、也可直接指定两个偏移量: 水平偏移量 垂直偏移量

      6、可通过background-attachment设置背景图片是否随页面一起滚动。

    ​     可选值:scroll 默认值 背景图片随窗口滚动

    ​         fixed 背景图片会固定在某一位置 (不随窗口滚动的图片一般设置给body)

      7、背景的简写属性

    ​    background属性可同时设置所有背景相关样式。

        无顺序、数量要求,不写的样式则使用默认值.

    ​ 示例:background:#bfa url(img/1.jpg) center center no-repeat fixed;

  • 相关阅读:
    01
    py5.30
    py 5.28
    py5.25
    py 5.24
    py 5.22
    py5.21
    py 5.18
    py 5.17
    py 5.16
  • 原文地址:https://www.cnblogs.com/isremya/p/12432062.html
Copyright © 2020-2023  润新知