css3的新特性如下：
1.新增了更加实用的选择器，例如：动态伪类选择器，目标伪类选择器，伪元素选择器等等。
2.新增了更好的视觉效果，例如：圆角，阴影，渐变等。
3.新增了丰富的背景效果，例如：支持多个图片背景，同时新增了若干个背景元素的属性。
4.新增了全新的布局方案---弹性盒子。
5.新增了web字体，可以显示用户电脑上没有安装的字体
6.增强了颜色，例如：HSL，HSLA，RGBA几种新的颜色模式，新增opacity属性来控制透明度。
7.增加了2D和3D变换，例如：旋转，扭曲，缩放，位移等。
8.增加动画和过渡效果，让效果的变换更具流线性，平滑性。
。。。。等等
css3私有前缀
查询css3兼容性的网站：https://caniuse.com/
常见浏览器私有前缀
Chrome 浏览器 -webkit-
Safari 浏览器 -webkit-
Firefox 浏览器 -moz-
Edge 浏览器 -webkit-
旧 Opera 浏览器 -o-
旧 IE 浏览器 -ms-
javascript
<style scoped>
div{
width:100px;
height: 100px;
-webkit-border-radius:10px;
border-radius:10px;
}
</style>注意：我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的css3新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具比如：webpack，去帮我们添加私有前缀。
css3新增长度单位
1.rem根元素字体大小的倍数，只与根元素字体大小有关。
2.vw视口宽度的百分之多少 10vw 就是视口宽度的10%
3.vh视口高度的百分之多少 10vh就是视口高度的10%
4.vmax视口宽高中大的那个的百分之多少。（了解即可）
5.vmin视口宽高中小的那个的百分之多少。（了解即可）
新增盒子属性 border-box
resize(了解)
box-shadow 盒子阴影 （写4个值的比较常用）
opacity 不透明度（0~1）
opacity与rgba（区别）
opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
javascript
<template>
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</template>
<style scoped>
.box1{
width: 100px;
height: 100px;
background-color: rgb(225, 225, 245);
padding: 5px;
border: 5px solid black;
/* 默认值 写与不写一样 */
box-sizing: content-box;
/* horizontal水平方向可以调 vertical垂直方向可以调 both水平和垂直都可以调 默认值是none resize前提必须配合overflow来使用 */
resize: both;
overflow: hidden;
opacity: 0.2;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(225, 225, 245);
padding: 5px;
border: 5px solid rgba(211, 25, 25, 0.5);
box-sizing: border-box;
margin: auto;
/* 阴影 第一种 写2个值 含义：水平位置阴影 垂直位置阴影*/
/* box-shadow: 10px 10px; */
/* 阴影 第二种 写3个值 含义：水平位置阴影 垂直位置阴影 阴影的颜色*/
/* box-shadow: 10px 10px blue; */
/* 阴影 第三种 写3个值 含义：水平位置阴影 垂直位置阴影 模糊程度*/
/* box-shadow: 10px 10px 10px; */
/* 阴影 第四种 写4个值 含义：水平位置阴影 垂直位置阴影 模糊程度 阴影的颜色*/
/* box-shadow: 10px 10px 10px blue; */
/* 阴影 第五种 写5个值 含义：水平位置阴影 垂直位置阴影 模糊程度 外延值 阴影的颜色*/
/* box-shadow: -10px -10px 10px 10px blue; */
/* 阴影 第六种 写6个值 含义：水平位置阴影 垂直位置阴影 模糊程度 外延值 阴影的颜色 内阴影*/
/* box-shadow: -10px -10px 10px 10px blue inset; */
/* 阴影 第七种和第四种情况一样 只是加了一个内阴影 其实就是4个值 写5个值 含义：水平位置阴影 垂直位置阴影 模糊程度 阴影的颜色 内阴影*/
box-shadow: 0px 0px 10px blue inset;
}
</style>新增背景属性 background-origin
设置背景图的原点
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 200px;
height: 200px;
background-color: rgb(225, 225, 245);
margin: auto;
/* 从padding左上角开始铺图 */
padding: 20px;
/* dashed虚线 */
border: 20px dashed rgba(186, 114, 114, 0.5);
/* 小图最能看出效果 */
background-image: url('../assets/images/pak.png');
background-repeat: no-repeat;
/* background-origin默认值padding-box 从padding左上角开始铺图 */
/* content-box 从内容左上角开始铺图 */
/* border-box 从border左上角开始铺图 */
background-origin: border-box;
}
</style>background-clip 对背景图进行修剪
javascript
<template>
<div>
<div class="box1">你好</div>
</div>
</template>
<style scoped>
.box1{
width: 200px;
height: 200px;
background-color: rgb(225, 225, 245);
margin: auto;
/* 从padding左上角开始铺图 */
padding: 20px;
font-size: 80px;
font-weight: bold;
color: rgba(186, 114, 114, 0.5);
/* dashed虚线 */
border: 20px dashed rgba(186, 114, 114, 0.5);
/* 大图最能看出效果 */
background-image: url('../assets/images/mobile_d.jpg');
background-repeat: no-repeat;
/*background-clip 裁剪属性 默认值border-box border以外的背景图是不可见的*/
/* padding-box 超过padding以外的背景图是不可见的 */
/* content-box 超过内容以外的背景图是不可见的 */
/* text 前提是需要把文字改成透明的颜色 文字背景色 只呈现在文字上面*/
-webkit-background-clip: text;
background-clip: text;
}
</style>background-size 背景大小
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
/* 长度比不一样的图最能看出效果 */
background-image: url('../assets/images/bg.png');
/*background-size属性值 两个值 不能是负值 背景图的宽高 200px 200px 整个图片会变形*/
/*background-size属性值 两个值 不能是负值 背景图的宽高 100% 100% 整个图片会变形 和容器一样的宽高*/
/*background-size属性值 contain包含 长宽比不够的会重铺 不会变形 完整呈现出来图片 可能会造成容器里部分区域没有背景图片*/
/*background-size属性值 cover 不变形 尽可能展示完整的图片 或是长 或是宽 等比例缩放 如果比例和容器不一样 图片有可能显示不完整 相对比较好的选择*/
/* 默认是auto 左上角对齐 */
background-size: cover;
}
</style>background复合属性
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
/* 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式*/
/* 大小的值必须写在位置值的后面，并且用/分开 */
background:skyblue url('../assets/images/bg.png') no-repeat 10px 10px / 100px 100px border-box content-box;
}
</style>多背景图background
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 400px;
height: 400px;
margin: auto;
border: 1px solid red;
/* 小图最能看出效果 */
background: url('../assets/images/lt.png') no-repeat left top,
url('../assets/images/rt.png') no-repeat right top,
url('../assets/images/lb.png') no-repeat left bottom,
url('../assets/images/rb.png') no-repeat right bottom;
}
</style>边框圆角border
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 400px;
height: 400px;
margin: auto;
border: 2px solid red;
/*border-radius属性 一个值 正圆 200px 容器的一半 或者 50% */
/* 正圆圆角 */
/* border-top-left-radius: 30px;
border-top-right-radius: 40px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 10px; */
/* 椭圆圆角 */
/* border-top-left-radius:30px 60px; */
/* 复合属性 */
border-radius:100px 50px 20px 10px / 50px 20px 10px 5px;
}
</style>边框外轮廓outline
javascript
<template>
<div>
<div class="box1"></div>
</div>
</template>
<style scoped>
.box1{
width: 400px;
height: 400px;
margin: auto;
border: 20px solid red;
/* 边框外轮廓 不占位*/
/* outline-width: 20px;
outline-color: blue;
outline-style: solid; */
/* 偏移量 有负值 是一个独立的属性 */
outline-offset: 10px;
/* 复合属性 */
outline: 20px solid orange;
}
</style>文本阴影text-shadow
javascript
<template>
<div>
<h1>你好</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
text-align: center;
/* 文本阴影 */
/* text-shadow:3px 3px; */
/* text-shadow:3px 3px red; */
/* 水平阴影的位置 垂直阴影的位置 模糊的距离 颜色 */
text-shadow:3px 3px 10px red;
}
</style>文本换行white-space
javascript
<template>
<div>
发圣诞节快乐
迦拉克隆看就看
发圣诞节快乐
迦拉克隆看就看
发圣诞节快乐
迦拉克隆看就看
</div>
</template>
<style scoped>
div{
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 20px;
/* 强制不换行nowrap*/
/* normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格 默认值*/
/* pre 原样输出，与pre标签的效果相同 */
/* pre-wrap pre-line 超出元素边界自动换行 */
white-space: nowrap;
}
</style>文本溢出text-overflow
javascript
<template>
<div>
<ul>
<li>一境界的人像摄影作品,除了对摄影师本身的素质提出要求之外,还依赖于一些客观因</li>
<li>美丽大自然,美景似天堂 7分钟前 相关推</li>
<li>是该市的标志,也是世界最闻名</li>
</ul>
</div>
</template>
<style scoped>
ul{
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 20px;
list-style: none;
padding-left: 0;
}
li{
margin-bottom: 10px;
/* 第一个 */
overflow: hidden;
/* 第二个 */
white-space: nowrap;
/* 第三个属性才生效 */
/* 文本溢出 必须配合overflow: hidden; 使用 */
/* ellipsis 三个点 clip 截掉*/
text-overflow: ellipsis;
}
</style>文本修饰text-decoration
javascript
<template>
<div>
发圣诞节快乐
迦拉克隆看就看
</div>
</template>
<style scoped>
div{
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 20px;
/* 文本修饰 下划线 underline 上划线overline line-through中间线 默认是none*/
/* text-decoration:none ; */
/* text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: dashed; */
/* 复合属性 */
text-decoration:line-through dashed red;
}
</style>文本描边text-stroke
javascript
<template>
<div>
<h1>发圣诞节快乐迦拉克隆看就看</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
/* -webkit-text-stroke-color: red;
-webkit-text-stroke-width: 3px; */
/* 宽度 颜色 */
-webkit-text-stroke: 3px red;
color: transparent;
}
</style>新增渐变
线性渐变 linear-gradient
文字渐变
javascript
<template>
<div>
<div class="box"></div>
<div class="box1">你好</div>
</div>
</template>
<style scoped>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
/*linear-gradient线性渐变 默认从上往下 */
/* background-image: linear-gradient(red,yellow,green,blue,black); */
/* 从左往右to right 从右往左 to left */
/* background-image: linear-gradient(to left, red,yellow,green); */
/* 从右上角 to right top */
/* background-image: linear-gradient(to right top, red,yellow,green); */
/* 从20度角 20deg 整个界面的20度角 顺时针 最右边是0度开始 */
/* background-image: linear-gradient(20deg, red,yellow,green); */
/* 渐变的位置 */
/* background-image: linear-gradient( red 50px,yellow 100px,green 150px); */
background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
}
/* 文字渐变 */
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
</style>径向渐变radial-gradient
javascript
<template>
<div>
<div class="box"></div>
</div>
</template>
<style scoped>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
/* 径向渐变radial-gradient 默认从里像外*/
/* background-image: radial-gradient( red,yellow,green); */
/* 设置渐变圆心 at left top 左上角 at 100px 50px 设置圆心*/
/* background-image: radial-gradient(at left top, red,yellow,green); */
/* background-image: radial-gradient(at 100px 50px, red,yellow,green); */
/* circle调整渐变为正圆 */
/* background-image: radial-gradient(circle, red,yellow,green); */
/* 正圆 椭圆数值不一样就可以 */
/* background-image: radial-gradient(100px 100px, red,yellow,green); */
/* background-image: radial-gradient( red 50px,yellow 100px,green 150px); */
/* 100px 50px是否椭圆 at 150px 150px圆心的位置 综合写法 */
background-image: radial-gradient(100px 50px at 150px 150px, red 50px,yellow 100px,green 150px);
}
</style>重复渐变 repeating-xxx-gradient
在没有发生渐变的区域，重新开始渐变，就是重复渐变
javascript
<template>
<div>
<div class="box"></div>
</div>
</template>
<style scoped>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
/* 重复线性渐变repeating-linear-gradient */
/* background-image:repeating-linear-gradient(red 50px,yellow 100px,green 150px); */
/* 重复径向渐变repeating-radial-gradient */
background-image:repeating-radial-gradient(red 50px,yellow 100px,green 150px);
}
</style>web字体 font-family
https://www.iconfont.cn/webfont#!/webfont/index 阿里定制字体 体积小 本地下载 引入所有解压的文件 不包括html文件
https://www.iconfont.cn/ 可以定制图片图标 把需要的图标下载本地 有说明html文件文档 按步骤操作就可以
javascript
<template>
<div>
<h1 class="web-font">大姐夫凉快是凉快</h1>
</div>
</template>
<style scoped>
@font-face {
font-family: '哈哈嘻嘻';
font-display: swap;
src: url('../font/webfont.eot'); /* IE9 */
src: url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/webfont.woff2') format('woff2'),
url('../font/webfont.woff') format('woff'), /* chrome、firefox */
url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
h1{
font-size: 30px;
/* font-family: '隶书'; */
font-family: '哈哈嘻嘻';
}
</style>2d变换 transform
translate 位移
1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素
2.与相对定位的区别：相对定位的百分值，参考的是其父元素，定位的百分比值，参考的是其自身
3.浏览器针对位移有优先，与定位相比，浏览器处理位移的效率更高
4.位移对行内元素无效
5.位移配合定位，可实现元素水平垂直居中
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
position: relative;
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* transform变换 位移translateX X方向位移100px 50%是自己的50&*/
/* translateY Y方向位移 */
/* transform: translateX(50%); */
/* 水平+垂直位移 */
/* transform: translateX(50px) translateY(50px); */
transform: translate(50px,50px);
}
.outer1{
position: absolute;
background: blue;
height: 50px;
width: 50px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
</style>缩放 scale
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* scaleX X轴缩放0.5倍 scaleY Y轴缩放0.5倍*/
/* transform: scaleY(0.5); */
/* transform: scaleX(0.5) scaleY(0.5); */
/* X方向和 Y方向都缩放了 */
transform: scale(0.5);
}
</style>旋转 rotate
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* 旋转 rotateZ Z轴旋转 适合我们视觉的肉眼效果 可以看出效果来*/
/* transform: rotateZ(45deg); */
/*rotate写一个值就是2D旋转 Z轴旋转 顺时针旋转 */
transform: rotate(45deg);
}
</style>扭曲（了解）skew
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* 扭曲 skewX 逆时针旋转方向 左上角 右下角拉扯*/
/* transform: skewX(30deg); */
/* 扭曲 skewY*/
/* transform: skewY(30deg); */
/* transform: skewX(30deg) skewY(30deg); */
/* 一个值代码skewX 两个值代码skewX skewY */
transform:skew(30deg,30deg);
}
</style>多重变换
注意:多重变换时，建议最后旋转
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* transform:translate(100px,100px) scale(0.5); */
transform:translate(100px,100px) rotate(30deg);
}
</style>变换原点 transform-origin
如果只提供一个值，若是像素值，表示横坐标，纵坐标取50%。若是关键词，则另一个坐标取50%
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: 100px;
/* 变换原点 left top 左上角为原点 通过关键词调整变换原点*/
/* transform-origin: left top; */
/* 通过具体像素值调整变换原点 */
/* transform-origin: 50px 50px; */
/* 通过百分比调整变换原点 */
/* transform-origin: 10% 20%; */
/* 只给一个值 */
transform-origin: left;
/* 变换原点位置的改变对 旋转 有影像 */
transform: rotate(30deg);
/* 变换原点位置的改变对 位移 没有影像 */
/* transform: translate(100px,100px); */
/* 变换原点位置的改变对 缩放 有影像 */
/* transform: scale(1.4); */
}
</style>3D变换
1.开启3D空间 transform-style
重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间
2.设置景深 perspective
何为景深：指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体
透视点的位置 perspective-origin
所谓透视点位置，就是观察者位置，默认的透视点在元素的中心，
注意：通常情况下，我们不需要跳转透视点位置
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: red;
/* 3.变换3D */
transform: rotateX(30deg);
}
</style>位移 translate3d
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: rgba(212, 115, 115,0.5);
/* 3.变换3D translateZ 只能写像素值 不能写百分比 位移*/
/* transform: translateZ(200px); */
/*translate3d 第一个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略 */
transform: translate3d(100px,100px,0px);
}
</style>旋转 rotate3d
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: rgba(212, 115, 115,0.5);
/* 3.变换3D rotateX 旋转*/
/* transform: rotateX(45deg); */
/* rotate3d前3个参数分别表示坐标轴：x,y,z，第4个参数表示旋转的角度，参数不允许省略 */
transform: rotate3d(1,0,0,30deg);
}
</style>缩放 scale3d
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: rgba(212, 115, 115,0.5);
/* 3.变换3D scaleX 缩放*/
/* transform: scaleX(0.5); */
/* transform: scaleZ(2) rotateY(45deg); */
/* scale3d第一个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。 */
transform: scale3d(1.5,1.5,1) rotateY(45deg);
}
</style>多重变换
注意点：多重变换时，建议最后旋转
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: rgba(212, 115, 115,0.5);
/* 3.变换3D 多重变换*/
/* 变换原点 */
/* transform-origin: 202px 0px;
transform: rotateY(-45deg); */
transform: translateZ(100px) scaleZ(2) rotateY(45deg);
}
</style>背部可见性 backface-visibility
javascript
<template>
<div class="outer">
<div class="outer1"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin: auto;
margin-top: 100px;
/*1. 父元素需要开启3D空间 */
transform-style: preserve-3d;
/*2. 设置景深（有了透视效果，近大远小）可以给元素一半的多一点比如150px */
perspective: 500px;
/* 设置透视点的位置 默认是元素的一半 就是102px*/
perspective-origin: 102px 102px;
}
.outer1{
width: 200px;
height: 200px;
background: rgba(212, 115, 115,1);
/* 3.变换3D*/
transform: rotateY(130deg);
/* 背部可见性 hidden超过90度 不可见了 默认是visible */
backface-visibility: hidden;
}
</style>过渡 transition
不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡，
常见的支持过渡的属性有：颜色，长度值，百分比，z-index, opacity , 2D变换属性，3D变换属性，阴影。
过渡属性建议 放在容器身上 不要放在 :hover 身上 过渡需要触发条件
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 200px;
background-color: aqua;
/* 触发过渡是提前是变 跟数字相关 百分比相关 */
/* 设置哪个属性需要过渡效果*/
/* transition-property: height,width,background-color; */
/* 让所有能过渡的属性，都过渡 */
transition-property: all;
/* 设置过渡时间 */
/* 分别设置时间 */
/* transition-duration: 1s,5s,1s; */
/* 设置一个时间，所有人都用 */
transition-duration: 1s;
}
.outer:hover{
height: 400px;
width: 400px;
background-color:green;
transform: rotate(45deg);
box-shadow: 0px 0px 20px black;
opacity: 1;
}
</style>高级使用------ 贝塞尔曲线
javascript
<template>
<div class="outer">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 450px;
border:1px solid black;
}
.outer:hover .box{
width: 1000px;
}
.box{
width: 200px;
height: 50px;
/* 让所有能过渡的属性，都过渡 */
transition-property: all;
/* 设置一个时间，所有人都用 */
transition-duration: 1s;
/* 过渡延迟 */
transition-delay: 1s;
/* */
}
.box1{
background-color: aqua;
/* 慢 快 慢 */
transition-timing-function: ease;
}
.box2{
background-color: rgb(69, 158, 25);
/* 匀速 */
transition-timing-function: linear;
}
.box3{
background-color: rgb(201, 134, 26);
/* 慢 快 */
transition-timing-function: ease-in;
}
.box4{
background-color: rgb(164, 35, 215);
/* 快 慢 */
transition-timing-function: ease-out;
}
.box5{
background-color: rgb(25, 192, 148);
/*慢 快 慢 */
transition-timing-function: ease-in-out;
}
.box6{
background-color: rgb(174, 95, 118);
/* 不考虑过渡的时间，直接就是终点 */
transition-timing-function: step-start;
}
.box7{
background-color: rgb(45, 122, 163);
/* 考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点 */
transition-timing-function: step-end;
}
.box8{
background-color: rgb(43, 164, 63);
/* 分布过渡 和值有关 */
transition-timing-function: steps(20,end);
}
.box9{
background-color: rgb(209, 215, 35);
/* 无敌的贝塞尔曲线 https://cubic-bezier.com/ 代码复制过来 */
transition-timing-function: cubic-bezier(.57,.91,.41,1.41);
}
</style>复合属性
javascript
<template>
<div class="outer">
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 100px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
background-color: aqua;
/* 如果设置了一个时间，表示duration,如果设置了两个时间，第一个是duration,第二个是delay;其他值没有顺序要求 */
transition: 2s all 0.5s linear;
}
.outer:hover .inner{
width: 1000px;
}
</style>动画
不需要触发条件
第一步：定义关键帧（定义动画）
@keyframes 动画名
第二步：给元素应用动画，用到的属性如下：
animation-name:给元素指定具体的动画（具体的关键帧）
animation-duration:设置动画所需时间
animation-delay:设置动画延迟
javascript
<template>
<div class="outer">
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 100px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
background-color: aqua;
/* 应用动画到元素 动画名称 自定义*/
animation-name: haha2;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.5s;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
/* 第一帧 */
form {
}
/* 最后一帧 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定义一个动画（定义一组关键帧） 第二种方式*/
@keyframes haha2{
/* 第一帧 */
0% {
}
29% {
background-color: blueviolet;
}
48% {
background-color: rgb(104, 77, 36);
}
88% {
background-color: rgb(66, 205, 122);
}
/* 最后一帧 */
100% {
transform: translate(900px) rotate(360deg);
background-color: rgb(176, 227, 33);
border-radius: 50%;
}
}
</style>其他属性
暂停 动作往往写在一个动作里面比如 :hover
javascript
<template>
<div class="outer">
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 100px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
background-color: aqua;
/* 应用动画到元素 动画名称 自定义*/
animation-name: haha;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
/* 其他属性 设置动画的方式*/
animation-timing-function: linear;
/* 动画播放的次数 2 表示两次 infinite表示无限循环*/
animation-iteration-count: infinite;
/* 动画的方向 默认值是normal reverse反转 alternate往复运动 alternate-reverse交替的反方向运动*/
animation-direction: alternate;
/* 动画以外的状态（不发生动画的时候在哪里） */
/* forwards最后一帧在哪里 backwards初始第一帧在哪里*/
/* animation-fill-mode: backwards; */
/* 动画的播放状态 */
/* paused暂停 默认是运动running*/
/* animation-play-state: paused; */
}
.outer:hover .inner{
/* 动画的播放状态 */
/* paused暂停 默认是运动running*/
animation-play-state: paused;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
/* 第一帧 */
form {
}
/* 最后一帧 */
to {
transform: translate(900px) rotate(360deg);
background-color: rgb(176, 227, 33);
border-radius: 50%;
}
}
</style>动画的复合属性
只设置一个时间表示duration,设置两个时间分别是：duration和delay,其他属性没有数量和顺序要求
备注：animation-play-state 一般单独使用。
javascript
<template>
<div class="outer">
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 100px;
border:1px solid black;
}
.inner{
width: 100px;
height: 100px;
background-color: aqua;
animation: haha 3s 0.5s linear 2 alternate-reverse forwards;
}
.outer:hover .inner{
/* 动画的播放状态 */
/* paused暂停 默认是运动running*/
animation-play-state: paused;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
/* 第一帧 */
form {
}
/* 最后一帧 */
to {
transform: translate(900px) rotate(360deg);
background-color: rgb(176, 227, 33);
border-radius: 50%;
}
}
</style>动画与过渡的区别
最主要的区别就是：
1.动画不需要任何的触发条件，而过渡必须得有触发条件
2.动画从开始到结束的整个过程当中，都可以通过关键帧，去进行精细的设置。
而过渡确不能，只关注始末，从开始到结束的变化过程中，是不可操作的。
图片动画
注意事项：
1.需要有一个像样的图
2.算好位置以及它走多少步数
javascript
<template>
<div class="outer">
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 180px;
/* 背景图片长度1600 高度180 有8个动画帧 */
background-image: url('../assets/images/bj.png');
margin: auto;
margin-top: 100px;
/* 需要背景图片以动画帧的效果播放 有8个动画帧这里设置为 steps(8) */
animation: haha 0.5s steps(8) infinite;
}
/* 定义一个动画（定义一组关键帧） 第一种方式*/
@keyframes haha{
/* 第一帧 */
form {
}
/* 最后一帧 */
to {
/* 最后一帧位置 */
background-position: -1600px 0px;
}
}
</style>多列布局 column
多列图片
作用：专门用于实现类似于报纸的布局
javascript
<template>
<div class="outer">
<h1>干苦力节流防抖</h1>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<img src="../assets/images/pak.png">
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
<p>新征程上,要一以贯之抓好党中央推动中部地区崛起一系列政策举措的贯彻落实,形成推动高质量发展的合力,把握机遇、真抓实干,在中国式现代化建设中奋力谱写中部地区崛起新篇章。</p>
</div>
</template>
<style scoped>
h1{
/* 指定是否跨列 */
column-span: all;
text-align: center;
font-size: 50px;
}
img{
width: 100%;
}
.outer{
width: 1000px;
margin: 0 auto;
/* 多列布局 自动分成多少列 */
/* 直接指定列数 */
/* column-count: 3; */
/* 指定每一列的宽度，会自动计算列数 */
/* column-width: 220px; */
/* 复合属性：能同时指定列宽和列数（不推荐使用） */
/* columns: 3 220px; */
columns: 4;
/* 调整列间距 */
column-gap: 20px;
/* 每一列边框的宽度 */
/* column-rule-width: 2px; */
/* 每一列边框的风格 */
/* column-rule-style: dashed; */
/* 每一列边框的颜色 */
/* column-rule-color: red; */
/* 边框相关的复合属性 */
column-rule: 2px dashed red;
}
</style>伸缩容器（弹性盒子） display:flex
伸缩项目：伸缩容器所有 子元素 自动成为了：伸缩项目。
javascript
<template>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 1000px;
height: 300px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
</style>主轴方向 flex-direction
javascript
<template>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 600px;
height: 600px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: column-reverse;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
</style>主轴换行方式 flex-wrap
javascript
<template>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 200px;
height: 300px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
/* 复合属性（了解就可以） */
/* flex-flow: row wrap; */
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
</style>主轴对齐方式 justify-content
javascript
<template>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</template>
<style scoped>
.outer{
width: 500px;
height: 300px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
/* 主轴的对齐方式 默认值主轴的起始位置 flex-start 主轴的结束位置 flex-end 居中 center*/
/* justify-content: center; */
/* 主轴的对齐方式 ,项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
/* justify-content: space-around; */
/* 主轴的对齐方式 ,项目均匀的分布在一行中，项目与项目之间的距离是相等的，是项目距边缘没有距离 */
justify-content: space-between;
/* 主轴的对齐方式 ,项目均匀的分布在一行中 */
/* justify-content: space-evenly; */
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
</style>侧轴对齐方式__一行 align-items
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner inner3">x</div>
</div>
</template>
<style scoped>
.outer{
width: 500px;
height: 300px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
/* 侧轴的对齐方式 侧轴的起始位置对齐flex-start 侧轴的结束位置对齐flex-end 侧轴的中间位置对齐center baseline基线对齐（文字）*/
/* stretch拉伸到整个父容器（前提：伸缩项目不能给高度），默认值 */
align-items: baseline;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 200px;
font-size: 80px;
}
.inner3{
height: 50px;
}
</style>侧轴对齐方式__多行 align-content
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner inner3">x</div>
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner inner3">x</div>
</div>
</template>
<style scoped>
.outer{
width: 400px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
/* 侧轴的对齐方式(多行) 侧轴的起始位置对齐flex-start 侧轴的结束位置对齐flex-end 中间对齐center*/
/* align-content: center; */
/* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的，且是边缘距离的二倍 */
/* align-content: space-around; */
/* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的，且是边缘没距离 */
/* align-content: space-between; */
/* 侧轴的对齐方式(多行) 伸缩项目之间的距离是相等的 */
/* align-content: space-evenly; */
/* 侧轴的对齐方式(多行) stretch（前提：伸缩项目不能给高度） 拉伸 默认值 */
align-content: flex-start;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 150px;
font-size: 80px;
}
.inner3{
height: 50px;
}
</style>项目在主轴的基准长度 flex-basis
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner">x</div>
</div>
</template>
<style scoped>
.outer{
width: 400px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
/* 设置伸缩项目在主轴上的基准长度 若主轴是横向的宽失效，若主轴是纵向的高失效 （了解即可）默认是auto*/
flex-basis: 300px;
}
</style>伸缩项目__伸 flex-grow
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner">x</div>
</div>
</template>
<style scoped>
.outer{
width: 600px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
flex-wrap: wrap;
}
.inner{
width: 100px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
/* 拉伸 默认0 若所有伸缩项目的值都为1，它们将等分剩余空间（如果有空间的话）*/
flex-grow: 1;
}
.inner2{
width: 200px;
}
</style>伸缩项目__缩 flex-shrink
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner">x</div>
</div>
</template>
<style scoped>
.outer{
width: 600px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
/* flex-wrap: wrap; */
}
.inner{
width: 300px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
/* 压缩 默认值就是1 可以不写*/
/* 如果空间不足，该项目将会缩小 */
flex-shrink: 1;
}
.inner2{
width: 200px;
}
</style>复合属性 flex
javascript
<template>
<div class="outer">
<div class="inner">x</div>
<div class="inner inner2">x</div>
<div class="inner">x</div>
</div>
</template>
<style scoped>
.outer{
width: 800px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
/* flex-wrap: wrap; */
}
.inner{
width: 200px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
/* 拉伸 默认0 若所有伸缩项目的值都为1，它们将等分剩余空间（如果有空间的话）*/
/* flex-grow: 1; */
/* 压缩 默认值就是1 可以不写*/
/* 如果空间不足，该项目将会缩小 */
/* flex-shrink: 1; */
/* 基准长度 */
/* flex-basis: 100px; */
/* 复合属性 上面三个可以写一起 */
/* 可以拉伸 可以压缩 不设置基准长度 可简写为：flex:auto */
/* flex: 1 1 auto; */
/* 可以拉伸 可以压缩 设置基准长度0 可简写为：flex:1*/
/* flex:1 1 0; */
/* 不可以拉伸 不可以压缩 不设置基准长度 可简写为：flex:none*/
/* flex: 0 0 auto; */
/* 不可以拉伸 可以压缩 不设置基准长度 默认值 可简写为：flex:0 auto*/
flex: 0 1 auto;
}
.inner2{
width: 150px;
}
</style>项目排序与单独对齐 order align-self
javascript
<template>
<div class="outer">
<div class="inner inner1">1x</div>
<div class="inner inner2">2x</div>
<div class="inner inner3">3x</div>
</div>
</template>
<style scoped>
.outer{
width: 800px;
height: 400px;
background-color: rgb(205, 212, 212);
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 伸缩盒模型相关属性 */
/* 调整主轴方向 默认是从左到右row 从右到左 row-reverse 从上到下column 从下到上column-reverse*/
flex-direction: row;
/* 主轴换行方式 默认不换行nowrap 换行wrap 反向换行wrap-reverse */
/* flex-wrap: wrap; */
}
.inner{
width: 200px;
height: 100px;
background-color: rgb(124, 204, 229);
border: 1px solid black;
box-sizing: border-box;
}
.inner1{
/* 默认值是0 值越小排前面*/
order: 3;
}
.inner2{
order: 5;
/* 单独对齐 */
align-self: center;
}
.inner3{
order: -4;
}
</style>响应式布局
媒体查询__媒体特性 @media
javascript
<template>
<div>
<h1>你好</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
text-align: center;
height: 400px;
width: 600px;
background-color: aqua;
}
/* 只有在打印机或打印预览才应用的样式 */
@media print {
h1{
background: yellow;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen {
h1{
font-family: '隶书';
}
}
/* 一直都应用的样式 */
@media all {
h1{
color: red;
}
}
</style>媒体查询__媒体类型
javascript
<template>
<div>
<h1>你好</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
text-align: center;
height: 200px;
background-color: aqua;
}
/* 检测到视口的宽度为800px时，应用如下样式 */
@media (width:800px) {
h1{
background: yellow;
}
}
/* 检测到视口的宽度小于等于700px时，应用如下样式 */
@media (max-width:700px) {
h1{
background: rgb(32, 109, 225);
}
}
/* 检测到视口的宽度大于等于900px时，应用如下样式 */
@media (min-width:900px) {
h1{
background: rgb(237, 152, 164);
}
}
/* 检测到视口的高度为800px时，应用如下样式 */
@media (height:800px) {
h1{
background: rgb(47, 14, 213);
}
}
/* 检测到设备屏幕宽度为1920px，应用如下样式 会覆盖上面的*/
@media (device-width:1920px) {
h1{
background-image: linear-gradient(red,green)
}
}
/* 检测视口的旋转方向（是否横屏），应用如下样式 会覆盖上面的*/
/* landscape:视口处于横向，即宽度大于高度 */
@media screen and (orientation: landscape) {
/* 当设备处于横屏模式时应用的样式 */
h1 {
background: lightgreen;
}
}
/* portrait:视口处于纵向，即高度大于等于宽度 */
@media screen and (orientation: portrait) {
/* 当设备处于竖屏模式时应用的样式 */
h1 {
background: rgb(54, 126, 6);
}
}
</style>媒体查询__运算符
javascript
<template>
<div>
<h1>你好</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
text-align: center;
height: 200px;
background-color: aqua;
}
/*且运算符 检测到视口的宽度为大于等于700 且 小于等于800px时，应用如下样式 */
/*且运算符 (min-width:700px) and (max-width:800px) */
@media screen and (min-width:700px) and (max-width:800px) {
h1{
background: yellow;
}
}
/*或运算符 (max-width:700px),(min-width:800px) */
/* (max-width:700px) or (min-width:800px) */
/* 小于等于700 或大于等于800 */
@media screen and (max-width:700px) or (min-width:800px) {
h1{
background: rgb(148, 119, 205);
}
}
/* 否定运算符 不是屏幕*/
@media not screen {
h1{
background: rgb(119, 118, 119);
}
}
/* 肯定运算符 是屏幕*/
@media only screen {
h1{
background: rgb(87, 40, 87);
}
}
</style>媒体查询__常用阈值
javascript
<template>
<div>
<h1>你好</h1>
</div>
</template>
<style scoped>
h1{
font-size: 80px;
text-align: center;
height: 200px;
background-color: aqua;
}
/* 超小屏幕 */
@media screen and (max-width:768px) {
h1{
background: yellow;
}
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px) {
h1{
background: rgb(50, 184, 186);
}
}
/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px) {
h1{
background: rgb(85, 87, 87);
}
}
/* 超大屏幕 */
@media screen and (min-width:1200px) {
h1{
background: rgb(113, 12, 34);
}
}
</style>