清除浮动带来的影响--.clearfix
.clearfix{ *zoom:1; }
.clearfix::after{
content: "";
display: block;
clear:both;
visibility: hidden;
height: 0;
white-space: nowrap;强制不换行
div内自动换行
word-break: break-all; 单词截断，下行接着显示
word-wrap: break-word; 单词不够放，放下一行限时1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设备类型不同的时候，都能够确保元素拥有恰当的布局方式
弹性性盒模型的内容包括：弹性容器、弹性子元素（项目）
引入弹性盒布局的目的：用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间，即使弹性子元素的尺寸发生动态变化，弹性盒布局也能正常工作
2）设置弹性盒子：
display: flex; 将元素设置为弹性盒容器
display: inline-flex; 将元素设置为弹性盒容器
注意：设置为flex布局之后，子元素的float、clear、vertical-align属性都会失效
3）基本概念：
容器
项目
主轴：默认水平方向，向右
主轴的起点
主轴的终点
交叉轴：默认垂直方向，向下
交叉轴的起点
交叉轴的终点
4）容器属性——添加弹性容器上
flex-direction属性：设置主轴的方向
flex-direction: row; /*默认值，设置主轴方向为水平方向，起点在左侧*/
flex-direction: row-reverse; /*设置主轴方向为水平方向，起点在右侧*/
flex-direction: column; /*设置主轴方向为垂直方向，起点在上方*/
flex-direction: column-reverse; /*设置主轴方向为垂直方向，起点在下方*/
justify-content属性：设置弹性子元素在主轴上的对齐方式
justify-content: flex-start; /*默认值，子元素位于弹性盒的开头*/
justify-content: flex-end; /*子元素位于弹性盒的结尾*/
justify-content: center; /*子元素位于弹性盒的中间*/
justify-content: space-around; /*子元素之前、之后、之间都有空白空间*/
justify-content: space-between; /*子元素和子元素之间有空白空间*/
align-items属性：设置弹性子元素在交叉轴上的对齐方式
align-items: stretch; /*默认值，如果子元素没有高度或高度为auto时，将占满整个容器的高*/
align-items: flex-start; /*子元素在交叉轴的起点对齐*/
align-items: flex-end; /*子元素在交叉轴的终点对齐*/
align-items: center; /*子元素在交叉轴的中点对齐*/
align-items: baseline; /*子元素在第一行文字的基线对齐*/
flex-wrap属性：设置弹性子元素在一根轴线上排不下的换行方式
flex-wrap: nowrap; /*默认值，不换行*/
flex-wrap: wrap; /*换行，第一行显示在上方*/
flex-wrap: wrap-reverse; /*换行，第一行显示在下方*/
align-content属性：设置多根轴线的对齐方式，如果只有一根轴线，属性失效
align-content: stretch; /*默认值，轴线占满整个交叉轴*/
align-content: flex-start; /*与交叉轴的起点对齐*/
align-content: flex-end; /*与交叉轴的终点对齐*/
align-content: center; /*与交叉轴的中点对齐*/
align-content: space-around; /*每根轴线之上、之下、之间都有留白*/
align-content: space-between; /*每根轴线之间都有留白*/
5）项目属性——添加在子元素上
order属性：调整子元素的排列次序
order: 数值; 数值不加单位，默认值为0，数值越大，排列越靠后
flex-grow属性：调整子元素的放大比例
flex-grow: 数值; 数值不加单位，默认值为0，表示不放大
flex-shrink属性：调整子元素的缩小比例
flex-shrink: 数值; 数值不加单位，默认值为1，表示当空间不足时，等比例缩小；值为0表示当空间不足时，不缩小
align-self属性：调整弹性容器中被选中的子元素的对齐方式
align-self: auto; /*默认值，继承了父容器的align-items属性，如果没有父元素值为stretch*/
align-self: stretch; /*占满整个容器的高度*/
align-self: flex-start; /*交叉轴起点对齐*/
align-self: flex-end; /*交叉轴终点对齐*/
align-self: center; /*交叉轴中点对齐*/
align-self: baseline; /*子元素的第一行文字的基线对齐*/ flex布局——轴线，可以看成一维布局
1、基本介绍
Grid网格布局——二维布局
可以将容器分成“行”、“列”，产生单元格
2、基本概念
容器container——使用网格布局的区域
项目item——容器内使用网格定位的子元素
行row——容器中水平区域
列column——容器中垂直区域
单元格cell——行和列交叉区域，m行n列会产生的单元格数为m*n
网格线grid line——划分网格的线，m行有m+1根水平网格线
3、相关属性：
容器属性——写在父元素上
1）display属性:
display: grid; 容器采用网格布局
2）grid-template-rows属性、grid-template-columns属性 ——对容器的水平方向和垂直方向划分
属性值： 像素|百分比|auto|repeat()|fr|minmax()|网格线名称
repeat(),有两个参数，第一个参数表示重复的次数，第二个参数表示重复的值
minmax(),有两个参数，分别表示最大值和最小值
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 25% 100px;
grid-template-columns: 100px auto 100px;
grid-template-rows: repeat(3, 30%);
grid-template-rows: 1fr 2fr 1fr;/*3个值的和必须大于等于1，否则会有空白空间*/
grid-template-rows: repeat(2,1fr) minmax(100px,300px);
grid-template-rows: 1fr 1fr minmax(100px,200px);
grid-template-rows: [r1] 100px [r2] auto [r3] 100px; /*网格名称*/
grid-template-columns: [c1] 100px [c2] auto [c3] 100px;
3）grid-row-gap属性、grid-column-gap属性、grid-gap属性 ——定义网格中的网格间隙
定义网格中的网格间隙
简写：grid-gap: grid-row-gap grid-column-gap;
grid-row-gap: 10px; 行间距
grid-column-gap: 20px; 列间距
grid-gap: 10px 20px;
4）grid-auto-flow属性： ——排列顺序
grid-auto-flow: row; 默认值，先行后列
grid-auto-flow: column; 先列后行
5）justify-items属性、align-items属性、place-items属性——内容分布
justify-items属性：水平呈现方式
align-items属性：垂直呈现方式
属性值：start|end|center|stretch
开始|结束|中间|默认
简写：place-items: align-items justify-items;
place-items: start end;
6）justify-content属性、align-content属性、place-content属性 --整体分布
justify-content属性：水平分布方式
align-content属性：垂直分布方式
属性值：start|end|center|space-between|space-around|space-evenly;
开始|结束|中间|元素间留白|元素之前之间之后留白|元素间隔相等
简写：place-content: justify-content align-content;
7）grid-template-areas属性：定义区域
应用在子项目的属性：grid-area属性，规定项目所在区域
grid-template-areas: "box1 box1 box1"
"box2 box2 box3"
"box2 box2 box3";
划分三个区域box1、box2、box3
分配三个区域：
.wrap div:nth-child(1){
grid-area: box1;
}
.wrap div:nth-child(2){
grid-area: box2;
}
.wrap div:nth-child(3){
grid-area: box3;
}
项目属性：
1）grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性-项目的位置
grid-column-start属性：水平填充，左边框所在的垂直网格线
grid-row-start属性：垂直方向填充，上边框所在的水平网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-end属性：下边框所在的水平网格线
简写：
grid-column: grid-column-start / grid-column-end;
grid-row：grid-row-start / grid-row-end;
grid-column-start: 2; 第二根垂直轴线开始
grid-row-end: 3; 第三根水平轴线结束
注：单位是第几条轴线，左-上，起始和结束可以决定项目的大小
2）justify-self属性、align-self属性、place-self属性
justify-self属性：水平方向的对齐方式
align-self属性：垂直方向对齐方式
属性值：start|end|center|stretch
开始|结束|中间|默认0）伪元素选择器：
element::before{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之前添加"伪元素的内容"
element::after{ content:"伪元素的内容"; 属性名称: 属性值; }
在element的内部，内容之后添加"伪元素的内容"
1）属性选择器
css2中的属性选择器：
element[attr]{ } 指定了属性名，但没有指定属性值得element元素
element[attr=value]{ } 指定了属性名，并且指定了属性值为value的element元素
element[attr~=value]{ } 指定了属性名，并且属性值可以为词列表中的包含指定属性值value的element元素
css3中的属性选择器：
element[attr^=value]{ } 指定了属性名，并且属性值以value开头的element元素
element[attr$=value]{ } 指定了属性名，并且属性值以value结尾的element元素
element[attr*=value]{ } 指定了属性名，并且属性值中包含value的element元素
2）结构性伪类选择器
:root{ } 匹配根元素
element:first-child{ } 选择一组相同元素中的第一个元素
element:last-child{ } 选择一组相同元素中的最后一个元素
element:nth-child(n){ } 选择一组相同元素中的第n个元素，n可以是数值、关键词、表达式
偶数：even 或 2n
奇数：odd 或 2n+1
element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素，n可以是数值、关键词、表达式
element:nth-of-type(n){ } 一组元素中选择特定类型的元素，n可以是数值、关键词、表达式
element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素，但是需要从最后一个开始计算
3）状态伪类选择器
element:checked{ } 选择页面中处于选中状态的element元素
element:disabled{ } 选择页面中处于禁用状态的element元素
element:enabled{ } 选择页面中处于可用状态的element元素将图片转成块级元素，解决下方间隙;
为图片设置垂直对齐方式(vertical-align属性)，解决下方间隙；
为图片的父元素设置高度，并添加overflow属性，解决下方间隙；
为图片的父元素设置font-size属性或line-height属性，属性值为0，解决下方间隙问题：
为input元素设置vertical-align属性;
为input元素设置浮动属性
根元素
float: left|right;
position: absolute|fixed;
overflow: hidden|scroll|auto;
display: inline-block;
1）盒子阴影box-shadow属性
box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的大小 阴影颜色 内阴影|外阴影(默认值)；
x轴偏移量--水平方向的偏移，正值向右偏，负值向左偏
y轴偏移量——垂直方向的偏移，正值向下偏，负值向上偏
注意：可以向一个元素中添加多个阴影，多组阴影之间用逗号隔开
2）文字阴影text-shadow属性
text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影颜色；border-width: 边框属性 thin;//thin细边框、medium中等、thick粗
outline属性：轮廓，不占位
outline: none; 去掉轮廓线
outline: 轮廓宽度 轮廓线型 轮廓颜色;
outline-offset属性：对轮廓进行偏移
letter-spacing属性：字间距
word-spacing属性：词间距
1）单行文本溢出
text-overflow: clip;文字溢出后直接修剪
text-overflow: ellipsis; 文字溢出后用省略号代表被修剪的文本
text-overflow: string; 文字溢出后用给定的字符串表示被修剪的文本。只在火狐浏览器中生效
注意：要实现文本溢出处理，需要与white-space属性和overflow属性配合使用
2）多行文本溢出显示省略号
（1）使用webkit的css扩展属性
.box1{
width: 200px;
border: 2px solid #000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*将标签设置为弹性伸缩盒子*/
-webkit-line-clamp: 2;/*行数*/
-webkit-box-orient: vertical;/*伸缩盒子元素的排列方式*/
}
（2）使用伪元素模拟溢出显示省略号的效果
.box2{
width: 200px;
border: 2px solid #000;
height: 60px;
line-height: 30px;
overflow: hidden;
position: relative;
}
.box2::after{
content: "......";
position: absolute;
right: 0;
bottom: 0;
background: #fff;
padding-left: 4px;
padding-right: 10px;
}border-radius: 20px; /*元素四周都有20px的圆角*/
border-radius: 10px 30px;/*左上角和右下角各有10像素，右上角和左下角各有30像素的圆角*/
border-radius: 10px 20px 30px;/*左上角有10像素，右上角和左下角各有20像素，右下角30像素的圆角*/
border-radius: 10px 20px 30px 50px;/*左上角10像素，右上角20像素，右下角30像素，左下角50像素的圆角*/
border-top-left-radius: 30px; /*左上角的圆角设置*/
border-top-right-radius: 30px;/*右上角的圆角设置*/
border-bottom-right-radius: 30px;/*右下角的圆角设置*/
border-bottom-left-radius: 30px;/*左下角的圆角设置*/
cursor: pointer;/*鼠标指针为手型*/
cursor: crosshair;/*鼠标指针为十字形*/
cursor: text;/*鼠标指针为文本的I型*/
cursor: wait;/*程序正忙*/
cursor: move;/*对象是可移动的*/
cursor: help;/*可用的帮助信息*/
cursor: default;/*默认光标*/
cursor: auto;/*默认*/
1）条件级Hack
if条件：是否、大于（gt）、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2）属性级Hack
_: 选择IE及以下版本
*：IE6、7
\9: 选择IE6+
\0: 选择IE8+、opera15
3）选择级Hack
*html IE6及更早版本浏览器
*+html IE7
Hack有风险，使用需谨慎！1、HTML5的新特性
1）在网页上绘制图形的canvas元素
2）多媒体相关video和audio元素
3）对本地离线存储的更好支持
本地存储：提供了两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对session的数据存储
离线应用：用户可以在应用离线的时候查看网站信息
4）新增的语义化的标签和表单控件
新增的结构元素
1）header标签：网页的头部区域或文档中某个内容区块的头部，双标签
一种具有引导和导航作用的结构元素，通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片等
2）footer标签：网页的底部区域或文档中某个内容区块的底部，双标签
通常可以包含：网页中的版权信息、相关阅读链接、文档的作者、使用条款等
3）nav标签：网页的导航区域，双标签
通常可以包含：网页中主要的导航链接组、传统的导航条、侧边栏导航、页内导航、翻页操作等
4）article标签：网页中独立的完整的内容，可以包含header标签，双标签
通常可以包含：一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
5）section标签：网页中内容的章节，双标签
通常可以包含页面中内容的分区，文章中章节
6）aside标签：侧边栏，表示当前网页或文章的附属信息，双标签
通常可以包含：与主要内容相关的引用、侧边栏、广告、链接组等
7）hgroup标签：标题组，双标签
通常包含多个标题
8）address标签：联系信息，双标签，文字自带斜体效果
通常包含：文档的作者或文档的编辑者名称、电子邮箱、地址、电话号码等
新增其他标签：
1）figure标签：自带间距
语法：<figure>
被主体内容引用的，相对独立的内容块，可以包含：图片、图表、代码块等
<figcaption>定义figure中的标题</figcaption>
</figure>
注意：在一个figure标签中只允许放一个figcaption标签
2）mark标签：定义带有标记的文本，目的吸引用户。默认自带背景颜色（黄色）和文字颜色（黑色），双标签
3）time标签：日期时间标签，定义公历时间，双标签
<time>2020年2月27日</time>
<time pubdate="pubdate" datetime="2020-2-27"></time>
pubdate属性：当前内容的发布时间
注意：datetime属性定义日期时间，如果没有该属性，必须在元素内规定日期和时间
4）progress标签：进度条
<progress></progress>
<progress max="100" value="50"></progress>
max属性：最大值
value属性：初始值
5）canvas标签：图形容器，如果绘制形状必须使用JavaScript来绘制1）音频标签
audio 标签
<audio src="音频文件的路径">您的浏览器不支持audio元素播放音频。</audio>
IE8及更早版本的浏览器中不支持audio元素
HTML5中支持的音频格式：
ogg 支持的浏览器Chrome、Firefox、Opera10+
MP3 支持的浏览器Chrome、Firefox、Opera10+、IE9+、Safari5+
wav 支持的浏览器Chrome、Firefox、opera、Safari
常用属性：
src属性：音频文件的URL地址
controls属性：播放控件
loop属性：重复播放
muted属性：静音播放
source标签：可以链接不同格式的音频文件。浏览器使用第一个可以识别的格式
<audio controls>
<source src="videoAudio/biubiubiu.ogg">
<source src="videoAudio/hanmai.mp3">
<source src="videoAudio/nada.wav">
您的浏览器不支持audio元素播放音频。
</audio>
2）视频标签
video标签
<video src="视频文件的路径">您的浏览器不支持video元素播放视频。</video>
IE8及更早版本的浏览器中不支持video元素
HTML5中支持的视频格式：
ogg 支持的浏览器Chrome、Firefox、Opera
MEPG4 支持的浏览器Chrome、Firefox、Safari、IE9+
WebM 支持的浏览器Chrome、Firefox、Opera
常用属性：
src属性：视频文件的路径
controls属性：播放控件
loop属性：重复播放
muted属性：静音播放
width属性、height属性 设置视频播放器的宽度和高度，单位像素
poster属性：预览图片
source标签：可以链接不同格式的视频文件。浏览器使用第一个可以识别的格式
<video controls>
<source src="videoAudio/butterfly.ogg">
<source src="videoAudio/movie.mp4">
<source src="videoAudio/PPAP.webm">
您的浏览器不支持video元素播放视频。
</video>新增表单标签--input类型
input、button、select-option、textarea
1）url类型：包含访问协议的URL地址的输入域，在提交表单时，会自动验证URL域的内容
2）email类型：包含e-mail地址的输入域，在提交表单时，会自动验证e-mail地址
3）search类型：用于检索关键字的输入域，多用于手机客户端
4）tel类型：用于输入电话号码的输入域，为移动端网页开发服务，在PC端网页中不生效，在移动端页面中点击tel类型的输入域时，跳出虚拟电话键盘（0-9、*、#）
5）number类型：用于包含数值的输入域
<input type="number" max="10" min="0" step="2" value="0">
max属性：最大值 min属性：最小值 step属性：合法的数字间隔，默认值为1
注意：当用户输入非法的数值时，会弹出相应提示信息，并阻止表单提交
6）range类型：生成一个数字滑动条
<input type="range" max="10" min="0" step="2" value="0">
注意：
range类型和number类型功能基本一致，
区别：外观样式不同、默认值不同。
range 类型的min属性默认值为0，max属性默认值为100
7）color类型：生成一个颜色选择器，值为十六进制色值(六位十六进制数)
8）date类型：日期选择器，包含年、月、日
9）datetime类型：输入日期时间（UTC时间）——手动
UTC+8 东8区
UTC-10 西10区
10）datetime-local类型：日期和时间选择器，包含年、月、日、时、分（无时区）
11）month类型：月选择器，包含年、月
12）time类型：时间选择器，包含时、分
13）week类型：周选择器，包含年、周（全年的第几周）
14）datalist类型：选项列表，与input元素配合使用
使用input元素的list属性和datalist的id属性关联
<input list="listCon">
<datalist id="listCon">
<option value="北京">北京</option>
<option value="重庆">重庆</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</datalist>
表单属性：
1）min、max、step属性
输入域中所允许的最小值、最大值、步长
用于包含数字的input类型，如input的number、range类型
2）placeholder属性
为输入域设置提示信息
3）list属性
通过input元素和datalist元素实现可选的下拉列表；使用input元素的list属性和datalist的id属性关联
4）autocomplete属性：是否启用自动完成功能
autocomplete = "off" 元素不采用自动完成功能
autocomplete = "on 元素启动自动完成功能
5）autofocus属性：自动获取焦点
6）form属性：定义表单元素所属的表单区域
7）required属性：提交表单时，表单元素不能为空，如果设置value值，该属性失效
8）pattern属性：对用户输入内容做验证（正则表达则）
9）multiple属性：选择多个值
用于上传域和email类型的输入域最新版本的Chrome、Firefox、Safari、Opera支持部分HTML5特性。IE9支持部分HTML5特性
HTML5新标签在IE低版本中有兼容问题：
1）使用JavaScript新增元素的方式解决：
<script>
var ele = document.createElement("header"); //创建一个header元素，赋给ele变量
var oBox = document.getElementById("box"); //通过id名称获取元素，赋给oBox变量
oBox.appendChild(ele); //将新建元素追加到父元素中
</script>
<style>
header{
display: block;
}
</style>
2）使用谷歌提供的html5shiv.js解决兼容问题
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->浏览器 内核 css兼容性前缀
Chrome|Safari webkit -webkit-
firefox gecko -moz-
Opera presto -o-
IE trident -ms-
1）多背景
background-image: url(图片的路径), url(图片的路径);
多个背景图片之间用逗号隔开。背景图显示越靠前，书写顺序越靠前
2）background-size属性：背景图尺寸设置
background-size: 数值;
background-size: 100px;/*等比例缩放*/
background-size: 100px 100px; /*根据尺寸缩放*/
background-size: 100% 100%;/*以元素的百分比来设置背景图片的宽、高*/
background-size: cover; 覆盖，等比例缩放到铺满整个盒子，但是背景图可能无法完整显示在盒子中
background-size: contain; 包含，等比例缩放到图片完整显示在盒子中，但是背景图可能无法铺满整个盒子
3）background-origin属性：背景图片的定位区域
background-origin: content-box; 背景图片相对于内容区域定位
background-origin: padding-box; 背景图片相对于内填充区域定位
background-origin: border-box; 背景图片相对于边框区域定位
4）background-clip属性：背景颜色的绘制区域
background-clip: content-box; 背景被裁剪到内容区域，仅在内容区显示
background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区域显示
background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示1）线性渐变 linear-gradient
background-image: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
方向：ndeg(n为数值)、left|right|top|bottom|left top|left bottom|right top|right bottom
重复线性渐变：
background-image: repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
2）径向渐变 radial-gradient
background-image: radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
中心点的位置：x y| left|right|center|top|bottom|left top|left center|left bottom ...
background-image: -webkit-repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
background-image: repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);1）resize属性：用户是否可以对元素进项调整
resize: none; 不允许用户调整元素尺寸
resize: both; 用户可以调整元素的宽度和高度
resize: horizontal;只允许用户调整元素的宽度
resize: vertical; 只允许用户调整元素的高度
注意：如果要使resize属性生效，必须与overflow属性配合使用，overflow的属性值可以是auto|hidden|scroll
2）box-sizing属性：允许以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box; 默认值，在width属性和height属性之外增加padding属性和border属性
box-sizing: border-box; 内容的宽度和高度的得到，通过width属性和height属性减去padding属性值，减去border属性值1）column-count属性：元素被分隔的列数
column-count: n; 元素内容被分隔成n列
column-count: auto; 由其他属性决定列数
2）column-width属性：列的宽度
column-width: npx; 每一列的宽度
column-width: auto; 由其他属性确定列宽
3）column-gap属性：列与列之间的间隔
column-gap: npx; 两列之间的间隔
column-gap: normal; 两列之间的间隔为常规间隔，W3C建议值为1em
4）column-rule属性：列边框--列与列之间的分隔线
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width属性：分割线的宽度
column-rule-style属性：分割线的线型（solid|double|dotted|dashed）
column-rule-color属性：分割线的颜色（关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)）
5）column-span属性：跨列合并
column-span: all; 横跨所有列合并transition: transition-property transition-duration transition-timing-function transition-delay;
transition: css样式（属性名称） 动画的执行时间（单位秒|毫秒） 速度类型 动画的延迟时间（单位秒|毫秒）;
css样式: all表示所有属性
动画的执行时间：默认0
速度类型：
ease 默认值，平滑过渡
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
注意：必须要设置transition-duration属性动画的执行时间，否则动画的执行时间为0，不会产生过渡效果
transition: width 2s, background 10s;
2D变形：
1）平移
transform: translate(x,y); 元素从当前位置移动到给定的x轴和y轴的坐标位置
transform: translateX(x); 沿着x轴的方向移动
transform: translateY(y); 沿着y轴的方向移动
注意：水平向右值为正，垂直向下值为正值
transform: translate(50px);沿着x轴方向移动
2）旋转
transform: rotate(ndeg);
角度为正值，元素沿着顺时针方向旋转n度；角度为负值，沿着逆时针方向旋转
3）缩放
transform: scale(x,y); 元素沿着x轴和y轴做缩放
transform: scaleX(x); 沿着x轴方向缩放
transform: scaleY(y); 沿着y轴方向缩放
x和y的取值：0-1缩小，1表示正常大小，1以上表示放大，负值时，先翻转后缩放
transform: scale(0.5); x轴和y轴等比例缩放
4）倾斜
transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜，单位deg
transform: skewX(x); 沿着x轴方向倾斜
transform: skewY(y); 沿着y轴方向倾斜
transform: skew(30deg);沿着x轴方向倾斜
注意：transform: rotate(360deg) scale(3);元素既要旋转又要缩放
transform-origin属性：元素基点位置的调整，必须与transform属性配合使用
3D变形必备属性：
1）transform-style属性：
transform-style: preserve-3d; 创建3D空间
2）perspective属性：透视属性，近大远小，单位像素
注意：以上两个属性均需要写在父元素中
3D空间的轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）
3D变形效果：
1）平移
transform: translateZ(z); 沿着z轴平移
transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动
2）旋转
transform: rotateX(xdeg); 沿着x轴方向旋转
transform: rotateY(ydeg); 沿着y轴方向旋转
transform: rotateZ(zdeg); 沿着z轴方向旋转
transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转
3）缩放：
transform: scaleZ(); 沿着z轴缩放
transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放1）定义关键帧
@keyframes 动画名称（英文）{
0%{ } 动画的开始
50%{ }
100%{ } 动画的结束
}
@keyframes 动画名称（英文）{
from{ } 动画的开始
to{ } 动画的结束
}
2）引用关键帧
animation: animation-name animation-duration [animation-timing-funciton] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
animation: 动画名称 动画的执行时间（s|ms） 动画的类型(linear|ease|ease-in|ease-out|ease-in-out) 延迟时间 播放次数(默认为1次,infinite无限循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束之后显示的状态(forwards动画结束时的状态|both动画结束或开始时的状态|backwards动画开始时的状态)
3）animate.css动画库
在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut
使用步骤：
1）引入文件：<link rel="stylesheet" href="css/animate.css">
2）使用：<div class="animated bounce">内容</div>
animated类名是基本类名，必须添加；第二个类名为实现指定动画的样式名1）less：拥有一套自定义的语法和一个解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器识别
编译的方法：命令行编译、编译器编译、在线编译、第三方编译工具等
好处：结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码
2）编写less文件
新建less文件：*.less
3）less的基本语法
注释：
标准css注释： /* 注释内容 */ 会保留到编译后的文件中
单行注释：//注释内容 只保留到less源文件中，编译后会被省略
导入样式: @import 可以导入css文件，导入less文件
@import "*.css";
@import url(*.css);
@import url("*.css");
注意：分号是必不可少的，文件的后缀名也是必不可少的
@import和link的区别
变量：
定义变量：@变量名: 值;
使用：
作为属性值使用——.box{ background: @变量名; }
作为属性名称使用——
<div class="box left"></div>
@le: left;
.box{ border-@{le}: 5px solid #000; }
作为选择器名称使用——
.@{le}{ height: 20px; }
SyntaxError语法错误
混入：将一种或一系列的属性从一个规则集引入到另一个规则集
混入类名：
定义通用属性：.bw{ width: 100px; } 在解析后的css文件中可以看到
.bw(){ width: 100px; } 在解析后的css文件中看不到
调用定义好的属性：.wrap{ .bw; }
混入参数：
定义：.boRa(@radius){ border-radius: @radius; }
调用：.box{ .boRa(20px); }
注意：混入参数没有设置默认，调用时必须传入参数
定义：.boRa(@radius:20px){ border-radius: @radius; }
调用：.box{ .boRa;}
.box{ .boRa(30px);}
注意：混入参数并且设置了默认值，调用的时候如果不写参数，使用默认值作为显示的值
使用@arguments来引用所有传入的参数：
.boSha(@bx,@by,@bb,@bc){ box-shadow: @arguments;}
.bo(@bwi:10px,@bs:solid,@bcol:#0f0){ border: @arguments; }
.box{
.boSha(10px,10px,20px,#000);
.bo;
.bo(5px);
.bo(5px,dotted);
.bo(5px,dashed,#000);
}
嵌套：模仿HTML结构
选择器嵌套
&表示引用父元素
继承：extend伪类实现样式的继承
.ftStyle{ font-style: italic; }
.box{
h3{
font-size: 50px;
&:extend(.ftStyle);
}
}
.box{
h3:extend(.ftStyle){
font-size: 50px;
}
}
运算：任何数值、颜色、变量都可以运算
1）变量
2）数值
3）颜色色值：先将颜色色值转换成rgb模式，进行计算，然后再将rgb模式转回十六进制色值并返回
rgb模式的取值范围0-255，如果计算时超过这个区间，使用超过后的接近的范围值呈现语法：calc(数学表达式)
支持+、-、*、/运算，先算括号里面的
注意：运算符前后添加空格
兼容性IE9+
less文件内容
height: calc(~"100% - 1.286rem");less编译bug,加~""即可避免
编译对于css内容
height:calc(100%-1.286rem);Apple为了解决移动端屏幕分辨率大小问题提出
移动端视口：布局视口、视觉视口、理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
自定义虚拟窗口，指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放。
content：
width--虚拟窗口的宽度，device-width设备宽度
initial-scale--初始缩放比例
maximum-scale--最大缩放比
minimum-scale--最小缩放比
user-scalable--是否允许用户手动缩放
user-scalable=no 不允许用户手动缩放
user-scalable=yes 允许用户手动缩放，默认值
ie8新加强制浏览器按照最新的标准去渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge" />1）什么是媒体查询
可以根据设备显示器特性为它设置css样式
媒体查询可以检测的内容：viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
2）引入方式
在样式表中引入——在style标签对中引入、在外部样式表中引入
@media mediaType and (media feature){
选择器{ 属性: 属性值; }
}
mediaType设备类型：
all 适用于所有多媒体类型设备
print 适用于打印机或打印预览
screen 电脑屏幕、平板电脑、智能手机等
speech 屏幕阅读器等
media feature媒体特性表达式：
width 浏览器宽度 height浏览器的高度
max-width最大宽度 min-width最小宽度
device-width设备宽度 device-height设备高度 max-device-width最大设备宽
orientation 设备方向 orientation:landscape|portrait 横屏|竖屏
aspect-ratio: 1/2;可见区宽度和高度的比率
device-aspect-ratio: 1/1; 输出设备的屏幕可见区宽度和高度的比率
使用link标签引入：
<link rel="stylesheet" media="mediaType and (media feature)and (media feature)" href="*.css">
响应式布局设置：
meta标签的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE8及更早版本的浏览器中不支持媒体查询，需要使用media-queries.js或respond.js增加IE对媒体查询的支持：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
调用Chrome浏览器或者是IE高版本浏览器
<meta name="HandheldFriendly" content="true">
兼容不支持viewport的设备
3）使用媒体查询适配对应样式
常用屏幕尺寸查询：
超小屏幕下 手机 <768px
小屏幕 平板 >= 768px
中等屏幕 桌面 >= 992px
大屏幕 桌面 >=1200px
移动端优先：超小型设备 手机 768px以下
@media screen and (min-width: 768px){ 平板电脑 }
@media screen and (min-width: 992px){ 台式电脑 }
@media screen and (min-width: 1200px){ 大台式电脑 }
大屏幕优先：大台式电脑 1200px以上
@media screen and (max-width: 1200px){ 台式电脑 }
@media screen and (max-width: 992px){ 平板电脑 }
@media screen and (max-width: 768px){ 手机 }
4）响应式字体设置
rem单位相对于html的font-size值做调整
em单位相对于父元素的font-size值做调整
百分比布局：
宽度不固定，可以使用百分比；内外间距（左右方向）也可以使用百分比
在实现的过程中需要布局容器：
手机 <768px 布局容器的宽度100%
平板 >=768px 设置宽度为750px
桌面 >=992px 设置宽度970px
大屏 >=1200px 设置宽度1170px
浮动、定位、弹性盒子
响应式内容：
img标签：前景图，可以通过max-width属性控制图片的大小，height: auto;
响应式背景图片： background-size属性调整背景图的尺寸
