字体图标iconfont
优点
灵活性：修改样式灵活
轻量级体积小，渲染快，降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
避免放大锯齿化
使用方便：
- 编码式引入
<link rel="stylesheet" href="../iconfont/iconfont.css">
<style>
span {
font-family: "iconfont";
font-size: 12px;
}
</style>
</head>
<body>
<span></span>
</body>
- 样式引入
<link rel="stylesheet" href="../iconfont/iconfont.css">
<style>
.cl {
color: red;
font-size: 19px;
}
</style>
</head>
<body>
<span class="icon-bianji iconfont cl"></span>
</body>
矢量图标上传
- 拿到SVG格式图标，在阿里点击上传
- 去除颜色提交
- 加入购物车，下载使用
在线链接使用
- 一般是美工给的图标样式在线链接
<link rel="stylesheet" href="//at.alicdn.com/t/font_3243645_8568gh9eemr.css">
- 如果页面加载时间长，可以加上协议
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
面试题
a：font-class 底层实现原理
q：给对应的标签 添加一个为元素 设置content属性 属性值等于字体图标unicode 编码
2D平面转换
位移
-
相对于定位、margin来说，没有特别要求**，建议都用位移**来写。浏览器已对新功能做了性能优化
-
改变元素X，Y轴数值以改变位置
-
translate(50px, 0) == translateX(50px) -
translate(0, 50px) == translateY(50px)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
transform: translate(20px, 20px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
居中案例（2种方法都要掌握，开发常用）
- 定位 + 位移（工作中优先使用）
- 位移百分比单位会相对自身进行改变
- 就算元素大小发生改变，效果也不会有任何影响
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 600px;
height: 600px;
background-color: pink;
position: relative;
margin: 100px auto;
}
.son {
position: absolute;
width: 400px;
height: 400px;
background-color: red;
top: 50%;
left: 50%;
/* ----- */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
- 定位 + margin
- margin的值要精确知道需要居中元素的大小
- 一旦需要居中的元素大小发生改变，效果就会消失
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 600px;
height: 600px;
background-color: pink;
position: relative;
margin: 100px auto;
}
.son {
position: absolute;
width: 400px;
height: 400px;
background-color: red;
top: 50%;
left: 50%;
/* ----- */
margin: -200px -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
margin+position的百分比单位，都是相对于父元素决定- 位移
translate的百分比单位是相对于自身决定的
旋转
**注意：**单位是deg度，不要写px像素，也不能不写单位
transform: rotate(720deg);
转换原点
属性值有三种写法
- 像素（当两个值等于元素大小时，原点则在右下角）
transform-origin: 650px 650px;
- 方位名词（名词具体为上下左右对应的单词，以下实现的是右上角）
transform-origin: top right;
- 百分比单位（以下实现的是右下角）
transform-origin: 100% 100%;
旋转+位移（重点）
先后顺序不同，出来的效果也会不同，
- 先位移后旋转（实现轮胎效果）
transform: translateX(200px) rotate(120deg)
- 先旋转后位移（实现螺旋效果）
transform: rotate(120deg) translateX(200px)
缩放
书写规则：
- XY轴逗号隔开,数值代表放大自身的倍数
transform: scale(2, 5)
- 只写一个数值，代表两条轴放大元素自身统一的倍数
transform: scale(2)
渐变
- 属性名是
background-image不是backgro-color! 因为背景色是单色 - 一般只会设置两种颜色
<style>
.box {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent, red);
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
-
改变渐变的方向（方位名词）
- 默认值：从上到下
- 下到上：to top
- 左下角往右上角： top right top
<style> .box { width: 400px; height: 400px; background-image: linear-gradient(to top, black, red); margin: 100px auto; } </style> </head> <body> <div class="box"></div> </body>- 角度deg
<style> .box { width: 400px; height: 400px; /* background-image: linear-gradient(transparent, red); */ background-image: linear-gradient(120deg, black, red); margin: 100px auto; } </style> </head> <body> <div class="box"></div> </body> -
设置划分渐变高度
- 例：0-30% 黑色 30%-50% 红色 50%-80% 蓝色 80%-100% 黄色
<style> .box { width: 400px; height: 400px; /* background-image: linear-gradient(transparent, red); */ /* background-image: linear-gradient(to top, black, red); */ background-image: linear-gradient( black 30% , red 50% , blue 80% , yellow 100% ); margin: 100px auto; } </style> </head> <body> <div class="box"></div> </body>
空间转换
Z轴变化
- 默认情况下，元素是不会有近大远小的效果的
- 加上透视属性
perspective:1000;，可以实现近大远小效果（视距），通常情况给1000就够了 - 超过视距的元素无法被看见
立体呈现
想要做立体图形时，需要给容器设置一个开启立体空间的属性，transform-style: preserve-3d;
立方体制作
- 先用盒子装着六个大小一样的平面
- 逐一位移，再旋转，把每一个平面推至六面对应位置
3D缩放
scale(x, y, z)- 分别表示元素的宽度，高度，厚度
动画
步骤
-
定义动画：
-
使用动画：
演示
<style>
@keyframes change {
from {
background-color: black;
border-radius: 50%;
}
to {
background-color: #ccc;
border: 1px solid #444;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: red;
animation: change 2s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
具体属性
-
animation-name——动画名称
-
animation-duration——动画持续的时间
-
animation-delay——动画延迟时间
- 默认延迟状态下显示的是原本自身的效果
-
animation-fill-mode——动画延迟时间内显示第一帧或者结束后停留最后一帧
-
如果想延迟时间内显示0%画面：backwards
-
动画播放完毕，画面停留在最后一帧：forwards
-
both （相当于同时设置了 backwards 和 forwards）
-
-
animation-iteration-count——动画播放次数
- 无数次播放：infinite
-
animation-direction——动画播放方向
- 默认值normal，开始到结束，再瞬间回到开始
- 开始状态到结束状态，往返运动，往返各算作一次运动：alternate
- 与默认值的运动完全相反，结束状态运动到开始状态，瞬间回到结束状态：reverse
- 与alternate运动方式相反，结束状态到开始，再继续往返：alternate-reverse
-
animation-play-state——动画播放暂停
- paused，暂停
- running，播放
-
animation-timing-function——动画曲线
- 默认设置，ease，慢快慢
- linear，匀速
- steps(n)：帧动画
- 精灵图宽度=运动总宽度px，小图张数=步数n
- 精灵图宽度-一张小图宽度=运动总宽度px，小图张数-一张=步数n
无缝轮播图
- 需要两个盒子
- 大盒子装着小盒子
- 小盒子装载需要的图片，给够宽度放满
- 存放的图片要比实际的图片多
- 大盒子能装下多少张图片，就把小盒子前面多少张图片复制到小盒子后面加上
- 设置动画
- 让装载图片的小盒子位移，移动的距离=真实图片的宽度，复制的几张不用管
- 最后加上infinite
过渡动画
- 过渡也存在速度曲线
- 有时候会有不尽人意的效果
- 能用且起到简洁的作用是最好的选择
less
**less是一种提高我们编写css效率的技术=>css预处理器（less，scss，stylues技术名词） **
less完全兼容css语法
less工作流程
- 在less文件编写样式代码
- 通过插件把less编译成css文件
- 网页引入编译好的css文件
使用less的过程
- 新建一个less文件（*.less）
- 按照less语法要求编写代码
- 通过easy less插件编译less文件
- 生成对应的css文件
- 在网页中直接引入编译好的css文件即可
计算
less可以直接进行加减乘除计算，但是除法最外层要加上括号
混合mixin
多个类要使用相同的一套代码，可以使用混合
mixin传参
less嵌套
-
普通嵌套
p{ div{ } } -
子代选择器
p{ > div{ color: red; } } -
伪元素（一定要使用连接符**&，否则伪元素不生效，前面会有空格**）
p{ &::before{ content: ""; } }
文字显示省略号
响应式布局
根据屏幕宽度不同，使用不同的css，也就是专业术语——媒体查询
写法
-
两种写法，企业中常用第二种
<style> @media(width:400px){ body{ background-color: red; } } @media screen and (width:800px) { body{ background-color: yellow; } } </style> -
宽度可以改为高度，但一般以宽度做响应式
-
基本实现（重要——基本原理）
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } div{ float: left; background-color: aqua; border: 1px solid #000; margin-bottom: 10px; } @media screen and (max-width:400px) { div{ width: 100%; height: 100px; } } @media screen and (min-width:400px) and (max-width:800px){ div{ width: 50%; height: 100px; } } @media screen and (min-width:800px) { div{ width: 25%; height: 200px; } } </style> <body> <div></div> <div></div> <div></div> <div></div> </body>
Bootstrap——响应式布局UI框架
用法
<!-- 1.引入bootstrap.css -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<!-- 2.引入query.js -->
<script src="./lib/bootstrap/jquery.js"></script>
<!-- 3.引入bootstrap.js -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
栅格化系统
<div class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1">12</div>
</div>
</div>
- container——版心容器
- 不可删除
- 默认不占满屏幕
- 需要占满屏幕写container-fluid
- row——固定栅格的容器
- 不可删除
- col-lg-1——列
- 每一列占1-12份（最后一个数字表示）
- 屏幕类型
- lg——大屏幕
- md——中等屏幕屏幕
- xm——小屏幕
- xs——极小屏幕
- 较大屏幕如果没有设置栅格份数，会自动沿用较小屏幕的设置
实际开发
- 实际开发不需要写base.css来初始化
- 媒体查询 + 浮动，就是bootstrap实现栅格系统的本质
- 响应式布局网站，用不用flex布局？
- 一般情况下，响应式布局的网站不建议使用flex
- 响应式布局包含了pc端和移动端，pc端可能会存在低版本的浏览器（ie8，9，10）
- 低版本的pc端的ie浏览器对于css3的支持还未完全优化——flex无效
- 特别情况，经理明确说明，不用管低版本的ie - 就可以正常使用所学过的css3的知识
- 一般情况下，响应式布局的网站不建议使用flex
- 使用第三方的UI框架
- 90%代码第三方提供
- 10%需要自己调试，这是开发必备技能
- 新旧项目效果不一的原因
- bootstrap引入版本不同，效果不同
- 解决方法
- 直接使用旧的bootstrap版本
- 建议老板使用新的版本-接受布局细节和版本不一致
- 使用新版本，挨个微调成旧版效果（不推荐）
拓展
- 行内元素 加上浮动
float会隐式转换为行内块元素 - 无论什么元素，加了绝对定位都会转换成块级元素
- 单标签不支持使用伪类元素
- 盒子元素默认会有
background-color: transparent的设置，意思是与父元素的背景颜色相同，我们称之为背景透明色 display: none;、渐变色，都是没有过渡**效果的- 背景图片的过渡效果还没完善，慎用（浏览器支持不够好）
- 需要给背景图片或者渐变色添加过渡，可以设置
opacity:;，一张图片0-1，另一张1-0 - 谷歌调试
- 上下键——1px
- alt + 上下键——0.1px
- shift + 上下键——10px
- ctrl + 上下键——100px
- 如何知道css的兼容性，面试官问题
- caniuse.com!
- rotate不是3D转换
- 过渡可以实现什么效果？
- 实现2个状态间的变化过程
- 帧动画中，大图片结合背景效果的时候，有些浏览器会有不稳定出现bug的情况
- ie、火狐有效果
- 谷歌、edge没有效果（同样是谷歌内核）
- 开发当中写出准确的宽高即可
