OXO1 写在前面
一.html和css
1.HTML和CSS的对比
（1）HTML只关注语义和结构，主要是对网页元素的整理和分类。
（2）CSS的主要使用场景就是美化页面，布局页面。
（3) CSS和HTML搭配使用，实现网页结构，表现分离。
2.CSS概述
（1）概念
CSS是叠层样式表（Cascading Style Sheets），也称为CSS样式表或级联样式表。
也是一种标记语言。
（2)作用
CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。
(3)CSS语法
CSS主要是由选择器以及一条或者多条申明组成。
选择器 { 属性1: 值1； 属性2: 值2； }
demo :
p { color: red; font-size: 12px; }
注：
选择器：指定修改样式的目标
声明： 要改成的样式
（4）CSS注释：
/* 我是被注释掉的内容 */
选择器分为：基础选择器和复合选择器两大类。
一. 基础选择器
基础选择器分为：标签选择器，类选择器，id选择器和通配符选择器。
1.标签选择器
(1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。
(2)语法
标签名 { 属性1： 值1； 属性2： 值2； .... }
demo :
<style> h1 { color: blueviolet; } h2 { color: red; } h3 { color: yellow; } </style> <body> <h1>我是标题1,我用了css样式</h1> <h2>我是标题2,我用了css样式</h2> <h3>我是标题3,我用了css样式</h3> </body>
2.类选择器
(1)使用类选择器可以实现为不同的标签差异化样式。
（2）语法:
/*定义*/ .类名 { 属性1： 值1 属性2： 值2 .... } /*调用*/ <div class='类名'> xxxx </div>
类选择器口诀：
样式点定义
class来调用
一个或多个
开发最常用
注意：
长名称或者词组可以使用中横线来为类选择器命名
（3）demo:
<style> .blueviolet { background-color: blueviolet; } .color { color: cyan; } .box { font-size: 35px; } </style> </head> <body> <div class="blueviolet color box">吵过，闹过，疯狂过，却从来没有后悔过，我们越来越笃定地相信，天长地久也不久。</div> </body>
注 ：
可以一次调用多个选择器，中间用空格分开。
3.id选择器
(1）语法
/*定义*/ #id名 { 属性: 属性值； }
/*调用*/
<div id="id名"></div>
口诀 ：
#号来定义
id来调用
只能调用一次
注意点:
id选择器一次只能调用一个
一个选择器只能调用一次
demo：
<style> #box { font-size: 35px; } </style> <body> <div id="box">第一次调用</div> </body>
4.通配符选择器
语法
* { 属性：属性值； }
注意点
通配符不需要调用，自动的就给所有的元素使用。
二.CSS字体样式属性
1.字体系列
p { font-family: “字体1",“字体2"; }
2.字体大小
p { font-site: 20px; }
单位：px（像素）
3.字体粗细
p { font-weight: 属性值; }
属性值：
normal 默认值：不加粗
bold 自定粗体：加粗
100-900 ：400等于normal 700等于bold
没有单位
4.文字样式
font-style: 样式；
样式：
normal ：默认
italic ： 斜体
5.复合属性的写法
p { /*font：font-style font-weight font-site/line-height font-family;*/ font: italic 700 20px "宋体"; }
注：
1.使用字体复合属性的时候，顺序不能颠倒。
2.至少要有font-size和font-family
三.文本样式属性
1.文本颜色
div { color: 颜色； }
颜色的三种表现形式
/*预定义颜色值*/ color: red; /*16进制 最常用*/ color: #FF0000 /*RGB*/ color: rgb(255,255,255)或者rgb(100%,0%,0%）
2.文本对齐
div { text-align: 对齐方式； }
对齐方式：
right 右边 left 左边 center 居中对齐
4.装饰文本
div { text-decoration: 装饰方式 }
装饰方式
none 默认
underline 下划线（链接a自带)
overline 上划线
line-through 删除线
5.首行缩进
p { text-indenx: 缩进； }
单位
px 像素 em 相对单位，相对于当前元素（font-size）1字的大小，如果没有设置当前元素没有设置大小，则会按照父元素的1个文字大小。
6.行间距
p { line-height: 行高 }
行间距 = 上间距 + 文本高度 + 下间距
四，CSS引入方式
CSS样式表的分类（根据书写的位置来分）
内部样式表(嵌入式) 行内样式表 外部样式表（链接式）
1.内部样式表（嵌入式）
嵌入式样式表指的是把css写在HTML页面中，但是css是单独抽取出来放在style标签中。
语法 ：
<style> div { 属性: 属性值； } </style>
2.行内样式表(内联样式表)
内联样式表是在元素标签内部的style属性中设定css样式,中间用";"隔开。
语法：
<div style="width:100px;height:100px;background:red"> 键盘敲烂，去拾破烂</div>
4.外部样式（链接式)
语法 ：
<link> rel="stylesheet" href="css文件路径”>
OXO3 CSS中
一.CSS复合选择器
1.后代选择器（包含选择器）
语法 :
元素1 元素2 { 样式声明 } demo ： ul li { 样式申明 }
注释：
元素2必须是元素1的后代元素。 后代选择武器是对**后代元素**起作用
2.子选择器
子选择器只对某元素的最近一级子元素起作用。
语法 ：
元素1>元素2 { 样式声明 }
3.并集选择器
并集选择器可以选择多组标签，同时定义样式。
语法：
元素1, 元素2, .... { 样式声明}
注：后代元素和子元素的区别
子元素： 只有嵌套里面的第一个元素才能称为子元素。 后代元素：儿子，孙子，重孙子等等都包括在内的元素。
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，或者选择第一或者第n个元素。例如：链接伪类，结构伪类等。
（1）链接伪类选择器
a:link /*选择所有未被访问的链接*/ a:visited /* 选择所有已被访问的链接 */ a:hover /*选择鼠标指针位于其上的链接*/ a:active /*选择活动链接(鼠标按下未谈起*/
注意点：
1.链接伪类标签的顺序（lvha) ：a:link a:visited a:hover a:active（不按照顺序，不会生效） 2.a标签在浏览器中有默认的样式，需要根据需求更改样式。 (2):focus伪类选择器
：focus 伪类选择器用于选取获得焦点（光标）的表单元素。
语法 ：
input:focus{ 属性： 属性值； }
(3)结构伪类选择器（css3）
：first-child：选取父元素的首个子元素的指定选择器
：last-child：选取父元素的最后一个子元素的制定选择器
：nth-child（n）：匹配属于父元素的第N个子元素，不论元素的类型
：nth-last-child（n）：匹配从父元素最后一个子元素开始倒数的子元素
代码示例：
<style> li:first-child{ /*选择第一个子元素*/ color: red; } li:last-child{ /*选择最后一个子元素*/ color: blue; } li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/ color: orange; } </style> </head> <body> <ul> <!-- 我是第一个，显示red --> <li>第一个子元素</li> <li>第二个子元素</li> <!-- 我是第三个，显示orange--> <li>第三个子元素</li> <li>第四个子元素</li> <li>第五个子元素</li> <li>第六个子元素</li> <!-- 我是最后一个，显示bluse --> <li>第七个子元素</li> </ul> </body>
效果图
二.CSS元素显示模式
1.概念
元素显示模式就是元素（标签）以什么方式进行显示。
2.分类
分为块元素和行内元素
(1)块元素
常见的块元素<h1>~<h6> <p> <div> <ul> <ol> <li>等
特点 ：
1.独占一行 2.高度，宽度，行边距，都可以控制 3.宽度默认是容器（父级）宽度的100% 4.是一个容器及盒子，里面可以放行内或者块级元素。
注意点 ：
文字类的元素内不能包含块级元素，比如：<p>,<h1>~<h6>
（2）行内元素（内联元素）
常见行内元素：<a> <strong> <b> <em> <i> <del> <s> <span>等
特点：
1. 相邻的行内元素,可以在一行显示 2.高度和宽度设置无效的 3.默认宽度是他本身内容的宽度 4.行内元素只能容纳文本或者其他行内元素
注意点：
<a>标签里面不能再<a> 特殊情况下<a>里面可以放块级元素，但是需要块级模式转换
(3)行内块元素
同时具有块元素和行元素的特点，例如：<img> <input> <td>。
特点 ：
1.和相邻的行内元素（行内块元素）在一行上，他们之间会有空白间隙，一行可以显示多行行内块元素。 2.默认宽度就是它本身内容的宽度 3.高度，行高，内外边距可以控制
3.显示模式的转换
转换为块元素
display: block;
转换为行内元素
display: inline;
转换为行内块元素
display: inline-block;
4.背景
通过css背景属性可以设置元素背景颜色，背景图片，背景平铺，背景像素固定等。
(1）背景颜色
background-color: 颜色值； /* 默认为transparent （透明) */
(2）背景图片
实际开发中常用于logo或者一些装饰性的小图片或者超大的背景图片。
background-image: url(路径);
（3)背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
注意点：
1.默认 : repeat(平铺） 2.可以同时设置背景颜色和背景图片,不过图片会压住背景颜色。
(4）背景位置
background-position: x y;
注释：
x和y分别代表x坐标和y坐标，可以使用方位名词或者精确单位。
方位词（position)
top | center | bottom | left | center | right
注意点 ：
1.如果左右两个是方位名词，则两个词前后顺序可以颠倒。如：left top 和 top left 效果一样 2.如果只是指定了一样方位词，另一个默认居中对齐。 /*此时X轴是靠右对齐，则Y轴默认居中，反之亦然*/ background-position: right;
精确词
background-position：20px 40px;
注意点 ：
1.精确词第一个是X轴第二个是Y，不能颠倒 2.如果只有一个精确值，那么一定是X轴,则Y轴默认居中
混合单位
混合单位第一个必须是X轴第二是Y轴
（5）背景固定（背景附着）
background-attachment: scroll | fixed
注释
scroll :背景图片随着对象内容滚动 fixed : 背景固定
（6）背景属性复合写法
使用复合写法没有特定的顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
（7）背景颜色半透明
background: rgba(0,0,0,0.1);
注释：
最后一个参数是alpha透明的,取值0~1之间。
三.CSS三大特性
1.层叠性
两个或者多个相同选择器设置了相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
层叠性原则：
样式冲突 ： 遵循的原则是就近原则，哪个样式离结构近，就执行那个。 样式不冲突 ：不会层叠
demo
<style> div { width: 200px; height: 200px; font-size: 20px; line-height: 200px; /* background-color 产生冲突，会被层叠 */ background-color: red; text-align: center; } div{ background-color: blue; } </style> <body> <div>我是div盒子</div> </body>
2.继承性
子标签会继承父标签的某些样式。
demo :
<style> div { color: red; font-size: 18px; } </style> <body> <div> <p>我是div的子标签，我可以继承父标签的属性</p> </div> </body>
注：
合理的使用继承可以简约代码 可以继承的属性有：text-, font , line- 这些元素开头以及color属性。
继承里面的行高继承
body { font:12px/1.5 Miccrosoft YaHei; }
注释：
1.行高可以跟单位也可以不跟单位 2.如果子元素没有设置字体大小，则会继承父元素的行高1.5倍 3.如果子元素设置了字体大小，则行高为本身字体大小的1.5倍
3.优先级
当一个元素指向多个选择器，但是选择器定义的样式是同一个的时候，就会有优先级的产生。
注 ：
选择器相同，则执行层叠性。 选择器不同，则根据选择器权重执行。
优先级权重
选择器 选择器权重 继承 或 * 0.0.0.0 (0) 元素选择器 0.0.0.1 (1) 类选择器 伪类选择器 0.0.1.0 (10) ID选择器 0.1.0.0 (100) 行内样式 style="" 1.0.0.0 (1000) important 无穷大
注意点：
1.继承的权重为0，，不管父级元素权重有多高，子元素的权重都是0。 2.从左到右开始比较，相同位，比较下一位。 3.复合选择器会产生权重叠加 ,但是不会产生进位。
<style> /*标签选择器的权重为0.0.0.1*/ ul li { color: red; } /*两个标签选择器的权重之和为0.0.0.2*/ ul li { color: red; } </style>
五.CSS盒子模型（BoxModel)
1.基本概念
（1）所谓的盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是装内容的容器。
（2）盒子模型的组成 : 边框，外边距，内边距，内容。
2.边框（border)
(1）边框有三部分组成： 宽度，样式，颜色
border-with: 粗细 /* 一般用px作为单位*/ border-style：样式（ solid实线 dashed 虚线边框 dotted 点线边框 ) boder-color：颜色
demo:
div { width: 300px; height: 200px; border-width: 5px; border-style: solid; border-color: pink; }
（2）边框复合写法：
border: width style color (没有顺序
（3） 边框分开写
/*设置上边框为蓝色，其他为红色*/ /*写法一*/ div { width: 200px; height: 200px; border-top: 1px solid blue; border-bottom: 1px solid red; border-left: 1px solid red; border-right: 1px solid red; } /*写法二,利用层叠性*/ div { width: 200px; height: 200px; border: 1px solid red; border-top: 1px solid blue; }
(4）表格合并相邻的边框
相邻的两个表格的边框，粗细会叠加，可以用border-collapse来合并。
table, td, th { border: 1px solid pink; border-collapase: collapase font-size: 14px; text-align: center; }
注意点：
边框会影响盒子的大小，在测量盒子的大小的时候用，盒子实际大小减去border的大小。（前提是盒子设置了，width和height)
2.内边距（padding)
（1）内边距是边框和内容的边距。
div { width: 200px; height: 200px; padding-top: 1px ; padding-bottom: 1px ; padding-left: 1px ; padding-right: 1px ; }
（2）复合写法
padding: 5px; 代表上下左右的都有内边距
padding： 5px 10px; 代表上下内边距是5px 左右是10px
padding: 5px 10px 20px; 代表上边距5px ，左右10px 下边距20px
padding :5px 10px 20px 30px; 代表上边距5px,右边距10px,下边距20px,左边距为30px（顺时针）
注意点：
1.padding会影响盒子的实际大小，会使盒子撑大（前提是盒子设置了，width和height)
2.在测量盒子大小的时候要减去padding的值，而盒子的实际大小等于设置的盒子大小加上paddding值。
/*比如要设置一个200px*200px的盒子，而padding等于20*/ div { width: 160px; height: 160px; padding: 20px; } /*最后盒子的实际大小为（160+40）px*（160+40）px
3.盒子的外边距（margin)
（1）margin属性用于控制盒子和盒子之间的距离。
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下边距
注：margin复合简写和padding一样
（2）外边距的典型运用
外边距可以让块级盒子水平居中，要满足的条件：
1，盒子必须指定了宽度width
2.盒子左右边距都设置为auto .header { width: 200; margin: 0 auto; }
注：如果行内元素或行内块元素水平居中可以给父级元素添加 text-align: center。
（3）外边距的合并
同时使用margin定义块级的垂直外边距时，可能会出现外边距的合并。
<style> .div1 { width: 200px; ight: 200px; background-color: red; margin-bottom: 20px; } .div2 { width: 200px; height: 200px; background-color: blueviolet; margin-top：20px; } </style> </head> <body> <div class="div1">盒子一</div> <div class="div2">盒子二</div> </body>
（4）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素上边距，此时父级元素会塌陷较大的外边距，而子元素设置的上边距会失效。
<style> .father { width: 200px; height: 200px; background-color: red; margin-top:50px; /* 方法一 定义父级元素上边框 */ /* border: 1px solid transparent; */ /* 方法二为父级元素定义内边距 */ /* padding: 1px; */ /* 可以为父级元素添加overflow: hidden */ overflow: hidden; } .sun { width: 100px; height: 100px; background-color: blueviolet; margin-top: 100px; } </style>
</head> <body> <div class="father"> <div class="sun"></div> </div>
</body
4.清除内外边距
网页元素很多带有内外边距，而且不同浏览器默认的也不一样，因此在布局之间，首先要清除网页元素的内外边距。
* { padding: 0; margin: 0; }
注：
行内元素为了兼容性，尽量只设置左右边距，如果要设置上下边距可以转换成为块元素或者行内块元素。
六.CSS3新增
1.圆角边框
border-radius属性用于设置元素的外边框圆角。
原理
语法：
border-radius: length;
length :
可以是百分比或者n px length为圆的半径 可以设置不同的圆角： border-radius: 10px 20px 30px 40px (从左上角开始顺时针）
2.盒子阴影
box-shadow : h-shadow v-shadow blur spread color inset;
注释：
h-shadow：必须，水平阴影的位置。允许负值（往左）
v-shadow: 必须，垂直阴影的位置，允许负值。
blur: 可选，模糊距离（模糊程度）
spread：可选，阴影的大小（尺寸）
color： 可选，颜色
inset: 可选，将外阴影（outset)改成内部阴影。
注意点：
1.默认的是外阴影(outset)，但是不可以写这个单词，否则会导致阴影失效。
2.盒子的阴影不会占用空间，不会影响其他盒子的排序。
3.文字阴影
text-shadow: h-shadow v-shadow blur color
七.浮动（float)
1.网页布局的本质——用css来摆放盒子。把盒子摆放到相应的位置。
三种传统的布局方式： 标准流，浮动和定位。
标准流：（最基本的布局方式）
标准流就是按照规定好默认方式排列。
（1）块级元素会独占一行，从上向下顺序排列。（div hr p h1~h6 ul ol dl form table)
（2）行内元素会按照顺序，从左到右顺序排列，碰到父级元素边缘自动换行。（span a i em等）
2.浮动
语法：
选择器 { float: 属性值； } 属性： none 元素不浮动（默认） left 左浮动 right 右浮动
（1）浮动的作用：
改变元素标签的排列方式。最典型的运用让多个块级元素一行内排列显示。
3.浮动特性
（1）脱标
1. 脱离标准普通流的控制移动（浮）到指定的位置（俗称浮动） 2.浮动的盒子不在保留原先的位置（标准流的盒子可以进行占位）
（2）浮动元素——一行显示
如果多个盒子都设置了浮动，则它们会在一行内显示，并且顶端对齐排列。
左浮动和右浮动
注：
浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级盒子宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
（3）行内块特性
任何元素都可以浮动，设置浮动之后具有行内块元素相似的特性。
注：
浮动元素经常和标准流父级搭配使用
先用标准的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，复合网页布局第一准则。
.png)
4.网页布局原则
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设置盒子大小在设置盒子位置。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他的盒子也因该浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
5.清除浮动的原因，本质，策略
原因 ：
由于父级元素在很多情况下不好设置高度，但是盒子又不占有位置，最后父级元素高度为0时，就会影响下面的标准流盒子。(父级没高度 子盒子浮动了 影响下面布局）
本质 ：
消除浮动元素的影响。
策略：
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的盒子。
6.清除浮动的方法
（1）额外标签法（隔墙法，w3c推荐)
额外标签法是指在浮动元素末尾添加一个空的块标签。
语法 ：
选择器 { clear: 属性值 }
属性值： left right both
例子
<div style="clear:both"></div>
优点 ：
通俗易懂，书写方便
缺点 ：
添加许多无意义的标签，结构化较差。
（2）父级添加overflow
语法：
overflow: hidden | auto |scroll
(3）:after伪元素法
：after 方式是额外标签法的升级版。也是给父级元素添加
.clearfix:afterr { content: ""; display: block; height: 0; clear: bloth; visibility: hidden; } .clearfix { /*IE6,7专有 */ *zoom: 1; }
(4)双伪元素清除浮动(也是给父级元素添加)
.clearfix:before,clearfix:after { content: ""; display: table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; }
八.定位
1.定位与浮动
（1)浮动可以让多个块级盒子没有间隙的在一行排列显示,经常用于横向排列盒子。
（2）定位则是可以让盒子自由的在某个盒子内移动或者在固定在屏幕中某个位置，并且可以压住其他盒子。
2.定位组成
定位 = 定位模式 + 边偏移
(1)定位的模式（position)
值 语义
static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位
(2)边偏移
属性 示例 描述 top top: 80px 顶端偏移 bottom bottom：80px 底部偏移 left left: 80px 左偏移 right right: 80px 右偏移
4.定位的分类
（1）静态定位(无定位）
选择器 { position: static; }
静态定位按照标准流摆放位置，它没有边偏移
(2)相对定位（relative)
选择器 { position: relative; 边偏移： 值； }
特点:
1. 移动位置的时候是参照自己原来的位置的 2.不脱标，继续保留原来的位置。
（3）绝对定位（absolute)
选择器 { position : absolute 边偏移： 值； }
特点
1.如果没有父元素或者父元素没有定位，则以浏览器来转定位(Document文档） 2.如果父级元素有多个，并且都有定位（相对，绝对，固定定位），则以最近一个父级元素来定位。 3.绝对定位不会占有原先的位置（脱标）
(4）子绝父相
原因：
父级盒子需要占有位置（相对定位），子盒子不需要占有位置需要在父级盒子里面移动，所以是绝对定位。
注释：
如果父级盒子不需要占有位置，子绝父绝也可能会遇到。
（5）固定定位
选择器 { position: fixed; 边偏移：值； }
注意点：
1.固定定位是以浏览器的可视窗口为参照点移动元素，和父级元素没有关系。 2.固定定位不占有位置（托标）
（6) 粘性定位
选择器：{
position: sticky;
边偏移： 值；
}
注意点：
1. 以浏览器的可视窗口为参照移动元素。 2.粘性定位占有位置 3. 必须添加top right left bottom其中的一个。 4.可以理解为粘性定位和固定定位的结合，但是兼容性差，IE不支持。
5.定位的叠放顺序
选择器： { z-index: 1;}
注：
1.数值可以是正整数，复数或者0，默认是auto,数值越大，盒子越靠上 2. 如果属性值相同，则按照书写的顺序，后来居上 3.只有有定位的盒子才有z-index属性
6.定位的拓展
（1）定位的特殊性
绝对定位和固定定位也和浮动类似：
行内元素添加了绝对或者固定定位也可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
（2）脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题。
（3）浮动与定位
绝对定位（固定定位）会完全压住下面标准流的所有的内容。
浮动只会压住下面的盒子，但是不会压住标准流盒子里面的文字和图片。
九.元素的显示与隐藏
1.display属性
display: none；隐藏对象
display: block; 除了转换块级元素之外，同时还有显示元素的意思。
注意点：
display隐藏元素之后，不在占有原来的位置，会被其他元素取代。
2.visibility可见性
visibility: visible; 元素可见
visibility： hidden；元素隐藏
注意点：
visibility 隐藏元素之后，继续占用原来的位置
3.overflow溢出
overflow：visible 不隐藏溢出内容，也不添加滚动条
overflow: hidden 隐藏溢出的内容，不添加滚动条
overflow: scroll 不管内容溢出否，总是显示滚动条
overflow: auto 内容溢出自动显示滚动条，不溢出不显示滚动条
注意点：
如果有定位的盒子，慎用overfolw: hidden 他会隐藏多余的部分
OXO3 CSS下
一.CSS高级技巧
精灵图（sprites），字体图标，CSS三角
1.精灵图（sprites)
(1)目的
为了有效地减少服务器接收和发送请求的次数，提高网页的加载速度。
(2) 核心
1.精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大的图片中。
2.这个大图也称为sprites精灵图或者雪碧图
3.移动的距离就是这个目标图片的x和y坐标，（水平往右为正，垂直往下为正）
4.使用精灵图需要准确测量，每个小背景图片的大小和位置。
(3)使用
语法一： 选择器 { width: 60px; height: 60px; background: url(背景图片路径)； background-position: xpx ypx; } 语法二：（简写） 选择器 { width: 60px; height: 60px; background: url(背景图片路径) no-repeat xpx ypx； }
(4)缺点
图片文件还是比较大
图片本身放大或者缩小会失真
一旦图片制作完毕想要跟换非常复杂
2.字体图标
(1)优点
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标会立马渲染出来，减少了服务器请求。
灵活性： 本质是文字，可以随意更改颜色，透明效果等
兼容性：几乎支持所有的浏览器
(2)下载
国外 ：https://icomoon.io/
国内 ：https://www.iconfont.cn/
(3)引用
总结：
一些结构和样式比较简单的小图标，就用字体图标
一些结构复杂和样式复杂一点的小图片，就用精灵图
字体图标不能代替精灵图技术，只是对工作中图标部分技术的提升和优化
3.CSS三角
(1)原理 ：制作一个宽度和高度为零的盒子，添加边框颜色和大小。
div { width: 0; height: 0; line-height: 0; font-size: 0; border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; }
效果图
制作三角形，把其余三边弄成透明色
div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink; /*需要什么方向的三角自行更改*/ }
4..CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式 表单轮廓 防止表单域拖拽
（1）鼠标样式（cursor)
li {cursor: pointer;}
属性值 描述
default 箭头 pointer 小手 move 移动 text 文本 not-allowed 禁止
(2)轮廓线和防止文本域拖拽
/* 取消轮廓线*/ input, textarea { outline: none; } textarea { /*防止文本域拖拽*/ resize: none; }
5.vertical-align属性的运用
(1)使用场景：
用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。
（2）语法
vertical-align: 属性值
值 描述
baseline 默认，元素放置在父元素的基线上 top 把元素放在顶端与行中最高元素的顶端对齐 middle 把元素放置在父元素的中部 bttom 把元素放在顶端与行中最低的元素的顶端对齐
各线的位置
6.解决图片底部留白的问题
原因：
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
解决的方式：
1. 给图片添加
vertical-align: middle | top |bottom。（提倡使用）
2. 给图片转换为块级元素
display: blok;
7.溢出的文字省略号显示
(1)单行文本溢出显示省略号——必须满足三个条件
1. 先强制一行内容显示 white-space: nowrap; （默认normal 自动换行） 2. 超出的部分隐藏 overflow: hidden; 3.超出文字用省略号来代替 text-overflow: ellipsis;
(2)多行文本
多行文本溢出显示省略号，有较大的兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
8. margin负值的妙用
<style> ul li { float: left; list-style: none; width: 150px; height: 200px; boder: 1px solid red; margin-left: -1px; </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
注：
1.让每个盒子margin往左移动 -1px 正好压在相邻盒子边框，就不会产生边框重叠。
2.如果要实现鼠标经过某个盒子显示特定样式，提高当前盒子的层级即可（如果没有定位，则添加相对定位（保留位置），如果有定位，则添加z-index)
9.布局小技巧——文字环绕图片
<style> .box { width: 300px; height: 70px; background-color: pink; margin: 0 auto; } .pic { margin-right: 5px; float: left; width: 36px; height: 70px; } .pic img { width: 100%; } </style> </head> <body> <div class="box"> <div class="pic"> <img src="img.png" alt=""> </div> <p>键盘敲烂去捡破烂</p> </div> </body>
注：
让图片浮动起来，就不会盖住文字。