定位 和 背景

2019-10-16  本文已影响0人  BJ000

相对定位:

relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移

absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性

inherit 从父元素继承 position 属性的值

相对定位:

position: relative;           相对定位还在文档流 不会改变   不会影响什么东西

position:static;          默认值 忽略水平方向 垂直方向

开启了相对定位以后,可以使用top、right、 bottom、left四个属性对元素进行定位。

绝对定位:

position:absolute;         开启绝对定位 会脱离文档流 会改变元素的性质        绝对:开了定位的离他最近的

开启了绝对定位以后,可以使用top、right、 bottom、left四个属性对元素进行定位。

固定定位:

position:fixed;        固定定位 IE6不支持固定

开启了固定定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。

固定定位的其他特性和绝对定位类似。

背景:

图片的路径:   background-image: url(1.jpg)

background-repeat      用于控制背景图片的 重复方式

可选值:

            repeat:默认值,图片左右上下平铺

            no-repeat:只显示图片一次,不会平铺

          

            repeat-x:沿x轴水平平铺一张图片

            repeat-y:沿y轴水平平铺一张图片

background-position          用来精确控制背景 图片在元素中的位置

可以通过三种方式来确定图片在水平方向 和垂直方向的起点:

                                                                                               关键字:top right bottom left center

                                                                                               百分比

                                                                                                数值

background-attachment           用来设置背景图 片是否随页面滚动

可选值:

                scroll:随页面滚动

                fixed:不随页面滚动

background          是背景的简写属性,通过这个 属性可以一次性设置多个样式,而且样式 的顺序没有要求

                             background: green url(1.jpg) no-repeat center center fixed;

CSS Sprites       是一种网页图片应用处理方式

                          通过这种方式我们可以将网页中的零星图 片集中放到一张大图上。

                         这样一来,一次请求便可以同时加载多张 图片,大大提高了图片的加载效率

背景偏移与定位:

                                    background-image:url("image/11.jpg");/* 图片路径*/

                                    background-repeat:no-repeat;/*固定一个*/

                                    background-position:left center;/*左中*/

                                    background-position: -50px -50px;/*数值*/

                                    background-attachment:fixed;/*不随页面滚动  固定*/

                                    background-repeat:no-repeat;/*只显示图片一次,不会平铺*/

上一篇下一篇

猜你喜欢

热点阅读