CSS动画
动画和过渡的区别,过渡需要人为的去触发,而动画不需要;动画三要素1.告诉系统执行那个动画
2.告诉系统我们自己创建的动画名字
3.动画持续时长
创建动画
创建一个动画，从from开始的原始位置执行，到to结束
@keyframes 创建动画的名字 { //form是开始 from {background: red;} //to是结束 to {background: yellow;} } //也可以用百分比的阶段来定义动画 @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
使用动画
div{ //告诉使用那个动画 animation-name: myfirst; //动画持续时间 animation-duration: 5s; //以上可以简写为 animation: myfirst 5s; //默认显示动画第一帧,指定动画等待和结束的样式 animation-fill-mode:backwards; }
简写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否往返动画;
CSS3D转换
3d就是比较立体的效果,2d就是只有高度宽度，但是3d除了这些还有厚度,默认都是2d展现
开启3d转换
//也是必须开启透视 perspective:500; //开启被嵌套元素3d显示，所有子元素在3D空间中呈现。 transform-style: preserve-3d;
阴影
盒子阴影(不设置颜色默认当前元素的文字颜色)
给盒子设置内外阴影属性
box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展(阴影的范围,上下左右都会扩展) 阴影颜色 内外阴影(默认外阴影开启需要设置:inset); //一般只写这三个参数即可 box-shadow:水平偏移 垂直偏移 模糊度;
文字阴影(不设置颜色默认当前元素的文字颜色)
给文字设置外阴影属性
text-shadow:水平偏移 垂直偏移 模糊度 阴影扩展(阴影的范围,上下左右都会扩展) 阴影颜色 内外阴影(默认外阴影开启需要设置:inset); //一般只写这三个参数即可 text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色 ;
CSS布局
css布局方式分为标准流，浮动流和定位流，浏览器默认的就是标准流。
脱离标准流的元素都不区分行内元素和块级元素以及行内块级元素的都可以进行设置宽高;
标准流(文档流或普通流)
标准流分为垂直布局和水平布局;
块级元素都是垂直布局;
行内元素和行内块元素都是水平布局;
标准流中内容的高度可以撑起父元素的高度;
浮动流(只能水平排版,半脱离标准流)
半脱离标准流
文档流是相对于盒子模型讲的 文本流是相对于文子段落讲的 1.元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无 视它所占据了的区域，直接在它身下布局。 2.但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。
浮动是通过设置float属性进行设置的只能进行左浮动和右浮动,设置浮动流之后margin:0 auto;属性失效。
浮动布局不区分块级元素和行内元素以及行内块元素(这是是标准流中的概念),设置浮动流的元素可以进行设置宽高;
浮动元素的高度是不能够撑起父元素的高度;
浮动流注意点
浮动流脱标
浮动的元素是脱离文档流的(因为浮动的元素相当于是从标准流中删除了),如果前面一个元素浮动了，后面一个元素未浮动，则浮动的元素会盖在未浮动的元素上面。浮动元素的排序规则1.先浮动的元素会在前面，后浮动的元素会在后面，进行水平排列(相同方向的元素谁先浮动谁在前面);
2.左浮动的元素会找左浮动，右浮动的元素会找右浮动;
3.浮动元素浮动之后的位置由未浮动前在标准流中的位置决定(指的就是半脱离标准流，如有ABCD四个块元素，A和C设置了左浮动，A会在B的上方，C会在B的后面D的上方，因为C未浮动之前就是在B的后面,而B未浮动);
4.如果父元素宽度不够排列子元素中的浮动元素时，最后一个子浮动元素就会往前面的一个元素贴紧，不够在去前面一个元素贴紧,直到找到第一个浮动元素，如果还不够就会紧贴父元素进行排列，此时无论够不够，都会紧贴父元素进行排列。
5.如果文字中有浮动的元素，文字会围绕着浮动元素，给浮动元素让出空间。
清除浮动的方式
第一种：给父元素设置高度（基本不用）
给父元素设置高度后,后面元素的布局才不会乱;
注意点：在开发中一般能不给高度就不给高度;第二种：给浮动后面的元素添加clear属性添加claer属性之后,margin(外边距)属性就会失效。 原理:有A和B俩个元素，A包含着B，如果B给顶部外边距的话会导致A也跟着移动，如果不想A跟着移动就得给A一个边框，这样B的外边距对应的就是A，元素添加clear属性之后,必须该设置clear属性元素的父元素设置边框之后顶部外边距大于前面的元素才可以外边距生效,否则就不会生效(一般这样的父元素是body,但是body一般不会设置边框,所以该设置属性的元素移动带动了body移动，跟每没移动差不多)。
clear：both; 常用的有这几个值： none(默认,正常浮动) flet(不允许找前面的左浮动元素) right(不允许找前面的右浮动元素) both(不允许找前面的左右浮动元素)
第三种：外隔墙法清除浮动
在紧跟第一个浮动元素的后面在写一个div并设置clear属性,设置之后前面的浮动元素的下外边距失效,不可使用(设置中间间隔需要给设置clear属性的盒子高度即可),需要写到俩个浮动元素盒子的中间;
<div>浮动元素</div> <div style='clear:both;'></div> <div>浮动元素</div>
第四种：内隔墙法清除浮动
在第一个浮动元素的内部所有子元素最后面在写一个div并设置clear属性,注意：如何给设置清除浮动的元素添加高度会撑开盒子(未设置CSS3盒子模型的情况下);
<div> 浮动元素 <div style='clear:both;'></div> </div> <div>浮动元素</div>
第五种：单伪元素清除浮动
由于单伪元素是CSS3的属性所以会不兼容ie6,所以需要额外写上兼容ie6的代码
.box::after { //设置添加的子元素为空 content:''; //高度为0 hight:0; //设置成块元素,因为只有块元素可以设置宽高且不是一行排列 display:bolck; //隐藏当前元素 visibility: hidden; //设置不跟随左右浮动 clear:both; } //兼容ie6的代码 /*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/ .box{ *zoom:1; } <div class='box'>浮动元素</div>
第六种：双伪元素(最常用)
.clearfix:before, .clearfix:after { content:""; display:bolck; clear:both; } /*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/ .clearfix { *zoom:1; } <div class='clearfix'>浮动元素</div>
第七种：overflow:hidden;清除浮动(最常用)
给当前浮动元素设置之后就可以进行清除浮动,但是会出现兼容问题,不兼容ie6,需要兼容代码,也可以用来解决外边距塌陷
.box { overflow:hidden; *zoom:1; } <div class='box'>浮动元素</div>
定位流
定位分为以下几种:
1.粘性定位:脱离标准流,以浏览器的可视化窗口作为参考点,在距离某个位置之后便不动了;
2.相对定位:不脱离标准流,保留当前位置在标准流中占用空间,如果不给位置默认在标准流的位置,移动是按照未定位前标准流中的位置进行移动;(相对定位中由于不脱离标准流所以是区分块级元素/行内元素/行内块元素的)
3.绝对定位:脱离标准流,相对于父元素进行位移(父元素设置相对定位的情况下),如果没有默认是body;(显示层级比标准流高)
4.固定定位:脱离标准流,元素固定于浏览器的可视区的位置，在浏览页面的时候元素的位置不变。ie6不支持
5.静态定位:一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流(默认的);
在定位中垂直方向和水平方向的移动属性只能操作一个;
z-index属性可以调节定位中显示的层级,值越大谁就显示在最前面;粘性定位
position:sticky; //某些网站，在主导航栏下面还会有副导航栏，要实现页面往下拉，副导航栏滚动到 //距离上边沿10px的时候图片就不动了，而在这之前会随着浏览器的滚动而滚动。 //位在页面顶部，除了可以用js监听onscroll事件来实现，还可以通过sticky //定位轻松搞定。 粘性定位的特点：以浏览器的可视化窗口为参考点移动元素；
相对定位
position: relative; //由于不脱离标准流,在使用外边距内边距的时候会影响到标准流的布局
绝对定位
position: absolute; //默认所有绝对定位元素都是以body作为定位的参考点,无论有没有父级及以上元素; //如果绝对定位祖先元素有定位流(除了静态定位属性不行其他都可以),就会以当前 //开启定位流的元素作为参考点进行定位; //如果祖先有很多定位流元素,那么当前定位的元素会选择离他最近的定位流元素作 //为参考点; //如果是按照body为参考点,那么他是按照body首屏作为的参考点,当超过body首屏 //的长度后,他会跟着滚动; //绝对定位会忽略掉祖先元素的内边距
固定定位
position: fixed; //元素固定于浏览器的可视区的位置，在浏览页面的时候元素的位置不变。
子绝父相(重点,常用)
父元素相对定位,子元素绝对定位,这样写的话可以保证不占用标准流的位置,不会随着浏览器的变化而变化;
CSS隐藏元素的区别
display:none;
会触发重排和重绘,display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。
visibility: hidden;
会触发重绘,visibility: hidden;的元素不会触发绑定的事件; ##opacity:0; 会触发重绘, opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。
CSS伪元素
前伪元素：在元素前面插入(行内元素)
div::before { //可以插入任何元素，也可以设置宽高 content:''; }
后伪元素：在元素后面插入(行内元素)
div::after { //可以插入任何元素，也可以设置宽高 content:''; }
布局小技巧
如何实现页面背景图随屏幕大小进行居中
background-position:center top;
让当前的子元素不溢出父元素(也可以解决外边距塌陷)
//默认是visible内容不会被修剪，会呈现在元素框之外; //设置auto属性就是超过父元素之后会出现滚动条; //也可以用这个属性进行清除浮动 //也可以用来解决外边距塌陷 overflow:hidden;
图片过大如何居中
//之前有背景图片居中，这里讲一下img居中，要是img不大过父元素的情况下可以采用 text-align：center; //如果大于了父元素，可以采用 父元素设置： text-align：center; img设置： margin：0 -100%;
如何布局
拿到页面之后先想如何去布局，一般是垂直布局使用标准流，水平布局使用浮动流进行布局.(记得清除浮动);
样式缩写
字体
font:字体样式 字体变体(基本不用) 字体粗细 字体大小 字体系列(宋体之类的) ;
背景
background:背景颜色 背景图片 平铺方式 关联方式(是否随页面滚动) 背景定位;
