背景图片，图片精灵，元素内容溢出，长度单位的应用！

1.背景图片

<style>里面设置

background-image: url(../图片); 

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

                                  url("图片路径")

                注意：

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

                平铺：

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

background-repeat: round;

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

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

                    值：

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

                        no-repeat：不重复。

                        repeat-x：水平平铺。

                        repeat-y：垂直平铺。

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

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

 background-attachment: scroll; 

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

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

                        值：

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

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

 background-image: url(./图片);

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

background-position: 50% 50%;

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

background-position: -100px -100px; 

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

background-size: 200px 150px;

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

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

                    值：

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

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

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

                            单位：

                                px：像素，固定的大小。

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

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

background-size: 100% 100%;

                背景图片尺寸可以通过100%，设置为和元素等宽等高。

---

  2.图片精灵

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

        什么是精灵图片：

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

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

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

<style>
        section{
            /* 背景图片大小是1010*1010，每行或者每列7/1010=144px */
            width: 144px;
            height: 144px;
            border: 5px solid;
            background-image: url(icons.jpg);
            margin: 30px auto;
        }
        section:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-size: 350px 350px;
            /* 闹钟 */
            /* 右上角从1开始，左上角从0开始 */
            /* background-position: -200px 0px; */
            /* background-position: 150px 350px; */
            /* 篮球 */
            /* background-position: -200px -200px; */
            /* background-position: 150px 150px; */
            /* 博士男 */
            /* background-position: -100px -100px; */
            /* background-position: 250px 250px; */
            /* 一堆书 */
            /* background-position: -300px -150px; */
            background-position: 50px 200px;
 </style>

首先1.设置图片的长

        2设置图片的宽

        3设置边界

        4.添加图片

        5.设置上下间距

需要寻找下一张图片

        ection:nth-of-type(2)

        设置宽高/添加图片尺寸/最后选择图片

---

3.元素内容溢出

 #box{

            width: 200px;

            height: 200px;

            background-color: #ccf;

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

         overflow: hidden; 

         overflow: scroll; 

         overflow: auto; 

         overflow: visible; 

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

                    值：

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

                        hidden：溢出的部分不显示。

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

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

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

                overflow-x: scroll;

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

                overflow-y: scroll;

                文本溢出以省略号...为后缀。

                 文本不换行 

                     white-space: nowrap; 

                    text-overflow: ellipsis; 

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

                    值：

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

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

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

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

4.长度单位

<style>
        #px{
            font-size: 30px;
        }
        #em{
            font-size: 2em;
        }
        #rem{
            font-size: 2em;
        }
        #vw{
            font-size: 2vw;
        }
        #vh{
            font-size: 2vh;
        }
        #cm{
            font-size: 2cm;
        }
        #mm{
            font-size: 10mm;
        }
        #pt{
            font-size: 30pt;
        }
    </style>
</head>
<body>
    <p id="px">px，表示像素，1px相当于屏幕上最小的一个显示单位。</p>
    <p id="em">em，表示当前元素父元素的字体大小。</p>
    <p id="rem">rem，表示根元素的字体大小。</p>

    <p id="vw">1vw表示浏览器窗口宽度的1%。</p>
    <p id="vh">1vh表示浏览器窗口高度的1%。</p>

    <p id="cm">厘米</p>
    <p id="mm">毫米</p>
    <p id="pt">磅</p>
</body>