# 精灵图

# 精灵图（sprites）的使用

• 精灵图技术主要针对于背景图片使用，就是把多个小背景图片整合在一大张图片中
• 这个大图片也称为 sprites 精灵图
• 移动背景图片位置，此时可以使用 background-position
• 移动距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有何不同
• 因为一般情况下，往上左走都是负值
• 使用精灵图的时候需要精确测量，每一个小背景图片的大小和位置

# 字体图标

# 字体图标的产生 iconfont

字体图标可以为前端工程师提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体

# 字体图标的优点

• 轻量级：一个图标字体要比一系列的图片小，一旦加载了，图标会马上渲染出来
• 灵活性：本质其实是文字，可以随意更改颜色，产生阴影，透明效果等
• 兼容性：几乎支持所有的浏览器

# 字体图标的下载

• icomoon 字体库
• 阿里 iconfont 字库

# 字体图标的引入

@font-face {

    font-family: 'icomoon';

    src: url('fonts/icomoon.eot?h39d17');

    src: url('fonts/icomoon.eot?h39d17#iefix') format('embedded-opentype'),

        url('fonts/icomoon.ttf?h39d17') format('truetype'),

        url('fonts/icomoon.woff?h39d17') format('woff'),

        url('fonts/icomoon.svg?h39d17#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: block;

}

• style 标签中引入
• 文件夹中引入 font 文件
• 设置字体 font-family: 'icomoon'

# 字体图标的追加

把压缩包里里面的 selection.json 从新上传，然后选择自己想要的图标，从新下载压缩包

# CSS 三角

.box {

    width: 0;

    height: 0;

    border: 30px solid transparent;

    border-bottom: 30px solid pink;

}

# CSS 用户界面样式

# 鼠标样式 cursor

li {cursor: pointer;}

# 轮廓线 outline

input {

    outline: none;

}

# 文本域防止拖拽 resize

textarea {

    resize: none;

}

# vertical-align 属性应用

# 实现行内块和文本的垂直居中

常用于设置图片，表单，行内块元素和文字的对齐方式

vertical-align: baseline  | top  | middle  | bottom

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

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

• 给图片加 vertical-align: middle | top | bottom 等（推荐使用）
• 把图片转换为块级元素 display: block

# 溢出文字省略号显示

# 单行文本溢出显示省略号

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

# 多行文本溢出显示省略号

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;            //转换为弹性盒子模型

-webkit-line-clamp: 2;            //只显示两行

-webkit-box-orient: vertical;    //设置盒子排列方式

# 常见布局技巧

# margin 赋值运用

让每个盒子 margin 往左侧移动 - 1px 正好压住相邻盒子边框

margin-left: -1px;

鼠标经过某个盒子的时候，提高当前盒子的层级即可，（如果没有定位，则加相对定位），如果有定位，则加 z-index

position: relative;

position: relative;

z-index: 1;

# 文本围绕浮动元素

只需要让图片左浮动

# CSS 三角强化

div {

    width: 0;

    height: 0;

    border-color: transparent pink transparent transparent;

    border-style: solid;

    border-width: 100px 40px 0 0;

}

# CSS 定位

# 定位

# 定位介绍

• 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
• 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且压住其他盒子

# 定位组成

• 定位：将盒子定在某一位置，所以定位就是按照定位的方式移动摆放盒子
• 定位 = 定位模式＋边偏移
• 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

# 定位模式

定位模式决定元素的定位方式，通过 CSS 的 position 属性来设置，其值可以分为四个

# 边偏移

边偏移就是定位的盒子移动到最终位置，有 top，bottom，left，right 四个属性

# 静态定位 static

静态定位是元素的默认定位方式，无定位的意思

选择器 {position: static;}

• 静态定位是按照标准流特性摆放位置
• 静态定位在布局时很少用到

# 相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

选择器 {position: relative;}

• 它是相对于自己原来的位置来移动的（移动位置的时候的参照点是自己原来的位置）
• 原来在标准流的位置继续占用，后面的盒子仍然以标准流的方式对待他（不脱标，保留原来位置）

# 绝对定位 absolute（重要）

绝对定位是元素在移动的时候，他相对祖先元素来说的

选择器 {position: absolute;}

• 如果没有祖先元素，或者元素没有定位，则以浏览器为准定位
• 如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先作为参考点移动位置
• 绝对定位不占有原先位置

# 子绝父相

# 固定定位 fixed（重要）

固定定位是元素固定于浏览器的可视区的位置，主要使用场景，可以在浏览器页面滚动时元素的位置不会改变

选择器 {position: fixed;}

• 以浏览器的可视窗口为参照移动元素
  • 跟父元素没有关系
  • 不随滚动条滚动
• 固定定位不占有原先的位置
  • 固定定位也是脱标的，其实固定定位也可以看做成一种特殊的绝对定位
• 小算法
  • 让固定定位的盒子 left: 50% 走到浏览器可视区一半的位置
  • 让固定定位的盒子 margin-left: 版心宽度的一半距离，多走版心的一半位置就可以让固定的盒子定位到盒子贴着版心右侧对齐了

# 粘性定位 sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合，Stickly 粘性的

选择器 {position: stickly; top:10px;}

• 以浏览器的可视窗口为参照移动元素（固定定位特点）
• 粘性定位占有原先位置（相对位置特点）
• 必须添加 top，left，right，bottom 其中一个才有效

# 定位叠放次序 z-index

在使用定位布局时，可能出现盒子重叠的情况，此时，可以使用 z-index 来控制盒子的前后顺序（z 轴）

选择器 {z-index: 1;}

• 数值可以为正整数，负整数或者 0，默认值是 aoto，数值越大，盒子越考上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z-index 属性

# 定位的拓展

# 绝对定位盒子居中

• left: 50% ：让盒子的左侧移动到父级元素的水平中心的位置
• margin-left: -100px ：让盒子向左移动自身宽度的一半

# 元素的显示与隐藏

# display

• display: none; 隐藏元素
• display: block; 除了转换为块级元素外，同时还有显示元素的意思

注意：display 隐藏后，不在占用原有位置

# 2.2 visibility 可见性

• visibility: visble; 元素可视
• visibility: hidden; 元素隐藏

注意：visibility 隐藏元素后继续占用原来位置

# overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（只会令超出其指定高度及宽度的部分显示或者隐藏）

# 私有前缀

# 浏览器私有前缀

# 私有前缀

• -moz-：代表 firefox 浏览器的私有属性
• -ms-：代表 ie 浏览器的私有属性
• -webkit-：代表 safari，chrome 私有属性
• -o-：代表 Opera 私有属性

# 提倡的写法

-webkit-border-radius：10px;

# 2D 转换

# 2D 转换 translate

# 概念

转换（transform）是 CSS3 中具有颠覆性的特性之一，可以实现元素的位移，旋转，缩放等效果

# 语法

transform: translate(xpx,ypx);

transform: translateX(npx);

transform: translateY(npx);

transform: translateY(50%);

# 重点

• 定义 2D 转换中的移动，沿着 x 和 y 移动元素
• translat 最大的优点：不会影响其他元素的位置
• translate 中的百分比单位是相对自身元素的的 translate（50%，50%）
• 对行内标签没有效果

# 2D 旋转 rotate

# 语法

transform: rotate(360deg);

# 重点

• rotate 里面跟的度数，单位是 deg
• 角度默认为正时，顺时针，负时，为逆时针
• 默认旋转的中点是元素的中心点

# 切换中心点 transform-origin

# 语法

transform-origin: x y;    //x,y可以是方位名词left等，也可以是百分比 像素

# 重点

• 注意后面的参数 x 和 y 用空格隔开
• xy 默认转换的中心是元素的中心点（50% 50%）
• 还可以给 xy 设置相似，方位名词，百分比

# 切换之缩放 scale

# 语法

transform: scale(2,2);    //宽度和高度缩放为原来的二倍

transform: scale(2);        //简写方式，整体缩放为原来的二倍

# 注意

• 注意其中的 x 和 y 用逗号分隔
• scale 缩放的最大优势：可以设置中心点缩放，默认以中心点缩放，而且不影响其他盒子

# 2D 转换综合写法

# 语法

transform: translate(x,y) rotate(xdeg) scale(2,2);    //顺序不能改变

# 3D 转换

# 3D 移动 translate3d

# 语法

transform: translate3d(100px,100px,100px);

transform: translateX(100px) translateY(100px) translateZ(100px);

# 透视 perspective

# 语法

body {

    perspective: 500px;

}

/* 透视写在被观察元素的父盒子上面 */

# 3D 旋转 rotate3d

# 语法

transform: rotateX(360deg);

transform: rotateY(360deg);

transform: rotateZ(360deg);

transform: rotate3d(x,y,z,ndeg);

# 3D 呈现 transfrom-style

# 概述

• 控制子元素是否开启三位例题环境
• 代码写给父级，影响的是子盒子

# 语法

transform-style: preserve-3d;    //子元素开启例题环绕

transform-style: flat;            //子元素不开启例题环绕

# 动画 animation

# 动画的基本使用

# 先定义动画

//move 动画名称 0% 动画开始状态 100% 动画结束状态 

@keyframes move {

    0% {

        transform: translate(0px,0px);

    }

    100% {

        transform: translate(1000px,0px);

    }

}

# 在使用（调用）动画

div {

    animation-name: move;    //动画名称

    animation-duration: 1s;    //动画所需时间

}

# 动画常用属性

# 动画常用属性

# 简写属性

animation: name duration timing-function delay iteration-count direction fill-mode;

# animation-timing-function 常用属性