1、加载字体
<!-- 加载已有的特殊字体 -->
<!-- 1、把字体放在font文件夹里面 -->
<!-- 2、在html页面，在link标签上面创建style标签 -->
<!-- 3、加载特殊字体 -->
<!-- 4、使用 -->
<style >
@font-face {
font-family: 'myFont'; 文字要有双引号，数字字母下划线、数字不开头，可以省略双引号
src: url(./font/myfont.ttf); 加载字体文件
}
p{
font-family: 'myFont';
}
</style>
加载字体图标
<!-- 线上图标 -->
<!-- 1、在iconfont网站上找到想要的图标 -->
<!-- 2、复制svg代码 -->
<!-- 3、去html页面粘贴 -->
2、浏览器前缀
<!-- 浏览器前缀 -->
<!-- 谷歌、苹果 前缀：-webkit -->
<!-- 火狐、Opera 前缀：-moz -->
<!-- IE 前缀：-ms -->
<!-- Safari、Opera 前缀：-o -->
3、渐变（颜色值由一种状态过渡到另外一种状态）：线性渐变、径向渐变、重复渐变
.box{
width: 200px;
height: 200px;
/* 线性渐变 */
/* (方向，颜色1，颜色2，颜色3。。。。) */
/* 方向：to top、to right bottom、150deg */
/* 原点在左下角 */
background: linear-gradient(to right,red,blue);
}
.box{
width: 200px;
height: 200px;
/* 径向渐变 radial-gradient，加前缀 */
/* (起点位置，形状，大小，颜色1，颜色2，颜色3.。。。) */
/* 起点位置：center center/百分比 10% 20% */
/* 形状跟大小只能二选一 */
/* 形状：circle（圆）/ellipse（椭圆） */
/* 大小：closest-side（最近边）/farthest-side（最远边）/closest-corner（最近角）/farthest-corner（最远角） */
background: -webkit-radial-gradient(center center,circle,green,rgb(140, 140, 223),black);
}
.box{
width: 200px;
height: 200px;
/* 重复渐变：在线性渐变或者是径向渐变的基础上加repeating */
/* (颜色 百分比，颜色 百分比) */
/* 百分比从小到大，不能重复 */
background: repeating-linear-gradient(yellow 5%,red 10%);
background: repeating-radial-gradient(blue 5%,red 10%);
}
4、过渡属性
li{
width: 300px;
height: 100px;
margin-top: 30px;
background-color: peru;
/* 参与过渡的属性 transition-property，默认值是all */
transition-property: width;
/* 过渡持续的时间——数字，单位是s */
transition-duration: 2s;
/* 过渡延迟的时间——数字，单位是s */
transition-delay: 1s;
/* 过渡的动画类型——linear（匀速）/ease（逐渐慢下来）/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）/cubic-bezier（）（贝塞尔曲线）/steps（逐帧动画） */
transition-timing-function: linear;
/* 复合属性 */
/* 参与过度的属性 持续时间 动画类型 延迟时间 */
/* 只写一个时间的话，就是持续时间 */
transition: all 2s linear 1s;
}
ul:hover li{
width: 1300px;
background-color: red;
}
5、2d动画：
/* 2D动画 */
.box:hover {
/* 平移 translate */
transform: translate(60px 60px);
/* 缩放 scale(纯数字) 小于1缩小，大于1放大 */
transform: scale(0.2);
/* 旋转 rotate */
transform: rotate(90deg);
/* 倾斜 skew */
transform: skew(50deg);
/* 改变原点 */
transform-origin: top center;
}
6、可以给负数的属性：margin、position中的top/left/right/bottom、z-index、text-indent、background-position、text-shadow、box-shadow
7、字体图标使用方法：I、unicode。II、fontclass。III、symbol
8、
.box{
/* 需求：分为三列 */
columns: 3;
/* 列与列之间的距离 */
column-gap: 30px;
/* 列与列之间的分割线 复合属性：颜色 样式 宽度 */
column-rule: 4px solid red;
column-rule-style: dashed;
column-rule-color: green;
column-rule-width: 10px;
/* 高度是否统一 auto(一列填满再去填写第二列)/balance(等分 默认值)*/
column-fill: auto;
/* 每列宽度。有宽度属性，就不用写列数。有列数，宽度不生效 */
column-width: 200px;
/* 子机标签是否折行显半 avoid（不折行）*/
break-inside: avoid; // 给到子级元素身上
}
9、弹性盒布局：给父级添加弹性盒属性，里面的子级自动变成块级，并且在一排显示，我们可以通过各种属性，调整子级的排列方式。
容器：父级盒子
项目：直属子级盒子
容器属性如下：
/* 容器属性一共有6个，项目属性3个 */
.box{
width: 400px;
height: 400px;
/* 触发弹性盒 flex（块级弹性盒）、inline-flex（行内弹性盒） */
display: flex;
/* 主轴方向:row(横向，默认值)/row-reverse（横向-反向）/column（纵向）/column-reverse（纵向-反向） */
flex-direction: row;
/* 项目在主轴上的对齐方式 */
/* flex-start/center/flex-end/space-between/space-around/space-evenly */
/* flex-start:顶端对齐，主轴开始位置（默认值）（项目之间没有间距） */
/* flex-end:末端对齐，主轴结束位置（项目之间没有间距） */
/* center：居中对齐，主轴中间位置（项目之间没有间距） */
/* space-between：两端对齐，项目与项目之间距离相等，但是项目与容器之间没有间距 */
/* space-around：环绕对齐，项目与项目之间距离相等，是项目与容器之间距离的2倍 */
/* space-evenly：等分对齐，项目与项目之间距离相等，和项目与容器之间距离也相等 */
justify-content: space-between;
/* 侧轴的对齐方式 align-items：flex-start、flex-end、center */
/* flex-start：顶端对齐，侧轴开始位置（默认值） */
/* flex-end：末端对齐，侧轴结束位置 */
/* center：居中对齐，侧轴中间位置 */
align-items: flex-start;
/* flex-wrap：nowrap（默认值）/wrap（换行）/wrap-reverse（反向折行） */
flex-wrap: wrap;
/* 行与行之间间距 flex-start/center/flex-end/space-between/space-around/space-evenly */
align-content: flex-start;
}
项目属性：align-self（项目的对齐方式）、order（排序）、flex（复合属性）
.div4{
/* 项目自身的对齐方式 */
align-self: flex-end;
/* 项目的排列顺序 */
order: 4;
/* 扩展的量，默认为0 */
flex-grow:1 ;
/* 缩放的量，默认是1 */
flex-shrink: 1;
/* 项目的长度，相当于宽度属性，也可以给百分比 */
flex-basis:20px ;
}
10、怪异盒模型：content+margin。padding和border不占位置
标准盒模型:content+padding+border+margin
怪异盒模型:content(content+padding+border)+margin
触发属性: box-sizing:border-box。还有一个属性值叫content-box,这是默认值也是标准盒模型
.box{
width: 200px;
height: 200px;
/* 开启怪异盒模型 */
box-sizing: border-box;
}
11、响应式布局：是一种网页设计的方法，它能够使网站在不同的设备上（比如桌面电脑、平板电脑、手机等）都能够以最佳的方式展示。
12、常见布局：多列布局、固定布局、自适应布局（宽度不再写，里面是正常的，可视窗口大小）、响应式布局（根据不同的分辨率实现页面的结构）
13、响应式布局：语法：媒体查询（@media） min-width max-width
14、需求：三列布局 在电脑分辨率>1366px三列布局 在1000px-1366px之间变为两列布局 小于1000px变为一列布局
<style>
/* 使用弹性盒子实现三列布局 */
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
/* 这里是控制分辨率是大于等于1366px */
@media screen and (min-width:1366px) {
body{
display: flex;
}
.left{
flex: 1;
height: 100%;
background-color: pink;
}
.center{
flex: 5;
height: 100%;
background-color: greenyellow;
}
.right{
flex: 1;
height: 100%;
background-color: blue;
}
}
/* 分辨率小于1365并且是大于1000 显示两列布局 */
@media screen and (min-width:1000px) and (max-width:1365.5px) {
/* 需求：只保留左边和中间内容 */
body{
display: flex;
}
.left{
flex: 1;
height: 100%;
background-color: pink;
}
.center{
flex: 5;
height: 100%;
background-color: greenyellow;
}
.right{
flex: 1;
height: 100%;
background-color: blue;
/* 隐藏元素 */
display: none;
}
}
/* 分辨率小于1000 */
@media screen and (max-width:999px) {
body{
display: flex;
}
.left{
flex: 1;
height: 100%;
background-color: pink;
}
.center{
flex: 5;
height: 100%;
background-color: greenyellow;
display: none;
}
.right{
flex: 1;
height: 100%;
background-color: blue;
display: none;
}
}
</style>
15、媒体查询：根据不同分辨率可以适配所有设备。缺点：代码繁琐，代码冗余。注意：如果需要设置媒体查询，那么设备后面and和分辨率直接必须有空格。
语法: @media all and (min-width){选择器和样式}
16、移动端
dpr:2.0 含义：设备像素比。例如设备是375 667，375的宽度下，每一像素里面实际上包含了两个像素密度。一个px里面有2pt。设计图应该与实际显示的差二倍
750被称为布局视图，375被称为可视窗口。
假设在750px的设计稿中测量的元素宽高是100px 最终在移动端显示为50 50就对了
<!-- 这个标签非常重要，移动端的适配主要取决于它 -->
<!-- width=device-width 宽度=设备宽度 initial-scale=1.0 初始比例是1.0-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
