css高级

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术。

 

1  精灵图的使用

• 精灵图主要是设置背景小图标
• 通过借助background-image, background-positiion
• background-positiion x,y 通常不大于0

 上图蓝色的 1 ---框代表显示的盒子，2 ---红色的大框代表大的背景精灵图，3--绿色的框代表图标

如果3需要显示在1中位置中，则2精灵图需要向上和向左移动，从而 background-positiion 的 x, y 值越来越小。所有x, y 一般为不大于0 的值。

2. 字体图图标

由于精灵图标放大会失真，有一种技术的出现很好的解决了以上问题，就是字体图标

字体是图标

1. 选择下载字体库， icomoon 字库 http://icomoon.io或阿里 iconfont 字库 http://www.iconfont.cn 
2. 将字体包放入文件中
3. 字体声明，将 style.css 文件中的开头的字体声明代码赋值到 html 中
4. 打开 demo.html，复制页面中的方框图标到 html 代码中即可。

3. css 利用border生成三角形

 .name {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: red;
            /* 兼容性 */
            line-height: 0;
            font-size: 0;
        }

4. css 用户交互样式

4.1 鼠标的样式

 cursor: default | pointer | move | text | not-allowed;

属性值	描述
default	小白，默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.2  输入框设置

        input {
            /*  输入框获得取消焦点是边框颜色 */
            outline: none;
        }

        textarea {
            /*  输入框获得取消焦点是边框颜色 */
            outline: none;
            /*  输入框取消右下角拖动大小 */
            resize: none;
        }

4.3 图片，input， 文字对齐

由于图片，input 是行内块元素，默认的对齐方式是vertical-aline: baseline 基线对齐

 基线对齐会导致图片与input， 文字底部流下空白,​​​​​​​ 

1. 给图片添加 vertical-align : middle | top |bottom 等

2. 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

 

 5  文字溢出加...

1 单行文本

/* 1.先强制一行内显示文本 */
white-space: nowrap; 		/*默认 normal 是自动换行，nowrap是强制一行显示文本*/


/* 2.超出的部分隐藏 */
overflow: hidden;

/* 3.文字用省略号替代超出的部分用ellipsis:省略号*/
text-overflow: ellipsis;

2 多行文本 （存在兼容性，如果有问题就需要后台使用）

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

6 margin 负值消除重合的border

解决并排盒子之间的边框宽度加倍问题。 原理：让每个盒子压住前面的盒子，边框叠加。只要色值margin：-1px完美解决

7 文字环绕图片

由于浮动不会遮挡文字，只要设置图片浮动从而形成了图片环绕图片

 8 行内块元素由于代码属书写规范形成的水平空白

    

 <img src="./bl3.jpeg" alt="">
 <img src="./bl3.jpeg" alt="">
 <img src="./bl3.jpeg" alt="">
 <img src="./bl3.jpeg" alt="">

上面图片由于代码书写规范，中间存在换行，浏览器当做一个空格元素 就形成了水平的空格

 充分利用它这个现象可以用的特定需要间隔的样式中, 之间的父盒子间隙就是盒子的font-size的大小值，如图