文章目录
（16）浏览器前缀
内核：浏览器如何的解析代码
前缀：css3去兼容不同的浏览器，主要是针对旧的浏览器做兼容，
新浏览器基本不需要添加前缀.
（新的版本中用任何浏览器的前缀可以---向前兼容）
语法： 浏览器前缀+某些属性
列： -ms-animation： 1s mover 一秒刷新一次
（在以后的项目中不需要特意的去写，利用某些工具去自动生成）
（17）过度效果
transition过度：
transition-property: 设置过渡效果的CSS属性的名称（默认是all）
transition-duration: 规定过渡效果的时长
transition-delay: 定义过度效果延迟时间（何时开始----负数为提前，正数为延迟）
（诺总过渡时间为3s: 过渡时间为-1，则总时长变为2s;
过渡时间为1s，则先等待1s，在3s执行）
transition-timing-function: 规定速度效果的速度曲线
速度曲线可以利用 利用cubic-bwzier(值1，值2，值3，值4） 根据曲线自己定义值，
在该网址中得到任意曲线的四个值.
div{width: 100px;height: 100px;background-color: red;
/* 背景色和高立刻变，宽有一个过渡效果 */
/* all选项为全部过渡 */
transition-property: width;
transition-duration: 5s;
transition-delay: 1s;
transition-timing-function: ease-in;
}
/* 鼠标移入后的效果 */
div:hover{width: 200px;height: 200px;background-color: blue;}
可以对过渡效果进行复合写法：
transition: width 5s 1s ease-in;
注意要把过渡样式放到div的css上，
不能放到鼠标移入的css上,如果放到hover上只有当鼠标入的时候才有该样式
（18）transform变形
transform的属性值:
(1)translate(x,y): 位移
（向右面移动xpx，向下移动ypx）
translateX(x) X轴的平移,右平移x像素
translateX(y) Y轴的平移，下平移y个像素
translateZ(z) 3d效果中Z轴的平移
(2)scale（x值，y值）缩放
（值是一个比例值，1为正常大小,以中心点进行放大缩小，负值为倒影）
scale(值) X和Y都同时缩放同样的倍数
scaleX（x） X缩放的倍数
scaleY（y） Y缩放的倍数
scaleZ（Z） 3D中Z轴缩放的倍数
(3)rotate(角度) 旋转
（值为角度（deg）或者弧度(角度的值：正为顺时针旋转，负为逆时针)）
rotateX() 以X为轴进行翻转（在3D效果中才能看得出来）
rotateY() 以Y为轴进行翻转（在3D效果中才能看得出来）
rotateZ() 以Z为轴进行翻转（平面内的旋转，和rotate效果一样）
(4)skew（xdeg,ydeg） 斜切
（值为角度（deg）或者弧度(正值为左斜切，负值为右斜切)）
skewX(xdeg) 以x为轴进行斜切
skewY(ydeg) 以y为轴进行斜切
transform变形的注意事项：
1：不会影响同级元素
2：只能添加给块元素，但是不能添加给内联元素.
3：复合写法（同时添加多个变形元素）-----执行变形是有顺序的
先执行后面的操作，在执行前面的操作。
（位移会受到其他三种的影响，先写位移元素）
4： 关于旋转和缩放的基点：
默认为中心点即： transform-origin: center center
可以自己进行设置： transform-origin: x y z (以X,Y进行旋转,z为3D的)
（x,y）是在网页中的位置
例：平移
<style>
.box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
.box2{width: 100px;height: 100px;background-color: blue;transition: 2s;}
/* 当鼠标移入box里面的时候box2会进行位移 */
.box1:hover .box2{transform: translate(100px,100px);}
</style>
<div class="box1">
<div class="box2">AAA</div>
</div>
（19）animation动画
（1）animation-name：设置动画的名字(自定义的)
animation-name:mybox结合@keyframes mybox{}来使用
在该大括号里面定义漫画的行为
@keyframes mybox{form即0% to即100%}
（2）animation-duration：动画的持续时间
（3）animation-delay：动画的延迟时间
（4）animation-iteration-count：动画的重复次数
（默认值是1次 ；1infinite为无限次数）
（5）animation-timing-function：动画的运动形式
（也可以写成复合样式即： animation：动画的持续时间在动画的延续时间前）
（6）animation-fil-mode：规定动画播放之前或之后，其动画效果是否可见。
常见的选项：
none(默认值) ：在运动结束之后回到初始位置并且在延迟的情况下，
让0%在延迟后生效(不会显示0%处的效果)
backwards：在延迟的情况下，让0%在延迟前生效
（就算有延迟也会看到0%的效果）
forwards：在运动结束的之后，停到结束位置
both：backwards和forwards同时生效
（7）animation-direction: 属性定义是否应该轮流反向播放动画
常见选项：
alternate： 一次正向，一次反向
Reverse：永远反向
normal（默认值）： 永远正向
<style>
.box1{width: 400px;height: 400px;border:1px black solid;margin: auto;}
.box2{width: 100px;height: 100px;background-color: red;
animation-name: mybox;
animation-duration: 3s;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/*写成符合样式*/
/* Animation: mybox 3s 0.5s infinite linear; */
}
@keyframes mybox{
from{transform:translate(0,0) ; }
25%{transform:translate(300px,0) ; }
50%{transform:translate(300px,300px) ; }
75%{transform:translate(0,300px) ; }
to{transform:translate(0,0) ; }
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
（20）animate.css动画库
官方网站：https://daneden.github.io/animate.css/
先进行下载该样式库（css文件）
（该库已经帮我们定义好了许多常见的动画效果，可以直接调用
不用再去麻烦的去写@keyframes关键针了）
基本使用：
导入外部样式该样式库，在想调用的标签加class选择器，
类选择器里面传入“animated 样式 infinite”
animated：基类（基础样式，每个动画都要加）
infinite：动画的无限次数
（21）3D基本语法
1、transform的3D相关值
（1）rotateX(值deg) 沿着x轴进行翻转
（正值往上翻转，负值往下翻转）
（2）rotateY（值deg） 沿着y轴进行翻转
（正值往右面翻转，负值往左面翻转）
（3）rotateZ（值px） 沿着z轴进行位置
（正值往前位移，负值往后面位移）
（4）scaleZ（值） 立体图形看到的厚度----->立方体
值为一个百分比，以1为单位
（5）sacale3d(x,y,z) 立体图形设置x,y,z的厚度(单位为百分比)
（6）translate3d(x,y,z) 位移的3d写法(单位为px)
（7）rotate3d(值1，值2，值3，值4) 旋转的3d写法
有四个值， 0或者1 0不添加旋转，1添加旋转
值1： x轴是否添加旋转角度
值2： y轴是否添加旋转角度
值3： z轴是否添加旋转角度
值4： 旋转角度deg
2、transform-origin：x y z
设置变形（transform）的基点（center表示中心位置）
（注意：Z轴只能写px不能写单词）
3、perspective：px 设置景深（最外层容器加）
离屏幕多远的距离去观察元素，值越小幅度越大。（景深）
（平面元素直接加，有立体感觉，对于要创建立体的物体还要3D空间）
perspective-origin: right 把相机放到右面视角观察的角度
Perspective-origin: top right 把相机放到右上方视角观察
4、perspective-origin：
设置景深（perspective）的基点位置，观察元素的角度。
5、transform-style： 产生一个3D空间（做立体图形用）
选项： flat(默认值2d)
preserve-3d(3d，产生一个三维空间)
6、backface-visibility：背面隐藏
（一般配合opacity透明度来使用）
hidden 隐藏背面
visible(默认值) 显示背面
7、opacity：值 透明度
值为百分比，以1为单位
（22）背景图样式扩展
1、background-image：url(‘地址’) 设置背景图
2、background-position： -xpx,-ypy 背景图片向上平移x,向下平移y（先加定位）
经常用到雪碧图中
3、background-size： 背景图的尺寸大小
值的选择：
宽px 高px 把图片的大小设置为改大小
cover 覆盖 等比例缩放、背景图片全部覆盖外层容器，溢出容器的背景图片隐藏
contain 包含 等比例缩放、外层容器最大比例的包含住背景图
4、background-origin： 背景图的填充位置
padding-box(默认) 边框为基点
border-box
Content-box
5、background-clip: 背景图的裁切方式（在该位置进行平铺裁切）
padding-box
border-box(默认)
Content-box
注：复合样式的时候，第一个是位置，第二个是裁切
（23）css3渐变
渐变（linear-gradien、radial-gradient）是值，需要添加到background-image背景图属性上
linear-gradient（to 位置|角度deg，颜色1 占百分比，颜色2 百分比） 线性渐变
Point 可以添加线性渐变开始位置
列：to right bottom 从左上角到右下角颜色按顺序依次渐变
angle 可以加角度（0deg在页面下面，正（负）值顺（逆）时针旋转）color 添加渐变的颜色 （按顺序依次添加渐变）
Percentage渐变颜色的百分比（各颜色开始或者结束渐变的百分比位置）
radial-gradient: 径向渐变（由一个点向四周渐变）
Point 可以添加径向渐变开始的中心点
color 添加渐变的颜色 （按顺序依次添加渐变）
Percentage渐变颜色的百分比（各颜色开始或者结束渐变的百分比位置）
<style>
.jb{width: 500px;height: 500px;border: 1px black solid ;
background-image: linear-gradient(to right bottom ,
red 25%,blue 50%,seagreen 75%,chartreuse 100%);}
</style>
<body>
<div class="jb"></div>
</body>
（24）字体图标（@font-face）
@font-face是CSS 3中的一个模块， 他主要是把自己定义的Web字体嵌入到你的网页中。
把图标当做字体一样处理，可以改变其大小、颜色、样式
（就可以不用图片就可以使用图标）
好处：
1.可以非常方便的改变大小和颜色
font-size 大小 color 颜色
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体
怎么定义和使用？？？
定义：
@font-face{
font-family: 名字
src:url(主图片地址)；
src:url(图片1地址) format（‘...’）,src:url(图片1地址) format（‘...’）;
//添加很多图片是为了兼容不同的平台
}
使用：
font-family: 名字
（通过名字引用,同时在引用的时候设置大小和颜色等等）
（25）字体图标库
@font-face自己定义图标很麻烦，已经有阿里巴巴提供的矢量图标库
https://www.iconfont.cn 提供了大量免费的字体图标
怎么使用矢量图标库？？？
1、在该网站把想要的字体图标添加到喜欢或者项目中，在进行下载素材
（添加到项目中方面以后查看使用）
2、把下载好的素材解压，里面的woff、eot、ttf等文件是为了适应平台的，
主要的是svg文件，以及css文件，把这些文件引入到一个新的文件夹中；
Demo.html介绍怎么用该图标
3、引入该样式
<link rel=’stylesheet’ href=’地址.css’>
4、使用
在Demo.html介绍了怎么使用
建议使用class选择器
class=’iconfont 字体图标名称’
当然也可以使用其方式使用该字体图标
（26）自定义字体图标
https://iocomoon.io/app 可以在线生成字体图标
先自己定义一个svg文件，打开该网站上传svg文件，点击生成并且下载，来使用
使用方式和用字体图标库的一样
（27）文字阴影
text-shadow：x y blur color , x y blur color,..... 添加文字阴影
x、y 位置（px）
blur 模糊程度（px）
color 阴影颜色（默认颜色和文字颜色相同）
多阴影 逗号分隔，多个阴影
<style>
.box{font-size: 50px;color: red;text-shadow: 10px 10px 10px blue , -10px -10px 10px seagreen;}
</style>
<div class="box">
Hello CSS3
</div>
（28）盒子阴影
box-shadow: x y blur spread color inset 设置盒子阴影（针对容器的）
x,y 位置（px）
blur 模糊程度（px）
spread 范围（px）
color 阴影颜色（默认颜色是黑色）
Inset 设置为内阴影（默认为外阴影）
多阴影 逗号分隔，多个阴影
（29）遮罩 mask
什么是遮罩？？？
把背景图或者背景颜色，利用mask遮罩遮住，
mask中的引入的遮罩图片，通过遮罩图片，
遮罩图片的有图像的地方可以看到背景图片，
无图像的地方被遮住背景图片
mask：url(‘地址’) no-repeat xpx ypx / wpx hpx 设置遮罩
url(‘遮罩地址’)
no-repeat 不平铺
x，y 位置
w，h 大小
多遮罩 ，分隔开
注意： mask还没有标准版，需要添加浏览器前缀
默认是x,y都平铺的，no-repeat选择不平铺
（30）倒影 box-reflect
方法1：
box-reflect： 倒影位置 倒影间距 遮罩 渐变 设置倒影
可选值：
above 上边
below 下面
left 左面
right右面
距离 原图片和倒影出来的图片之间的间距
遮罩|渐变|变形| 倒影出来的图片支持遮罩和渐变等，在box-reflect添加 （只支持透明的的渐变，不支持颜色的渐变）（rgba( , , , 透明度)）
注意： box-reflect还没有标准版，需要添加浏览器前缀
倒影可以用到图片，块元素等等，使其整体都出现一个倒影
方法2：
box-reflect还没有标准版，
其实transform： scale(-1)/scaleX(-1)/scaleY(-1)也可以实现倒影
（31）模糊 blur
filter:blur(值)
在filter属性中选着blur()值，里面填入模糊值，值越大，模糊度越高
（32）计算 calc
calc(四则运算) ==》得到的值px或者%
四则计算
（33）分栏布局
向报纸等一栏一栏的，可以用分栏来进行处理
column-count： 分栏的个数
column-width： 分栏的宽度
column-gap： 分栏的间距（栏之间的宽度）
column-rule： 分栏的边线（栏之间的分栏线）
（边线的宽度，颜色，实线？虚线？----像设置变宽一样）
column-span： 合并分栏
（一般作用于文本标题上 ）
注意：分栏数和分栏宽度有一定的冲突，最好两个值不要一起设置
.box{ width: 600px;height: 400px;border: 1px black solid;margin: 30px auto;
column-count: 4;
/* column-width: 150px; */
column-gap: 20px;
column-rule: 1px red dashed;
}
.box1{column-span: all;text-align: center;}
<div class="box">
<h2 class="box1">啊啊啊啊啊啊啊啊啊啊 </h2>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 </p>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 。</p>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 </p>
<h3>看点一</h3>
<p>啊啊啊啊啊 啊啊啊啊啊 </p>
<p>啊啊啊啊啊 啊啊啊啊啊 </p>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 </p>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 </p>
<p>啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 /p>
<p> 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 啊啊啊啊啊 </p>
</div>
（34）伪类与伪元素
伪类和伪元素的区别：
在CSS 2.1中对伪类和伪元素的区别比较模糊。
CSS 3中对这两个概念做了相对较清晰地解释，并且在语法上也做了很明显的区分。
CSS 3中规定
伪类由一个冒号开始，然后为伪类的名称；
伪元素由两个冒泡开始，然后为伪元素的名称。
伪类概念:
伪类就是为了弥补常规的css选择器不足，以便获取更多的信息。
通常表示获取不存在与DOM树中的信息，或获取不能被常规css选择器获取的信息
列： :hover :focus :empty
伪元素概念：
伪元素本质上是创建一个有内容的虚拟容器。这个容器不包含任何的DOM元素，但是可以包含内容。另外开发者可以为伪元素定制样式
例：
::selection 选中的文本文字的底数和字体颜色
::first-line / first-letter
::before / after
（以前学的伪类构造器大部分都是伪类，但其中也有伪元素）
（35）CSS Hack
CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，
使用每个浏览器单独识别的样式代码， 控制浏览器的显示样式。
主要针对比较老旧的IE浏览器等
Hack分类：
1：CSS属性前缀
2：选择器前缀法
3：IE条件注释法
（IErexter软件工具：可以运行之前比较老旧的IE版本，进行IE低版本的测试工具）
1、css属性前缀法(在属性上添加)
属性前缀法实在CSS样式属性名前加上一些只有特定浏览器才能识别的Hack前缀，
已达到预期的页面展示效果.
在属性上加上前缀，只有该特定的浏览器版本才识别
.box{width:100px; height: 100px; background: red; +background: blue;}
<div></div>
可以看到只有在IE6和IE7版本为蓝色背景，IE其他版本都为红色背景
.box{width:100px; height: 100px; background: black\9}
<div></div>
可以看到IE6、IE7、IE8、IE9为黑色背景，其他都无颜色
2、选择器前缀法（在选择器上添加）
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，
在CSS选择器前加上一些只有特定浏览器才能识别的前缀进行Hack
例：
*html .box{ } 只有IE6版本才能应用该CSS样式
3、IE条件注释法
这种当时是IE浏览器专有的Hack方式，微软官方推荐使用的Hack方式
（36）低版本IE浏览器常见的BUG
由于旧浏览器在设计上有很对缺陷，导致一些BUG的产生，
所以针对这些问题需要做到兼容处理.
常见的一些兼容性问题
1.透明度（opacity）
opacity在IE8及以下版本不识别
解决方法：在添加一句 filter：alpha（opacity=50）；
2.双边距
盒子上有浮动和外边距---->产生两倍间距（在IE6下产生）
解决方法：添加 _display：inline
3.最小高度
因为IE6默认盒子的最小高度为19px（在IE6以下产生）
解决方案：添加 overflow：hidden
4.图片边框
给图片加链接有边框（在IE9以下）
解决方案： 在图片上添加 border：none
（比较古老的一些BUG，现在都不考虑这些问题了）（了解即可）
（37）渐进增强与优雅降级
渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能
针对高版本浏览器进行效果、交互等改进和追加功能达到更好地用户体验
优雅降级：
一开始就构建完整的功能，然后针对低版本浏览器进行兼容
（38）网页布局扩展
1、 等高布局
什么是等高布局？？？
一个块中多列的情况下，以多列中最高的那列为行高
怎么实现？？？
原理：
先在外层块加上溢出隐藏（overflow:hidden）
利用在块的每一个列中添加margin-bottom负值和padding-bottom正值组合的方式,
每个列的高度只适应（一正一负相同）
很明显可以看出第一个列中的内容比较多，外边框的高度根据第一个列高绝定
为什么？？？
给每一个列margin-bottom负值，该列下面东西（块的下边框）会覆盖掉该列中，
在加上溢出隐藏就会把列在边框外面的东西隐藏掉，
而每一个列内的padding-bottom正值又会把整个列的撑起来，
当一个正的和一个负的相等的时候，
即被下边框覆盖掉的和列自身的高度相同时该块的大小就变成了0该列的里面的内容的高度就会撑起列高，决定行高
2、三列布局，左右固定，中间自适应
方式一：BFC方式
方式二：定位
方法三：浮动（双飞翼布局，圣杯布局）
方法四：flex弹性
3、双飞翼布局：
利用浮动和margin-left: 负值
4、圣杯布局：
圣杯布局就是双飞翼布局内容部分不添加标签实现左右固定，中间自适应
扫一扫
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
