CSS高级 Day15

1.  精灵图

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

2. 精灵图的使用

使用精灵图核心总结：

     1.精灵图主要针对于小的背景图片使用。

     2.主要借助于背景位置来实现 background-position。

     3.一般情况下精灵图都是负值。（千万注意网络中的坐标：x轴右边是正值，左边是负值）

 background: url(images/sprites.png) no-repeat   -182px 0;

3. 字体图标

字体图标 展示的是图标，本质属于字体。

推荐下载网站：

        icomoon字库  http://icomoon.io

        阿里iconfont字库  http://www.iconfont.cn/

4.CSS三角制作

.box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }

5.CSS用户界面样式

5.1 鼠标样式cursor

li  { cursor :pointer; }

default        小白 默认

pointer        小手

move        移动

text        文本

not-allowed        禁止

 5.2 轮廓线 outline

表单去掉默认的蓝色边框          outline ：0；或者outline：none；

5.3 防止拖拽文本域 resize

textarea { resize :none; }

5.4 vertical-align 属性应用

5.4.1 设置一个元素的垂直对齐方式，只针对行内元素或者行内块元素有效

vertical-align：baseline | top | middle | bottom

baseline       默认，元素位置放在父元素的基线上

top        把元素顶端与行中最高元素的顶端对齐

middle       把此元素位置放在父元素的中部

bottom        把元素的顶端与行中最低的元素的底端对齐

5.4.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方案：
        1.给图片添加vertical-align:middle | top | bottom 等

        2.把图片转换为块级元素 display ：block；

6. 溢出的文字省略号显示

1.单行文本溢出显示省略号-必须满足三个条件：

/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;

2.多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
 /* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7.常见布局技巧

7.1 margin负值的巧妙运用

<style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
</style>

7.2 CSS三角强化的巧妙运用

<style>
         .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
           /* 1.只保留右边的边框有颜色 */
           border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0 ;

        }
</style>

8.CSS初始化