05-CSS图片整合技术&文本溢出

图片整合技术

已逐渐淘汰，了解即可

1. 作用：可以通过把很多小的图标整合到一张大的图片上，通过背景定位技术移动图片从而实现小图标位置

2. 别名：css sprites、精灵图、雪碧图

3. background-position

4. 优点：减少网页http请求，提高页面性能；减少图片的字节；解决图片命名的困扰；只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

5. 缺点：图片合并麻烦；图片适应性差；图片定位繁琐；可维护性差。

div{
background:url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
}

文本溢出属性

1. 属性：overflow

2. 属性值 visible 默认值 hidden 隐藏 scroll 滚动 auto 自动

3. 拓展：

   overflow-x/y 沿着某个方向设置溢出显示方式

案例：实现移动端页面横向滚动导航

div{
    width: 390px;
    /* 导航的高度是88px 二倍图 */
    height: 44px;
    background-color: skyblue;
    overflow-x: auto;
}
ul{
    width: 1000px;
    height: 44px;
}
li{
    float: left;
    width: 100px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}

<div>
        <ul>
            <li>首页1</li>
            <li>首页2</li>
            <li>首页3</li>
            <li>首页4</li>
            <li>首页5</li>
            <li>首页6</li>
            <li>首页7</li>
            <li>首页8</li>
            <li>首页9</li>
            <li>首页10</li>
        </ul>
    </div>

省略号的设置方法

当单行文本超出，需要设置省略号，需要满足以下条件：

1. 容器宽度：width:value

2. 文本强制在一行内显示：white-space:nowrap

3. 溢出内容为隐藏：overflow:hidden

4. 溢出文本显示省略号：text-overflow:ellipsis

案例：实现电商页面的商品介绍部分布局

div{
    width: 810px;
    height: 210px;
    border: 1px solid #000;
    margin: 100px auto;
}
ul{
    width: 201px;
    height: 210px;
    border-right: 1px solid grey;
    float: left;
}
h1{
    width: 201px;
    height: 140px;
    background: url(https://img10.360buyimg.com/seckillcms/s500x500_jfs/t1/105628/9/19249/75286/61429dbbE499f5dc3/cf86281775e0f517.jpg) no-repeat center;background-size: cover;
}
h2{
    /* 1.设置固定的宽度 */
    width: 201px;
    height: 38px;
    font-size: 12px;
    /* 2.设置文本在强制性一行内显示 */
    white-space: nowrap;
    /* 3.溢出的内容要隐藏 */
    overflow: hidden;
    /* 4.将隐藏的文本内容设置为省略号 */
    text-overflow: ellipsis;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 38px;
    text-align: center;
}
h3{
    width: 201px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: red;
}

<div>
    <ul>
        <h1></h1>
        <h2>敷尔佳 医用透明质酸钠修复贴 医用敷料 激光术后 皮肤修复 肌肤过敏 轻中度痤疮 促进创面愈合（5片装/盒）</h2>
        <h3>￥ 108.00</h3>
    </ul>
    <ul>
        <h1></h1>
        <h2>敷尔佳 医用透明质酸钠修复贴 医用敷料 激光术后 皮肤修复 肌肤过敏 轻中度痤疮 促进创面愈合（5片装/盒）</h2>
        <h3>￥ 108.00</h3>
    </ul>
    <ul>
        <h1></h1>
        <h2>敷尔佳 医用透明质酸钠修复贴 医用敷料 激光术后 皮肤修复 肌肤过敏 轻中度痤疮 促进创面愈合（5片装/盒）</h2>
        <h3>￥ 108.00</h3>
    </ul>
    <ul style="border-right:none;">
        <h1></h1>
        <h2>敷尔佳 医用透明质酸钠修复贴 医用敷料 激光术后 皮肤修复 肌肤过敏 轻中度痤疮 促进创面愈合（5片装/盒）</h2>
        <h3>￥ 108.00</h3>
    </ul>
</div>