从头学前端-CSS基础05

>为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites;

> 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片
> 使用时主要移动背景图片位置，使用backgroud-position属性
> 一般情况下都是往上走，往左走，所以backgroud-position的值都是负值

> 字体图标展示的是图标，本质上是文字；可以改变颜色等属性
> 字体图标需要下载，下载地址有很多，推荐https://iconfont.cn/

> input {outline: none};

> 可以使图片，表单和文字对齐，垂直居中
> 只能应用于行内元素和行内块元素； 
> vertical-align: baseline | bottom | middle | top |
> 图片默认是基线对齐，会导致图片底侧和边框会有空隙；可以设置为其他属性，可以解决；图片

	> 超出部分隐藏 overflow: hidden
	> 文字用省略号代替 text-overflow: ellipsis;
	

- 多行文件溢出：
	> 在单行下添加如下属性：适用于webkit内核浏览器 

		display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

> css画三角形主要通过边框的宽度和颜色进行设置；
> 盒子宽度和高度为0
> 边框设置不同的宽度和颜色，获取不同的三角形

代码如下：

    display: block;

    width: 0;

    height: 0;

    margin: 0 auto;

    border-top: 50px solid transparent;

    border-right: 20px solid red;

    border-bottom: 0px solid red;

    border-left: 0px solid red;

  			/ _简写如下：_/

  			border-style: solid;

    border-color: transparent red transparent transparent;

    border-width: 50px 20px 0 0;

}

> 基本上在编写CSS之前都需要进行初始化；
> 	CSS初始化代码基本通用；

待编码