CSS&CSS3

CSS

1.CSS： 层叠样式表，用来美化网页的。做到结构（html）和表现（css）分离。

2.基本语法：

​ 选择器 {

​ 属性： 属性值；

​ }

css的引用方式

css的引用方式：行间样式，内部样式，外部样式，导入外部样式。

​ 行间样式：直接在标签上书写样式。

​ 内部样式：在文件的内部书写样式。

		<style>
		    样式内容
		</style>

​ 外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。

​ 导入外部样式：（1）先创建一个CSS文件；（2）再style标签中用import导入这个样式文件。

​ 以上四种css引用方式的区别：

​ 行间样式只作用于当前标签；而内部样式作用与当前文件；外部样式可以被多个HTML文件引用。

​ 在实际项目开发中，最多使用外部样式。外部样式分为：link引入和import引入两种方式。这两种方式区别：

CSS选择器分类：

（1）*****：匹配html中所有元素（注意：*的性能差，因为他要匹配所有元素。所以在开发时不建议使用。

（2）**标签选择器：**用来匹配对应的标签。

（3）**类选择器：**用来选择class命名的标签。（设置样式时 .+class名）

（4）**id选择器：**用来选择用id命名的标签。（设置样式时 #+id名）

（5）**派出选择器：**根据上下文来确定选择的标签

（6）伪类选择器

（7）伪元素选择器

选择器的分组

​ 让多个元素（选择器）具有相同的样式，一般用于设置公共样式。

选择器的继承

​ 子元素可以继承父元素的样式，也可改写。反之不可以。

样式权重

​ 多重样式：外部样式<内部样式<内联/行间样式

​ !important(10000)>内联样式(1000)>id选择器(100)>类，伪类，伪元素选择器(10)>标签选择器(1)

<style>
    #content div.main h2{
        color:red;
    }
    #content.main h2{
        color:blue;
    }
</style>

第一条样式的权重计算：100+1+10+1=112；

第二条样式的权重计算：100+10+1=111；

第二条样式的权重大 因此h2显示的样式为red。

CSS字体

1.font-size:字号(px/%)

2.font-family:字体

3.font-style:文字样式(normal/italic有倾斜属性的可倾斜/oblique全部字体都倾斜)

4.font-weight: 文字加粗(normal/bold/bolder/lighter变细/100-900)

5.line-height:行高(px/数字/em) 1.5倍行距

6.color:文字颜色(颜色的单词/rgb()->r:红0-255,g:绿0-255,b:蓝0-255) /16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数)

7.text-decoration:文字的修饰(none/underline下划线/overline上划线/line-through贯穿线)

8.text-align:文本的对齐方式(left/right/center)

9.text-transform:字母大小写(capitalize每个单词首字母大写/uppercase全大写/lowercase全小写/none)

10.text-indent:首行缩进(px/em/%)

11.font-variant：(normal/small-caps让大写字母变的小一些)

Tip：

​ font复合属性：font:font-style font-variant font-weight font-size/line-height font-family;

​ 注意：属性值的位置顺序，除了font-size和font-family之外，其他任何一个属性值都可以省略。

12.margin:元素的外边距（盒子与盒子之间的距离/元素与元素的间距）（auto/length/%）eg：margin:5px10px15px20px;依次表示上（top）右（right）下（bottom）左（left） 顺时针 缺省情况：margin:5px（上下左右都是5px）margin:5px 10px（上下5px，左右10px）margin:5px auto 10px（上5px，左右auto，下为10px）

13.padding:元素的内边距（盒子的边与盒子内部的距离/元素与内容的间隔）属性与margin相同。

14.border:边框

属性：宽度 border-width 边框样式 border-style 颜色border-color eg：border：5px soild #ccc（边框宽度为5px 直线 颜色为灰色）

border-top/right/bottom/left 设置上/右下/左边框线

CSS盒子模型

就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素是一个盒子都具备以下四个属性：

首先一个盒模型包含了margin（外边距）border（边框线）padding（内边距）content（内容）组成。

IE的盒子中的content又由padding和content组成

系统默认外边距为8px(margin 8像素的外边距)

​ 区别外边距和内边距是以（border）边框为参照。

​ *系统默认外边距为8px。所以一般把margin初始化为0。

（1）外边距（margin）：指元素边框线之外的距离。

​ margin-left:左边距

​ margin-right:右边距

​ margin-top:上边距

​ margin-bottom:下边距

​ margin:可用来设置任意一个边的边距，可以带1-4个参数。

​ 1个：上下左右（margin:1px）

​ 表示上下左右边距都为1px

​ 2个：上下 左右（margin:1px 2px）表示上下外边距为1px，左右外边距为2px

​ 3个：上 左右 下（margin:1px 2px 3px）表示上外边距为1px 左右外边距为2px 下外边距为3px

​ 4个：上右下左（margin:1px 2px 3px 4px）表示上为1px 右为2px 下为3px 左4px

（2）内边距（padding）：指元素的文本内容与border(边框)之间的距离。

​ 用法与margin一致。

（3）边框（border）

​ border-width：边框线宽度

​ border-style：边框样式

​ border-color：边框颜色

​ 复合写法：

​ border：border-width border-style border-color;（三者无先后顺序之分）

盒子的真实尺寸（边框在内的内部尺寸）

​ 盒子宽度=width+padding左右+border左右

​ 盒子高度=height+padding上下+border上下

eg:将div设置一个宽度 width=content width+padding width+ border width

CSS背景

1.background-color：背景色（transparent/color）

2.background-image：添加背景图（none/url）

3.background-repeat：背景图像铺排方式（repeat 全部铺排满/no-reapt 不铺排/repeat-x 沿x轴铺排/repeat-y 沿y轴铺排）

4.background-position：设置对象的背景图像位置 (x y)

”（{x-number px|top|center|bottom}{y-number px|left|center|bottom}“

5.background-attachment：设置对象的背景图像滚动位置（scroll 随滚动条滚动/fixed固定不随滚动条滚动）

6.bankground：设置背景的复合写法。

​ background：color image repeat attachment position

CSS伪类选择器

伪类：专门用来表示元素的一种特殊状态。

常用伪类选择器:

​ （1）a标签的伪类：

​ :link （初始状态）/:visited（访问后）/:hover（鼠标悬停）/:active（单击时）

.video-center.video-list li : hover a    /*hover后效果作用到a上*/

​ （2）:focus 获得焦点（用于表单）

​ （3）:first-child/:last-child/:nth-child(number) 用于列表

属性选择器

[属性名称]：包含有指定属性名的元素（常用）eg:[class] [id]

[属性名=值]：属性名的值为指定值的元素（常用）eg:[id=23435]

[属性名~=值]：属性名的值包含指定值的元素

[属性名^=值]：属性名的值以指定值开头的元素

[属性名$=值]：属性名的值以指定值结尾的元素

关系选择器

（1）空格：后代选择器 (可用于后代的后代)

（2）>：只可选择儿子元素

（3）+：兄弟选择器 eg(ul li+li+li) 选中从第三个（包括第三个）li往后全部的li

（4），：并列关系

css伪元素

（1）css伪元素与伪类区别：

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其成为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过：before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

（2）伪元素&伪类的特点：

​ 伪元素和伪类都不会出现在源文档或者文档树中。

​ 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面。

​ 伪元素名和伪类名都是大小写不敏感的。

​ 有些伪类是互斥的，而且它的可以同时作用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。

（3）:before（标签前）/:after（标签后）/:first-letter（第一个字符）/:first-line（第一行）:前面可以是一个冒号也可以是双冒号

​ :：selection/::placeholder/::backdrop：前面只能是双冒号

CSS浮动

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

1.什么是浮动：让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。

2.浮动的原理：就是让文档脱离文档流不占用标准流。

3float属性：定义元素在哪个方向浮动

4.浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。

5.清除浮动（设置浮动后，若父级标签未设置高度，父级标签将不会被自动撑开，因此需要清除浮动）

​ 目的：让后面的元素自动掉到下一行。

​ 方法：（1）添加空标签，并设置样式：clear:both；

​ clear:left；清除左浮动

​ clear:right；清除右浮动

​ clear:both；清除左右浮动

​ clear:none；左右浮动都不清除

​ （2）在要清除浮动的父级添加样式：overflow:hidden；

​ overflow:hidden：超出部分隐藏，也可以用来实现清除浮动。

​ （3）在要清除浮动的父级添加伪元素，并设定样式：

父元素：after{
	  	   content:"";
   		   display:block;
   		   clear:both;
		}

​ 注意：在实际项目开发中我们一般首选第2种方案。

浮动元素引起的问题？

父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构清除浮动的方式如下：

给父级div定义height属性 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式包含浮动元素的父级标签添加overflow:hidden或者overflow:auto 使用 :after 伪元素。

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

display属性

display属性：用来设置元素的显示方式。

属性值：

​ none：不显示元素

​ block：块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后行级标签也可以设置宽高）

​ inline：行内显示 不识别宽高不单独占一行，将块级转换为行级标签。删除换行符

​ inline-block：将块级或行级标签转换为行内块级标签。识别宽高不单独占一行（为行级标签但可以识别宽高）

CSStable样式

table一般不用来布局，主要用来格式化数据。

属性：

​ width：宽度

​ height：高度

​ border-collapse:collapse：设置单线边框

​ border：边框线

​ td，tr属性：

​ width：宽度

​ height：高度

​ border：边框线

​ text-aline：文本水平对齐（left（左右）/center/right)

​ vertical-align：文本垂直对齐方式（top/middle（默认）/bottom)

列表样式

不是描述性的文本的任何内容都可以认为是列表。比如：菜单，商品列表等。

（1）列表类型

​ 无序（ul），有序（ol）和自定义列表（dl）。

​ ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。dd单独占一行

​ dl一般用来设定一个定义，比如临时解释等。dt：标题，dd描述，用来对dt的内容进行解释并说明的。

（2）样式（用来修改标识类型）

​ list-style-image：url()用图像来表示标识

​ list-style-position：标识的位置（inside 往里移动点/outside默认值）

​ list-style-type：标识的类型

​ 复写：list-style:list-style-image list-style-position list-style-type

​ list-style的值可以按任意顺序列出，而且可以任意省略，只提供一个值，其他的都自动默认。

​ list-style-type的属性值：

​ （1）无序 disc默认（实心圆）/circle(空心圆）/square（实心矩形框）/none(无)

​ （2）有序 decimal默认（数字）/decimal-leading-zero（数字前面加一个零）/lower-roman（小写罗马）/upper-roman（大写罗马）/lower-alpha（小写字母）/upper-alpha（大写字母）/lower-greek（小写希腊字母）/lower-latin（小写拉丁）/upper-latin（大写拉丁）

​ 有序和无序：none取消标识符

​ （3）自定义列表样式 类型：type：“A”/“a”/“i“ 开始时的下标：start：”n“ 倒置： reversed

    <ol type="A" start="5" reversed>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

轮播图

​ 作用：主要用于产品展示或公司相关宣传。

​ 组成：

​ （1）轮播的组图（至少两张以上，不能太多）

​ （2）控制器

​ （3）计数器

..表示返回上一层

CSS定位布局

定位（position）

​ 设定元素在文档中的位置。会将标签（元素）转换为块级。

定位的分类（属性值）重点

​ 发生重叠效果要用定位来实现

1.static：静态定位

​ 默认值，没有定位，不能设置偏移值（left/top/right/bottom）占用标准流（文档流）

2.relative：相对定位（它相对于自身所占的位置做偏移）

​ 占用标准流（文档流），他会出现在文档流中它该出现的位置 原本的位置不会被其他元素占用，可以设置偏移值改变其位置。

3.absolute：绝对定位（相对于body做偏移）

​ 脱离文档流 浮动起来 原本的位置会被其他元素占用，相对于body做偏移

​ 脱离文档流的好处：不占用原本的位置，当其移动到其他位置时，它原本的位置可以让其他内容占用。

而其自身又可以覆盖在其他元素内容上，不占用其位置。

​ 绝对定位一般与相对定位结合使用，它相对父级是relative定义的元素做偏移。realtive的元素必须是absolue的元素的父级。

​ 在项目开发中，一般用relative+absolute结合使用。相对于父级进行偏移

4.fixed：固定定位

​ 脱离文档流 浮动，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没关系。它跟父级的定位没有任何关系。

​ 一般在开发中用来固定导航栏（设置位置时使用百分比 ，放大缩小网页时，位置会随着改变）

​ static relative不会脱离文档流

​ absolute fixed脱离文档流

z-index

​ 当多个元素添加绝对定位，元素会叠加在一起，使用z-index可以设置元素显示的层次

​ z-index仅能在绝对定位元素上奏效 元素可拥有负的z-index属性。

​ 文档流默认的z-index的值为0。z-index 后的值越小叠加后越在最下边

​ 用在static和relative元素上将无效

网站开发策略：先整体再局部，至顶向下，逐步细化

1.双飞翼布局：由三列组成，两端宽度固定，中间宽度自适应

​ 优点：兼容所有主流浏览器，包括IE6 可以实现主要内容优先加载。

​ 运用浮动和改变margin-left/right让left和right处于左右位置

​ left与center重叠在center上

2.圣杯布局：由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。

​ 布局时与双飞翼比增加了定位（relative）和偏移设置 设置padding留出left和right的位置

​ 在center left right 外加上一个容器设置其padding值空出left 和right的位置 通过设置margin-left和偏移来实现布局

​ left right单独占一定位置 不会出现重叠在center上的效果

3.侧边栏固定布局

​ Ⅰ.两栏布局

​ a.左侧宽度固定，右侧自适应

​ b.左侧自适应，右侧固定

​ c.左右都固定

​ Ⅱ.三栏布局

​ a.左侧固定，中间自适应，右侧固定

​ b.左侧自适应，中间和右侧固定

​ c.左侧和中间固定，右侧自适应

BFC&IFC

​ FC：格式上下文 它是页面中的一块渲染区域，并有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。分为BFC和IFC。

1.BFC：块级格式上下文

​ Ⅰ.形成BFC的条件

​ a.浮动元素（float除none以外的值）

​ b.定位元素（position(absolute/fix))

​ c.diaplay（值为inline-block/table-cell/table-caption)

​ d.overflow（值为hidden/auto/scroll时）

​ ⅡBFC特性

​ a.内部的盒子会在垂直方向上一个接一个的放置

​ b.垂直方向上的距离会叠加由margin的最大值决定，如果不要叠加 就需要该盒子变成一个独立的（BFC）盒子

​ c.BFC的区域不会与float元素区域重叠

​ d.计算BFC的高度时，浮动元素（不占用文档流）也参与计算

​ e.BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素

​ overflow：hidden （变为BFC）可以消除与浮动元素重叠部分

​ Ⅲ：BFC的作用

​ a.解决margin重叠的问题（添加独立BFC）

​ b.解决浮动高度塌陷问题（在父级添加overflow：hidden）

​ c.解决侵占浮动元素的问题（在父级添加overflow：hidden清除浮动）

2.IFC:行级(内联)格式上下文

​ Ⅰ.形成IFC的条件

​ a.font-size（会改变行框的高度和宽度）

​ b.line-height（行高）

​ 从上到下的四条线分别 为，顶线，中线，基线，底线。行高指上下文本的基线间的垂直距离（两根红线间的距离）

​ c.height（改变高度）

​ d.vertical-aligin（垂直定位 top顶端靠齐 middle居中 botto底端靠齐）

​ Ⅱ.IFC特性（规则）

​ a.IFC的元素会在一行中从左至右排列

​ b.在一行上的所有元素会在该区域形成一个行框

​ line box：行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联（行级）元素都会共同生成一个行盒模型。

​ c.行高的高度为包含框的高度，高度为行框中最高元素的高度

​ d.浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度，会占用行框的宽度

​ e.行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框

​ f.行框的元素内遵循text-aline和vertical-aline

​ 容器的高度

​ height=line-height+vertical-aline

附加

1）让列表中的li标签在一行的两种处理方式

​ a）display: inline-block; 变为行级块标签

​ 显示在一行 但两两li标签之间会产生一个距离 需要使用margin-left：通过给负值进行处理

​ b）float: left; 通过设置浮动使其在一行 注意要消除浮动

​ c）使用弹性布局

2)属性的写法

​ 括号内同类属性用，隔开 不同类属性中间用空格隔开

3）给鼠标设置手形

​ cursor: pointer;给鼠标设置手形

4）正则写法

pattern="[A-Za-z0-9]{4,6}"

输入字段范围为A-Z,a-z,0-9  4-6个字符

5）使用line-height实现垂直居中（常用）

​ line-height：height；设置行高=盒子高度一致可实现垂直居中

6）min-width 最小宽度

min-width: number;最小宽度 低于该宽度会显示滚动条

CSS3

CSS3新属性

1.CSS3是CSS2.1的一个升级版。它是对CSS的一个扩展。

2.CSS3的新特性：

​ 1）选择器

​ 2）加阴影

​ 3）形状转换（2D<-->3D)

​ 4）变形

​ 5）动画（过渡动画，帧动画）

​ 6）边框

​ 7）多重背景

​ 8）反射

​ 9）文字

​ 10）颜色（rgba/hsl/hsla）

​ 11）滤镜（filter）

​ 12）弹性布局

​ 13）多列布局

​ 14）盒模型

​ 15）Web字体

​ 16）媒体查询

3.CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。

1）主流浏览器内核（重要）

​ a）Trident：IE内核 -ms-

​ b）Webkit：Chrome和Safari内核 -webkit-

​ c）Gecko：FireFox内核 -moz-

​ d）Blink（是Webkit的一个分支）：Chrome和Opera内核 -o-

​ Tips（技巧/提示）:

​ 目前国内的浏览器大多都是双核的（IE内核+Chrome内核）

2）厂商前缀

​ IE：-ms-

​ Chrome&Safari：-webkit-

​ FireFox：-moz-

​ Opera：-o-

4.CSS3选择器

​ 丰富选择器的目的：在标签中减少class和id的使用。

1）属性（id name class......）选择器

​ E[att] 匹配具有att属性的元素

​ E[att="val"] 匹配具有att属性且值为val的元素

​ E[att^="val"] 匹配具有att属性且以val开头的元素

​ E[att$="val"] 匹配具有att属性 且以val结尾的元素

​ E[att*="val"] 匹配具有att属性且含有val的元素

2）结构性伪类

​ a）:root 匹配html标签，与body选择器一样

​ b）子元素选择：匹配父元素中连续的子元素(多用于列表元素)

​ E:first-child：第一个子元素E

​ E:last-child：最后一个子元素E

​ E:nth-last-child(n)：倒数第n个子元素E

​ E:nth-child(n)：第n个子元素E，若第n个标签不是所要标签E则停止查找

​ E:nth-child(2n/2n+1)：第2，4，6...或3，5，7上的E元素.....

​ c）nth-of-type类：用于匹配父级元素中的兄弟子元素，可以用于元素非连续的情况

​ E:nth-of-type(n)：第n个兄弟元素E，如果第n个标签不是E将跳过，继续向下寻找，直到找到为止

​ E:nth-last-of-tpe(n)：倒数第n个兄弟元素E，如果倒数第n个不是要找的元素E则跳过，继续寻找

​ d）其他

​ E:only-child：查找父元素中只有的一个标签为E标签，不允许其他标签的存在，但E标签中可以有子标签

​ E:only-of-typle：父级元素中仅有一个元素E，可以有其他标签存在

​ E:empty E中没有子元素，包括文本元素，即查找空元素。

3）目标伪类

​ E:target:匹配URL指向的元素 （即设置页内跳转到的元素内容的样式）

​ 页内跳转 ：

​ a标签的href属性="#+锚点（要跳转标签的id值）"(id表示设置了1个锚点，用来实现页内跳转)

4）UI元素状态伪类

​ ：selection :找到被选中的文本设置其样式（复制时选中文本）

::selection {
        color: aqua;
      }

​ ：chenked:被选中 （只有在Opera中有效）

​ ：disable:选择有disable属性的表单元素

​ ：enable:选择有enable属性的表单元素（除了设置有disable属性的表单元素其他的默认均为enable）

5）否定伪类

​ E:not（p） :选择E中的非p标签

6）通用兄弟元素选择器

​ E~F 匹配E元素之后的F元素 （E，F元素可以不同）

5.CSS3文本

1）文本阴影（增加立体感，提供更好的视觉效果）主流浏览器都支持

​ text-shadow:设置文本阴影

​ 语法：text-shadow：h-shadow v-shadow blur color；

​ 属性值：

​ h-shadow{number}：必需。水平偏移。允许负值和0 水平方向偏移向左。

​ v-shadow{number}：必需。垂直偏移。允许负值和0 垂直方向偏移向上。

​ blur{number}：可选。模糊度。

​ color{color}：可选。阴影的颜色

2）文本自动换行（主流浏览器都支持）

​ 语法：word-wrap：normal|break-word

​ 属性值：normal：只在允许的断字点换行（浏览器保持默认处理）

​ break-word：在长单词或URL地址内部进行换行。

3）单词拆分（主流浏览器都支持）

​ word-break：属性规定自动换行的处理方法。

​ 适用于当文本内容宽度已定，但英文某个单词过长一行无法显示需要进行拆分。

​ 语法：word-break：normal|break-all|keep-all；

​ 属性值：

​ normal：使用浏览器默认的换行规则

​ break-all：允许在单词内换行。

​ keep-all：只能在半角空格或连字符处换行。（常用）

4）文本拆分（所有主流浏览器都不支持）

​ 语法：text-wrap：normal|none|unrestricted|suppress;

5）文本溢出

​ a）单行文本溢出（重要）

​ text-overflow：clip|ellipsis|string

​ 属性值：

​ clip：修剪文本。

​ ellipsis（常用）：显示省略符号来代表被修剪的文本

​ 处理文字溢出样式：

​ width: px/%....;

​ white-space: nowrap;/不允许换行/

​ -ms-text-overflow: ellipsis;/对低版本IE进行兼容/

​ text-overflow: ellipsis;/设置隐藏部分样式/

​ overflow: hidden;/超出部分隐藏/

​ b）多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）

width:px/%....;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp：要显示的行数;
			overflow:hidden;

6.CSS3边框

1）圆角边框（常用）

​ 语法：border-radius：1-4 length|% / 1-4 lenght|%

​ 四个方位的值：top-left / top-right / bottom-righ/ bottom-left

​ border-radius: 10px; 四个角都设置圆角(圆角宽度为10px)

​ border-radius: 10px 20px; 第一个参数对应的是左上和右下，第二个参数对应的是右上和左下。

​ border-radius: 10px 20px 30px;第一个参数对应的是左上,第二个参数对应的是右上和左下 第三个参数对应的是右下。

​ border-radius: 10px 20px 30px 40px;每个参数分别对应左上，右上，右下，左下。（顺时针方向）

​ 多个角设置圆角时使用该写法，border-radius: 0px 20px 0px 40px; 0为不设置圆角

2）边框阴影（IE9以上支持）

​ 语法：box-shadow：h-shadow v-shadow [blur] [spred] [color] [inset]；

​ box-shadow：水平偏移 垂直偏移 [模糊度] [阴影尺寸] [颜色] [inset ] ( 阴影显示在外部); []表示可选属性

​ （偏移值=阴影尺寸）

​ inset：不设置inset属性默认阴影在右下 设置inset阴影在左上 ，也可用通过设置h-shadow v-shadow 负值 来改变阴影的偏移位置

​ h-shadow v-shadow 均为零时，效果：为整个盒子四周加阴影，阴影不偏移

​ box-shadow: 0px 8px 5px 8px #b5e4ff; 效果：盒子上方无阴影

​ box-shadow: 0px -8px 5px 5px #b5e4ff; 效果：盒子下方无阴影

​ box-shadow: 8px 0px 5px 8px #b5e4ff; 效果：盒子左方无阴影

3）边框图片（IE11.0级以后版本支持）

​ 语法：border-image：source width repeat [slice ] [outset] ;

​ border-image：图片 向内偏移距离 宽度 图片区域超出边框的距离 重复效果

​ 重复效果：round（铺满）repeat（平铺）stretch（拉伸）

​ transparent 透明

7.CSS3背景

1）多重背景

​ background;

​ 语法：background：背景色 背景图片 平铺方式 位置，背景色 背景图片 平铺方式 位置......（多个图重叠，先加顶层图）

​ background: color url(images/ufo.png) no-repeat 50% 100% , url(images/stars.png) no-repeat 0 0 , url(images/sky.png) no-repeat 0 0;

​ background-image; 设置背景图

​ 语法：background-image：url（‘图片地址1’），url（'图片地址2'）

​ background-image: url(images/ufo.png) , url(images/stars.png) , url(images/sky.png);

​ background-position: 设置背景图的位置 50% 100% , 0 0 , 0 0;

​ background-repeat:设置背景图的平铺方式 no-repeat , no-repeat , no-repeat;

​ 不同背景属性间用，隔开

​ 可以解决多个背景图重叠的问题，不再使用ps进行设计，简化图片背景维护成本

2）background-size：设置背景图尺寸。

​ 语法：background-size：length （固定宽高）|percentage（宽高百分比值）|cover|contain;

​ length：设置背景图的高度和宽度。第一个设置宽度 ，第二个设置高度。如果只有一个值第二个值默认auto；

​ percentage：以父元素的百分比来设置背景图的宽度和高度，第一个为宽度，第二个为高度。

​ cover：把背景图扩展至足够大，以使背景图像完全覆盖背景区域，图片超出区域无法显示。

​ contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，保证图片完整性。

3）background-origin：指定背景图片的位置区域（隐藏指定范围外的图片）

​ 语法：background-origin：padding-box|border-box|content-box；

​ padding-box：背景图相对于内边距来定位。以padding为界限填充背景图

​ border-box：背景图相对于边框盒来定位。以border为界限填充背景图

​ content-box：背景图相对于内容边框来定位。以content为界限填充背景图

4）background-clip：设定背景图的绘制区域（裁剪指定范围外的图片）

​ 语法：background-clip：padding-box|border-box|content-box；

​ padding-box：背景被剪裁到内边距。

​ border-box：背景被剪裁到边框盒。

​ content-box：背景被剪裁到内容框。

5）渐变背景

​ background-image：线性渐变|径向渐变

8.CSS3颜色函数

1）RGB,RGBA（常用）

​ rgb（r,g,b)

​ rgba（r,g,b,a）

​ r：红色 取值范围：0-255/0-100%

​ g：绿色 取值范围：0-255/0-100%

​ b：蓝色 取值范围：0-255/0-100%

​ a：不透明度 取值范围：0-1之间的一个小数

2）HSL

​ hsl（h,s,l）

​ h：色调 取值范围：0-360

​ s：饱和度 取值范围：0-100%

​ l：亮度 取值范围：0-100%

3）HSLA

​ hsl（h,s,la）

​ h：色调 取值范围：0-360

​ s：饱和度 取值范围：0-100%

​ l：亮度 取值范围：0-100%

​ a：不透明度 取值范围：0-1的一个小数

​ 通常使用不透明度来设置元素的遮罩（蒙版）。

9.opacity

​ 调整元素的不透明度，大多情况下用于做元素的遮罩效果。取值范围：0-1的一个小数

​ IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：

​ 兼容处理：filter：alpha（opacity=数值） 数值的范围：0-100 对应0.n*100

10CSS3渐变

​ 渐变主要用于设置背景或制作三维图。

1）线性渐变

​ background：linear-gradient（direction,color-stop1 [百分比],color-stop2 [百分比],......）

​ direction：方向角度

​ 方位：

​ to left：从右向左渐变

​ to right：从左向右渐变

​ to top：从下向上渐变

​ to bottom：从上向下渐变

​ to top left：从右下角向左上角渐变

​ to top right：从左下角向右上角渐变

​ to bottom left：从右上角向左下角渐变

​ to bottom right：从左上角向右下角渐变

​ 角度：

​ 45度角：45deg（可为负数）

​ 颜色取值：

​ 表示颜色的单词：green

​ 16进制颜色：#fff000

​ 表示颜色的函数：（rgb()/rgba()/hsl()/hsla()..）

2）径向渐变（沿半径方向渐变）

​ bgckground：radial-gradient（shape（形状） ，size（渐变大小），at center（at 位置），start-color（颜色1 百分比）,...,last-color（颜色n 百分比）;

​ 形状：

​ ellipse：椭圆径向渐变（默认）

​ circle：圆径向渐变

​ 渐变大小：

​ farthest-corne：渐变的半径长度为从圆心到离圆心最远的角（默认）

​ closest-side：渐变的半径长度为从圆心到离圆心最近的边

​ closest-corner：渐变的半径长度为从圆心到离圆心最近的角

​ farthest-side：渐变的半径长度为从圆心到离圆心最远的边

​ 位置：

​ at center：设置圆心在中心位置（默认）

​ at top：设置圆心在顶部位置

​ at bottom：设置圆心在底部位置

​ at （圆心横坐标 圆心纵坐标）：设定圆心的位置在指定的（横坐标，纵坐标）处

3）文字渐变

​ 固定格式：

​ background: linear-gradient(purple,blue,green);

​ bcakground：线性渐变或径向渐变；

​ -webkit-background-clip: text;

​ -webkit-text-fill-color: transparent;

11.box-sizing

​ 允许你以某种方式定义某些元素，以适应指定的区域。

​ box-sizing：content-box/border-box (火狐或谷歌低版本需要写厂商前缀)

​ content-box：宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。(即设定的宽高至应用于内容区不包括内边距和边框) 默认值

​ border-box：设定的宽高决定了元素的边框盒，元素的内边距和边框都在已设定的宽度和高度内绘制，内容的宽高为设定的宽高减去内边距和边框。(即设定的宽高包括内边距，边框和内容区)

CSS3属性-动画

1.变形（transform）

1）位移 translate（x，y）定义2D转换，沿着X和Y轴移动元素。位移效果（x,y可以为负值或0，沿负方向移动或沿着一个方向移动，一个值向x轴偏移）

​ translateX（n）定义2D转换，沿着X轴移动元素

​ translateY（n）定义2D转换，沿着Y轴移动元素

2）缩放 scale（x，y） 定义2D缩放转换，改变元素的宽度和高度。（x,y可以为小数，一个表示宽度和高度都放缩n倍，一个参数x，y轴都缩放）

​ scaleX（n）定义2D缩放转换，改变元素的宽度

​ scaleY（n）定义2D缩放转换，改变元素的高度

3）旋转 rotate（angle）定义2D旋转，在参数中规定角度。

​ 角度（n deg）n：-360deg~360deg

​ 可以设置rotateX(n）rotateY(）绕x，y轴旋转，在父级加上perspective: 150px;可实现立体效果

4）扭曲 skew（x-angle,y-angle）定义2D倾斜转换，沿着X和Y轴（一个参数只有x轴扭曲）

​ skewX（angle）定义2D倾斜转换，沿着X轴。

​ skewY（angle）定义2D倾斜转换，沿着Y轴。

5）matrix（a,b,c,d,e,f）定义2D变形，使用了6个值的矩阵。表示如下：（了解）

​ a c e

​ b d f

​ 0 0 1

​ matrix用一个3行3列的矩阵表示，a和b列表示x轴，c和d列表示y轴，e和f列表示z轴（2D转换没有z轴用1表示）

​ a和d表示缩放（如果没有缩放，值设为1）

​ b和c表示扭曲（如果没有扭曲，值为0）

​ e和f表示位移（如果没有位移，值为0）

​ 如果旋转角度为θ，它会影响到a，b，c，d的值：

​ a=cosθ

​ b=sinθ

​ c=-sinθ

​ d=cosθ

​ 如果扭曲skew（θ1，θ2），会影响到b和c的值：

​ b=tanθ1

​ c=tanθ2

​ 每次旋转和扭曲都会产生一个新的矩阵，最终形成的多个矩阵要做乘法运算。如果对一个元素同时有旋转，扭曲，缩放，和位移，这时需要用到多个矩阵相乘，要优先考虑旋转和缩放，把缩放和旋转放在前与后面矩阵相乘！！！

​ eg：需求：将div右移100px，下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍

/*方法1：常用*/
-webkit-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
-moz-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
-ms-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
-o-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
transform: translate(100px,200px)rotate(30deg)scale(1.5,2);

/*方法2：（了解）*/
解法：
   1）缩放（1.5，2）形成一个矩阵
    1.5    0    0
    0      2    0
    0      0    1
   2）旋转30度后，又形成一个矩阵
    0.866    -0.5   0
    0.5     0.866   0
    0      0        1
   3)上面两个矩阵要做乘法运算
   0.866    -0.5   0    1.5    0    0       1.299   -1    0
   0.5     0.866   0 × 0      2    0  ＝   0.75    1.732 0
   0      0        1    0      0    1       0       0     1
*/
-webkit-transform: matrix(1.299,0.75,-1,1.732,100,200);
-moz-transform: matrix(1.299,0.75,-1,1.732,100,200);
-ms-transform: matrix(1.299,0.75,-1,1.732,100,200);
-o-transform: matrix(1.299,0.75,-1,1.732,100,200);
transform: matrix(1.299,0.75,-1,1.732,100,200);

2.transfrom-origin：调整元素的基点*（旋转变形时的中心点...）*

​ transform-origin：x-axis y-axis z-axis;

​ 属性值：

​ x-axis：定义基点被置于X轴的何处。可能值：left,center,right,length,%

​ y-axis：定义基点被置于Y轴的何处。可能值：top,center,bottom,length,%

​ z-axis：定义基点被置于Z轴的何处。可能值：length

3.perspective属性 （几何）透视关系

​ 让子元素获取透视效果。

​ perspective：number|none;

​ 主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位。

4.transform-style

​ 在3D空间中呈现被嵌套的元素。

​ 注释：该属性必须与transform属性一同使用。

​ 语法：transform-style：flat|preserve-3d；

​ 属性值：

​ flat：被嵌套子元素将不保留其3D位置（默认值）

​ preserve-3d：被嵌套子元素将保留其3D位置

5.rotateZ

​ 沿着z轴的方向顺时针旋转。

6.过渡动画transition

​ 有hover效果或者其他的操作时的过渡动画

​ 1）常规用法

​ transition-property：属性名列表

​ transition-duration

​ transition-timing-function

​ transition-delay

​ 2)复合用法（简洁，常用）

​ transition：property-name-list|all duration timing-function delay

​ transition：属性名列表，持续时间，动画函数，延迟时间

​ a）property：对象，可以使用的属性有：

​ Ⅰ）颜色：

​ color background-color boreder-color outline-color

​ Ⅱ）位置：

​ background-position left top bottom

​ Ⅲ）长度：

​ max-height min-height max-width min-width height width

​ border-width margin padding outline-width outline offset

​ font-size line-height text-indent vertical-align

​ border-spacing letter-spacing word-spacing

​ Ⅳ）数字：

​ opacity visibility z-index font-weight zoom

​ Ⅴ）组合：

​ text-shadow transform box-shadow clip

​ Ⅶ）其他：

​ linear-gradient radial-gradient

​ b）duration：动画持续时间，一般以秒（s）或毫秒（ms）为单位

​ c）timing-function：动画函数

​ Ⅰ）linear：匀速（默认值）

​ Ⅱ）ease：变速（先慢后快，最后再慢）

​ Ⅲ）ease-in：变速：（由慢到快）

​ Ⅳ）ease-out：变速（由快到慢）

​ Ⅴ）ease-in-out：变速（慢速开始，慢速结束）

​ Ⅵ）cubic-bezier(n,n,n)：自行设定变速，n的值在0-1之间

​ d）delay：动画延迟时间：一般以秒（s）或毫秒（ms）为单位

7.关键帧动画@keyframes

​ 步骤：

​ 1）设置关键帧

​ a）如果只有两个关键帧

​ @keyframes 动画名称{

​ 0%：

​ 100%：

​ }

​ 或：

​ @keyframes 动画名称{

​ from：

​ to：

​ }

​ b）如果是多个关键帧

​ @keyframes 动画名称（name）{

​ 0%：

​ 25%：

​ 60%：

​ ........

​ 100%：

​ }

​ 关键帧越多，动画越流畅

​ 注意：这里的百分比一般是升序值，可以是0%~100%之间的任意值，也可以是倒序。

​ 2）实施动画

​ a）常规用法：

​ animation-name（来自于@keyframes定义的动画名）

​ animation-duration（动画持续时间，以秒(s)或毫秒(ms)为单位（默认为0））

​ animation-timing-function（动画函数 ）

​ animation-delay（动画延时时间，以秒(s)或毫秒(ms)为单位）

​ animation-iteration-count（动画循环播放的次数 ①number：按设定播放次数（默认次数为一次）②infinite：一直循环播放）

​ animation-direction（动画播放完后是否反向播放 ①normal不反向（默认值） ②alternate：反向）

​ animation-play-state（动画暂停或播放 ①paused：停止播放 ②running播放（默认值））

​ b）简洁用法

​ animation：name duration [timing-function] [delay] [iteration-count]（循环次数） [direction]（是否反向播放）

基础属性-布局

1.多列（分栏）布局

1）column-count 规定元素应该被分割的列数（设置分栏的栏数）

​ 语法：column-count：number|auto;

2）column-gap 设置栏间距

​ 语法：column-gap ：length|normal

3）column-rule 设置栏间分隔线

​ a）column-rule-style：设置线型

​ none 没有分割线

​ hidden 隐藏线

​ dotted 点线

​ dashed 虚线

​ soild 实线

​ double 双线

​ groove 3D沟槽效果

​ rideg 3D脊状效果

​ inset 3D左上角阴影效果

​ outset 3D右下角阴影效果

​ 注意：3D线型在分栏中没有3D效果，当实线处理。

​ b）column-rule-width：设置分割线线宽

​ c）column-rule-color：设置分割线颜色

​ 复合写法：

​ column-rule：width style color;

​ column-rule：线宽 线形 颜色

4）column-width 规定列的宽度

​ column-width ：length|auto;

5）columns ：是column-width和column-count的简写属性

​ columns：width count;

​ columns：栏宽 栏数

2.flex弹性布局（重要）

​ CSS3弹性盒子（Flexible Box或 flexbox）,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素有恰当的行为的布局方式

​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。

​ disply：flex 设置父级为弹性盒子（块级标签会自动变为行级标签）

​ 常用属性：

1）flex-direction：指定了弹性子元素在父容器中的排列方式。（此属性作用于父容器）。

​ 语法：flex-direction：row|row-reverse|column|column-reverse

​ 参数：

​ row：横向从左到右排列（左对齐），默认排列方式

​ row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）

​ column：纵向排列

​ column-reverse：反转纵向排列，从后往前排，最后一项在最上面

2）justify-content：把弹性项沿着弹性容器的主轴线对齐。（作用于父容器（常用）

​ 语法：justify-content：flex-start|flex-end|center|space-between|space-around

​ 参数：

​ flex-start：紧凑方式左对齐（默认）

​ flex-end：紧凑方式右对齐

​ center：紧凑方式居中对齐

​ *space-between：除了第一个和最后一个子元素外，其他子元素等分空白区域（两边盒子贴边 中间的间距相等）（重要）

​ *space-around：所有子元素等分空白区域 （中间的间距是边上间距两倍）（重要）

​ *space-evenly：所有地方的间距都相等 （重要）

​ flex-wrap: wrap; 自动换行

3）align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。（作用于父容器）

​ 语法：align-items：flex-start|flex-end|center|baseline|stretch

​ 参数：

​ flex-start：沿纵轴顶端对齐（默认）

​ flex-end：沿纵轴底端对齐

​ *center：沿纵轴垂直居中对齐（重要）tips：设置了弹性盒子并设置了高度可以使用此属性让内容垂直居中

​ baseline：沿纵轴基线对齐

​ stretch：纵向拉伸对齐（不给高度情况下拉伸铺满屏幕）默认值

​ align-self：flex-start|flex-end|center|baseline|stretch 控制某个弹性盒子在侧轴的对齐方式（添加到子盒子）

4）flex-warp:wrap 自动换行（应用于父元素）

5）flex-grow：子元素的放大比例，默认值为0 （应用于子元素）

​ 语法：flex-grow：number;

6）flex：用于指定弹性子元素空间分配（应用于子元素）复合属性

​ 语法：flex：atuo|initial|none|inherit|[flex-grow]||[flex-shrink]||[flex-basis]

​ 参数：

​ auto：(自动宽度)等价于 （1 1 auto）

​ initial：(初始宽度)等价于 （0 1 auto）

​ none：(无)等价于 （0 0 auto）

​ inherit：从父元素继承

​ [flex-grow]：定义弹性盒子元素的扩展比率

​ [flex-shrink]：定义弹性盒子元素的收缩比率

​ [flex-basis]：定义弹性盒子的默认基准值

​ Tips：

​ flex可以带1-3个参数。

​ 1）带1个参数（常用）

​ ①无单位 ，这个数值会被当做flex-grow（扩展比率）的值

​ ②带单位，这个数值会被当作flex-basis（基本宽度）的值

​ ③auto（自动宽度）|intital（初始宽度）|none（无）

​ 2）带2个参数

​ 第1个参数必须是一个无单位的数值，他会被当作flex-grow（扩展比率）的值。

​ 第2个参数：

​ ①无单位 ，这个数值会被当做flex-shrink（收缩比率）的值

​ ②带单位，这个数值会被当作flex-basis（基本宽度）的值

​ 3）带3个参数（常用）

​ 第1个参数必须是一个无单位的数值，他会被当作flex-grow（扩展比率）的值。

​ 第2个参数必须是一个无单位的数值，他会被当作flex-shrink（收缩比率）的值。

​ 第3个参数必须是一个有效的宽度值（带单位），它会被当作flex-basis（基本宽度）

​ 注意：只占用父盒子剩余尺寸

3.响应式布局

1）响应式布局概念

​ Responsive Design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

2）响应式布局和自适应布局的区别（面试问题）

​ 响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端做代码处理，来展示不同的布局和内容；

​ 自适应需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是PC端，平板，手机等，从而请求服务层，返回不同的页面。

​ 响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局。

​ 自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以了；而响应式布局要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑到

3）响应式布局开发开发实现方法

​ ①媒体查询

​ ②百分比布局（常用）

​ ③rem布局（常用）（ 相对于跟节点（元素）html中的字号布局）

​ ④视口单位布局（vw/vh）

4）响应式设计步骤

​ ①设置meta标签

​ ②通过媒体查询来设置样式

​ ③设置多种视图的宽度

​ Ⅰ）宽度需要使用百分比/rem/vw$vh等

​ Ⅱ）处理图片缩放

​ Ⅲ）其他属性处理

​ 如pre/iframe/video等，都要缩放其大小，table,建议不要增加padding属性，低分辨率下要使用内容居中操作。

4.媒体查询

​ 步骤：

1）设置meta标签

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

​ 说明：以上标签的内容只能被移动设备识别。

​ viewport：视口（移动端）

​ width=device-width：宽度等于当前设备的宽度

​ initial-scale=1.0：初始缩放比例（默认为1.0）

​ maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）

​ minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）

​ user-scalable=no：用户是否可以手动缩放（默认为no）

2）设置IE渲染方式 默认为最高版本

	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

​ 说明：

​ 以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有将以IE的最高版本渲染页面。（国内浏览器一般为双核驱动 IE+Chrome）

3）引入兼容的js文件

<!--[if lt IE 9]>   条件Hack
<script src="https://oss.maxcdn.cm/libs/html5shiv/3.7.0/hrml5shiv.js"></script>
<script src="https://oss.maxcdn.cm/libs/responed.js//responed.min.js"></script>
<![endif]-->

​ 说明：

​ 因为IE8及IE8以下版本既不支持htlm5，也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。

​ 上面的代码是一个注释语句，也就是说IE9及以上的版本不会编译这几行代码。

4）引入CSS3提供的媒体查询

​ ①引入外部CSS文件时使用

<link rel="stylesheet" href="screen480.css" media="screen and (max-width:480px)" >
如果屏宽为480px及以下，将加载screen480.css文件
<link rel="stylesheet" href="screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >
如果屏宽为480-800px将加载screen800.css文件

​ 设备：

​ all：所有设备

​ screen：PC端显示器

​ print：打印机或打印预览图

​ handheld：便携设备

​ tv：电视

​ speech：音频合成器

​ braille：盲人点触设备

​ embossed：盲人打印机

​ projection：投影设备

​ tty：固定密度字母栅格设备

​ only：用来排除不支持媒体查询的浏览器

​ ②：在style标签中用@media定义

	@media screen and (max-width: 600px)  {样式......}

​ 当屏幕宽度尺寸小于600px时，设置括号内样式

​ 用来设置不同分辨率下的屏幕显示同一内容 显示的大小和方式不同

5.Web字体

​ 开发者引入外部字体。

​ 语法：

    @font-face {
        font-family: 字体名;
        src: url("字体文件") format("字体文件格式以处理浏览器兼容")，url() format;
    }

​ 说明：

​ 可以同时引入多个字体文件，字体一样文件扩展名不一样，目的是为了处理浏览器兼容

font-family: one 微软雅黑 宋体;

​ 浏览器不支持可以设置备用字体

6.iconfont图标字体

​ 由阿里巴巴提供的一种图标字体

​ 步骤：

​ ①进入官网http://iconfont.cn，注册并登录

​ ②创建一个项目

​ ③添加图标到购物车

​ ④将购物车中的图标添加到项目中

​ ⑤下载iconfont文件，解压后，将部分文件复制到网页项目中

​ ⑥使用字体图标前，先引入iconfont.css文件

​ ⑦使用图标方法：

​ 方法一：用类名

<!--类名必须 iconfont开头+Fontclass-->

<i class="iconfont icon-faxian1"></i>

​ 方法二：用unicode值（微信小程序开发不支持）

<i class="iconfont">&#xe632;</i>

​ tips：放大图标字体方法（相当于一个字体）

​ 在iconfont.css文件中找到 font-size设置，改变字体大小

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

7. 地图引用

​ 1.百度地图API网址：http://api.map.baidu.com/lbsapi/createmap/；

​ 2.输入地址，找位置，添加标注；

​ 3.获取代码；

​ 4.将项目的根目录创建一个文件夹map 在map中创建一个map.html文件，将获取的代码复制到 map.html文 件中；

​ 或复制其< script>部分粘贴至对应的head和body内。

​ 5.更改密钥；

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A5j0zidDv3y1zNLNRFDIVGXSOOsUdoXX"></script>

​ 6.清除多余的文本，更改显示的宽高，去除盒子的间距；

​ 7.在项目页面引入地图。

8.使用伪元素画三角符号

.play::after {
        content: "";/* 设置内容为空*/
    	width: 0px;
        height: 0px;
        display: block;
        /*设置边框的大小可以实现图案的大小*/
        border: 50px solid transparent;
        /*设置不同的边框和颜色 实现不同形状颜色的三角形 eg：border-right/top/bottom-color：pink/blck*/
        border-left-color: pink;
        border-right-color: gray;
        border-top-color: seagreen;
        border-bottom-color: aqua;
        /*通过定位改变其位置，且让其脱离文档流*/
        position: absolute;
        left: 18px;
        top: 8px;
      }