HTML+css补充

字体图标的下载：
icomoon字库
阿里iconfont字库}

CSS三角：
div{
		width:0;
		height:0;
		line-height:0;
		font-size:0;
		border:50px solid transparent;
		border-left-color :pink;
	}	

简写：
border-color：transparent red transparent transparent；
borde-style：solid；
border-width： 100px 50px 0 0;

鼠标样式cursor
li {cursor : pointer（小手）; }
				default 	小白（默认）
				move		移动
				text			文本
				not-allowed	禁止

轮廓线 outline
input { outline: none; }去掉默认的蓝色边框
防止拖拽文本域
textarea { resize:none; }

css的vertical-align---经常用于设置图片或表单（行内块元素）和文字垂直对齐。
vertical-align: baseline(默认，放置父元素的基线上） | top（顶端与行中最高元素的顶端对齐） | middle（放置父元素的中部） | bottom（顶端与行中最低元素的顶端对齐）

解决图片底部默认空白缝隙问题
 -给图片添加vertical-align: top | middle | bottom（提倡使用）
 -把图片转换为块级元素display：block；

溢出文字省略号显示
单行文本--必须满足三个条件：
-先强制一行内显示文本
white-space：nowrap;(默认normal自动换行）
-超出的部分隐藏
overflow:hidden;
-文字用省略号代替超出的部分
text-overflow:ellipsis;

多行文本（了解）-有较大兼容问题
overflow:hidden;
text-overflow：ellipsis；
弹性伸缩盒子模型显示
display：-webkit-box；
限制在一个块元素显示的文本的行数
-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient：wertical

margin负值运用
-让每个盒子margin往左侧移动-1px正好压往相邻盒子边框
-鼠标经过某个盒子的时候，提高当前盒子的曾经即可（如果没有定位，则加相对定位（保留位置），如有定位，则加z-index）

HTML5的新特性
新增语义化标签:
	header   ---  头部标签
	nav        ---  导航标签
	article ---   内容标签
	section ---   块级标签
	aside     ---   侧边栏标签
	footer   ---   尾部标签
新增多媒体音频标签
	 audio --- 音频
	  <audio src="./media/music.mp3" controls="controls"></audio>
	 video --- 视频
	 <video src="./media/mi.mp4" controls="controls"></video>

auido的参数如下：

video的参数如下：

新增input标签：

新增表单属性：

CSS3新增属性选择器：

input[value] {
color：pink;
}
<input type=“text” value="请输入用户名“>

注意：类选择器和属性选择器 伪类选择器 权重都是10

新增的结构伪类选择器：

**nth-child(n)**：
注意：本质上就是选中第几个子元素
	n 可以是数字、关键字、公式（2n、2n+1、5n、n+5、-n+5）
	n 如果是数字，就是选中第几个
	常见的关键字有 even 偶数、odd 奇数
	常见的公式如下(如果 n 是公式，则从 0 开始计算)
	但是第 0 个元素或者超出了元素的个数会被忽略

nth-child与nth-of-type区别:
		-nth-child  会把所有的盒子都排列序号(执行前先看nth-child 之后回去看前面div)（先找孩子再匹配）
		-nth-of-type  会把指定元素的盒子排列序号(执行前先看div 指定的元素 之后回去看nth-child 第几个孩子) 

新增伪元素选择器：
选择符							简介
::before		 在元素内部的前面插入内容
::after 			在元素内部的后面插入内容

注意事项：
	before 和 after 创建的是一个元素，但是属于行内元素
	创建出来的元素在 文档 中查找不到，所以称为伪元素
	语法：**element::before{ }**
	before 和 after 必须有 **content 属性**
	伪元素和标签选择器一样，权重为 1
	
伪元素字体图标:
p::before{ 
			position：absolute；
			right：20px;
			top:10px;
			content: '\e91e';
			font-size:20px;
		}

CSS3盒子模型：
通过box-sizing来指定盒模型，有2个值：即可指定为content-box（默认的盒子大小为width+padding+border）、border-box（盒子大小为width，不会撑大盒子）

其他特性（了解）：
滤镜filter：
filter：blur（5px); 模糊处理
calc函数：
width：calc（100%-80px）；

过渡【重点】：
经常和：hover一起搭配使用
transition：要过渡的属性 花费时间（s） 运动曲线 何时开始(s)
(谁过渡谁加，全过渡写all）