html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）

一、背景图片

背景图片默认显示的是图片的原始尺寸，如果背景图片大于元素尺寸，则只能显示图片的一部分(左上角)。

1.background-image: 设置元素的背景图片。

                url("图片路径")

                注意：

                        当图片比较小时，默认会以平铺的方式铺满整个背景区域。

                平铺：

                        图片会在水平和垂直两个方向上重复自己，直至背景区域填充完整。

2.background-repeat: 设置背景图片是否重复显示。

                当背景图片的尺寸小于元素尺寸时，背景图片会重复显示直到铺满整个元素。

                值：

                        repeat：默认值，平铺/重复出现。

                        no-repeat：不重复。

                        repeat-x：水平平铺。

                        repeat-y：垂直平铺。

                        space：保持图片的大小平铺满整个背景区域，剩余空间作为图片之间的间隙平分。

                        round：保持图片的完整性，根据背景区域图片相对应拉伸填充。

3.background-attachment: 设置背景图片是否固定。

                    背景图片是否随着页面的其他部分滚动。

                    值：

                            scroll：默认值，背景图片会随着滚动条而滚动。

                            fixed：背景图片不会随着滚动而滚动。

4.background-position: 设置背景图片横向和纵向的位置，默认为0 0。

                    设置为50%可以实现居中。

5.background-size: 设置背景图片的尺寸，分别表示宽和高。

                图片的大小仅设置一个方向，另一个方向根据图片大小自动缩放。

                值：

                        contain：根据容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在容器之内，容器范围可能不被完全占用。

                        cover：根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器。

                        -数值：第一个值为X轴(宽度)，第二个值为Y轴(高度)。

                                单位：

                                        px：像素，固定的大小。

                                        %：百分比，以容器的大小作为标准进行计算。

                        -值为一个：该值将作用于X轴(宽度)位置，高度为auto，此时的背景图片高度以X轴(宽度)作为参考进行比例缩放。

二、精灵图片

CSS SCRIPT：css图片精灵或雪碧图。

什么是精灵图片：

            精灵图片就是将多张图片放置到一张大的图片上面。

            精灵图片主要是当做背景图片插入。

            为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，减轻服务器的压力。

 

三、元素内容溢出

1.元素内容溢出：当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容任然会显示。

2.overflow: 设置元素溢出部分内容的显示方式，默认为显示。

                值：

                        visible：默认值：内容不会被隐藏，溢出的内容出现在元素大小之外。

                        hidden：溢出的部分不显示。

                        scroll：溢出的内容可以滚动查看。

                        auto：隐藏溢出内容，出现滚动条。

3.overflow-x: 设置水平方向溢出内容的显示方式。

                overflow-x: scroll;

4.overflow-y: 设置垂直方向溢出内容的显示方式。

                overflow-y: scroll;

5.文本不换行：

            white-space: nowrap;（强行在同一行显示）

            text-overflow: ellipsis;（文本溢出以省略号...为后缀。）

6.resize: 允许用户调整元素的大小。

               值：

                        none：默认值，不能调整元素的大小。

                        horizontal：允许用户调整元素的宽度。

                        vertical：允许用户调整元素的高度。

                        both：允许用户调整元素的宽高。

四、长度单位

px，表示像素，1px相当于屏幕上最小的一个显示单位。

em，表示当前元素父元素的字体大小。

rem，表示根元素的字体大小。

1vw表示浏览器窗口宽度的1%。

1vh表示浏览器窗口高度的1%。

cm，厘米。

mm，毫米。

pt，磅。