CSS3的新特性

已于 2024-03-23 08:29:08 修改
阅读量1.1k 收藏 10
点赞数 25
文章标签： css3 前端 css
于 2024-03-23 08:26:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45086164/article/details/136957847
版权

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-

<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是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

<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

设置背景图的原点

<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 对背景图进行修剪

<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 背景大小

<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复合属性

<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

<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

<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

<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

<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

<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

<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

<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

<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
文字渐变

<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

<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

在没有发生渐变的区域，重新开始渐变，就是重复渐变

<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文件文档 按步骤操作就可以

<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.位移配合定位，可实现元素水平垂直居中

<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

<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

<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

<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>

多重变换
注意:多重变换时，建议最后旋转

<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%

<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

所谓透视点位置，就是观察者位置，默认的透视点在元素的中心，
注意：通常情况下，我们不需要跳转透视点位置

<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

<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

<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

<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>

多重变换
注意点：多重变换时，建议最后旋转

<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

<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 身上 过渡需要触发条件

<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>

高级使用—— 贝塞尔曲线

过渡 https://cubic-bezier.com/

<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>

复合属性

<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:设置动画延迟

<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

<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 一般单独使用。

<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.算好位置以及它走多少步数

<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

多列图片
作用：专门用于实现类似于报纸的布局

<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

伸缩项目：伸缩容器所有 子元素 自动成为了：伸缩项目。

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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>

媒体查询__媒体类型

<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>

媒体查询__运算符

<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>

媒体查询__常用阈值

<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>
时光浅止
关注
  • 25
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS3 calc()会计算属性详解
01-21
前言 正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法； calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。 标准的写法： .class{ /* area: expression; */
CSS：CSS3新增属性
01-08
CSS3新增属性 1、border-radius：圆角边框 border-radius:10px 20px 30px 40px; /*圆：值为半径*/ border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/ 2、box-sizing：改变盒模型的模式 box-sizing:content-box/border-box 3、font-face：设置服务器端字体 @font-face{ font-family:webfont; src:url('Sansation_Light.ttf'); } div
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
详解CSS中position属性介绍(新增sticky)
09-22
主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性，感兴趣的小伙伴们可以参考一下
详解CSS3新增的背景属性
11-21
先前，再css里面我们知道background的几个属性color，image，repeat，attachment，position，这些都是我们再css里面常用的，那么css3新增的属性有哪些呢？往下看： ** CSS3新增属性：background-clip ，background-origin ， background-size 1.background-clip 背景的剪裁属性，是从指定位置开始绘制。 ** ** 2.background-origin background-Origin属性指定了背景图像的位置区域。 ** 上面两个的属性值都是border-box， padding-b
css3新特性
weixin_44992737的博客
06-19 4357
css3新特性详解
CSS3新特性
王工头的博客
01-24 8042
CSS3新特性 欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~ 声明：本文参考 W3C CSS3 教程、菜鸟教程等，详细移步 W3C 或菜鸟教程 用 CSS3 做过一些小动画，很好用，特别是里面一些新特性，都是 CSS2 不可比拟的，这里整理一些出来，当做笔记，也当做教程，共勉！ CSS3 相比 CSS 2 对边框、背景、渐变、...
h5和css3新特性
msn131420的博客
02-25 2214
一、HTML5 的新特性 1.新增语义化标签 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 注意：只需要关注开发常用的新特性即可。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”&.
HTML5&CSS3新特性
weixin_52972575的博客
05-05 7990
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
HTML5和CSS3新特性
这个世界上有各种各样的人.
05-12 1757
<header>：描述了⽂档的头部区域，于定义内容的介绍展⽰区域。 <nav>：定义导航链接的部分。 <section>：定义⽂档中的节（section、区段）。比如章节、页眉、页脚或⽂档中的其他部分，section通常 包含了⼀组内容及其标题。 <article>：定义独⽴的内容。 <aside>：定义页⾯主区域内容之外的内容（⽐如侧边栏）。 <figure>：标签规定独⽴的流内容（图像、图表、照⽚、代码等等）。 <figcaption>：定义 <figure>元素的标题。 <main>:main元素
1.07 css3新特性
10-07
1.07 css3新特性
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
h5新标签和css3新特性
nunumaymax的博客
03-05 2236
h5新标签和css3新特性一、h5布局元素二、css3新增样式1.边框圆角2.阴影3.形变：旋转、缩放、位移 一、h5布局元素 布局元素相当于有语义的div，可以让人快速的了解整个静态页面的大致结构。 header：网页头部 nav：导航栏 aside：侧边栏 article：显示文章 section：布局的一部分 footer：网页页脚 二、css3新增样式 1.边框圆角 border-radius: 左上 右上 右下 左下； 如果设置一个值，则这个值代表全部方向； border-radius:3
CSS3有哪些新特性
qq_51066068的博客
07-16 1385
1.CSS3的选择器 2. @Font-face 特性 3. 圆角 4. 多列布局 （multi-column layout） 5.阴影（Shadow） 6.CSS3 的渐变效果 7.css弹性盒子模型 8. CSS3制作特效 9.Transforms 2D转换效果 10. Animation动画特效
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
【Web前端】CSS3新特性
亮点菌
09-21 3875
CSS3 的现状 新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性
CSS3新特性-多栏布局
wendZzoo的博客
11-13 1587
为了实现类似报纸，杂志的多列排版的布局，CSS3新增了一个多列布局模块（css multi column layout module）。主要应用在文本的多列布局方面。 语法： colums:<column-width> || <column-count> 譬如三栏布局，每栏内容宽度为150px columns: 150px 3; column-width属性 ...
深入探索CSS3 appearance 属性：解锁原生控件的定制秘密
艾恩小灰灰的博客
05-05 420
CSS3 的appearance属性是网页设计中一个不可忽视的宝藏，它不仅让我们有能力去除那些不甚如意的默认样式，更赋予了我们无限的创意空间，去打造既美观又实用的用户界面。通过上述详尽的解析与实例，希望能帮助你更好地掌握这一属性，让你的网页设计之旅更加丰富多彩。
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 508
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
css3新特性开发网页样式
03-28
CSS3是在CSS2.1基础上发展而来的，它引入了许多新特性，可以让开发者更加灵活地控制网页样式，以下是一些常用的CSS3新特性： 1. 边框圆角（border-radius）：可以将盒子的四个角变成圆角。 2. 盒子阴影（box-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光浅止

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值