css中定位和背景的基本使用方式

目录

 1.什么定位有哪几种？定位元素是什么？

 2. 背景的常用设置

---

 1.什么定位有哪几种？定位元素是什么？

 定位元素：position的值不为默认值 static

    position:设置定位

设置偏移量：left、right、top、bottom

可选值：static  默认值，元素不设置定位

 relative 相对定位，相对于自己原来的位置进行偏移，原先位置保留，不脱离文档流的

absolute   绝对定位，相当于上个定位元素定位,如果都没有定位元素，则相对html定位，脱离文档流

fixed  固定定位，相对于浏览器视口（浏览器展示给用户的可见窗口），一种特殊的绝对定位，脱离文档流

sticky  粘滞定位，当它离包含块的距离和我们设置的一样的时候，就会固定，不脱离文档流，原先的位置也会继续占有

z-index 设置定位元素的层级。

 2. 背景的常用设置

 background-position：背景图片在元素的位置

        可选值：水平方向 垂直方向

              a.  left/right/center  top/bottom/center

                若只写一个center，则表示水平和垂直方向都居中

              b. % % ,默认为0% 0%为左上角，若只有一个值，则表示水平与垂直方向相同

              c.px px, 若只写一个值，则表示垂直方向为50%

              d.inherit 继承父元素的属性

            → 当图片大于元素的时候，优先显示图片左上

              当图片等于元素的时候，会将背景图片完整显示

              当图片小于元素的时候，会默认从左向右平铺，以使图片铺满包含块

            
    background-repeat:设置背景图是否在元素内平铺

        可选值：

              a.repaet:默认值，背景图在元素内平铺

              b.repeat-x:设置背景图在水平方向平铺

              c.repeat-y:设置背景图在垂直方向平铺

              d.no-repeat:设置背景图在元素里不平铺

              e.inherit:背景图继承父元素的属性
 

    background-size：宽度 高度(背景图的大小 )

        可选值：

              a.length:宽度 高度，若只设置一个值，第二个值则是auto

              b.%:设置图片在背景区域里的百分比，若只设置一个值，第二个值则是auto

              c.cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

              d.contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 -->
   background-origin:指定背景图像的定位区域，通常配合位置使用

        可选值：

              a.padding-box  从内部距处开始计算

              b.content-box  背景图片的偏移量从内容区处计算

              c.border-box   从边框开始计算偏移量

            
    background-clip:指定背景图像的绘画区域

        可选值：

              a.border-box 默认值。背景绘制在边框方框内（剪切成边框方框）

              b.conten-box 背景绘制在内容方框内（剪切成内容方框）

              c.padding-box 背景绘制在衬距方框内（剪切成衬距方框)
     background-attachment:设置背景是否随滚动条滚动

        可选值：

              a.fixed 背景图不随滚动条滚动

              b.scroll 背景图随滚动条滚动 -->
    background:简写时background-size要写在background-position后面，用/隔开