C3简介
css2的升级版，修复不足并新增许多特性
浏览器对css3支持性较好，但由于移动端不存在低版本浏览器情况，所以移动端支持性要优于PC端
伪类选择器
- child 系列
:first-child:last-child:nth-child(n):nth-last-child(n)
都是针对父元素下的直接子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*前三个*/ li:nth-child(-n + 3) { color: hotpink; } /*后三个*/ li:nth-last-child(-n + 3) { color: skyblue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
- empty
:empty
- 选择为空的元素
- 必须是空的，不能有任何子元素，空格也不行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid greenyellow; } div:empty { background-color: #f99; } </style> </head> <body> <div> </div><!--无法被选中--> <div></div><!--将被选中--> </body> </html>
- not
指排除掉指定的选中的元素
div:not(#id_001)：选中除了id为id_001的div元素
div:not(:nth-child(1))：选中除了作为第一个div直接子元素的div元素
- target
:target搭配 a 标签的锚点功能，选中被点击的锚点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1:target { color: red; } </style> </head> <body> <nav> <a href="#1">模块1</a> <a href="#2">模块2</a> </nav> <div> <h1 id="1">对应的a标签锚点被选中后，此处文字将变红</h1> <h2 id="2">省略...</h2> </div> </body> </html>
- focus、checked、disabled、enabled
:focus：可以找到获取到焦点的input元素
:checked：可以找到被选中的input[checkbox]元素
:disabled：可以找到disabled属性的元素
:enabled: 可以找到enabled属性的元素
伪元素选择器
- 简介
使用css模拟出html标签的效果，默认是行内元素，属于原元素的子元素，有个要求是必须有content属性，即使为空也要手动表示
content: "";
- 常用伪元素选择器
::before::after::first-letter::first-line::selection：不能改变文字大小、字体等影响布局的属性
C3新增的颜色模式
- rgba模式
- hsla模式
- h
色调，0-360，决定颜色
- s
饱和度，0-100%，越大其色彩越鲜艳
- l
亮度，0-100%，亮度为0表示黑色
- a
alpha透明度，0-1
浏览器私有前缀
不同浏览器有自己的私有前缀，用于解决兼容性问题
- 谷歌：
-webkit-- 苹果：
-webkit-- 火狐：
-moz-- 欧朋：
-o-- IE：
-ms-
如渐变色：
linear-gradient，直接这么写，存在css3兼容性问题，对谷歌和IE浏览器都是没有效果的，需要加上私有前缀<style> div { background: -webkit-linear-gradient(right, red, yellow); /*兼容谷歌和苹果浏览器*/ background: -ms-linear-gradient(right, red, yellow); /*兼容IE浏览器*/ } </style>
阴影效果
- 文字阴影效果：
text-shadow
- 设置一个阴影效果
text-shadow: 5px 5px 5px red;
第一个取值：阴影的水平方向位移
第二个取值：阴影的垂直方向位移
第三个取值：阴影的模糊程度
第四个取值：阴影的颜色
- 设置多个阴影效果
text-shadow: 5px 5px 5px red, -5px -5px 10px red;
- 凹凸文字效果
实现方式是将文字的颜色调成和背景色一样，文字外形通过阴影展现出来，最终效果就是凹凸文字效果了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { width: 100px; height: 100px; background: #ccc; } div > div { width: 50px; height: 50px; color: #ccc; } .inner1 { text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } .inner2 { text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } </style> </head> <body> <div class="outer"> <div class="inner1">凹文字效果</div> <div class="inner2">凸文字效果</div> </div> </body> </html>
- 盒子阴影效果：
box-shadow
box-shadow: 1px 1px 1px 0px #f00 inset;第一个参数：水平位移，必填
第二个参数：垂直位移，必填
第三个参数：模糊程度，必填
第四个参数：阴影大小，必填
第五个参数：阴影颜色，必填
第六个参数：非必填，inset表示内阴影，outset表示外阴影（默认）
- 遮罩效果
将外阴影设置为无限大，并带有透明效果
C3中的盒子模型
- 盒子被分成了三部分
- content box
- padding box
- border box
- box-sizing属性
content-box：默认，表示设置的宽高将应用至contentborder-box：表示设置的宽高将应用至border box
C3中的百分比
在此之前百分比的效果都是相对于父元素，而C3中则都是相对于自身
C3的背景
- 背景尺寸
background-size: 取值;
- 取值一：宽px 高px
- 取值二：宽百分比 高百分比
相对的是所属盒子的宽高，且如果只设置一个值时，表示高度自适应
- 取值三：cover
图片将会不变形地等比例最大化地铺在盒子中，如果有超出，超出部分将被剪裁
- 取值四：contains
图片会等比例地、不变形地、在保证整个图片都显示的情况下最大化地显示在盒子中，最终就是可能无法完全铺满整个盒子
- 背景原点
background-origin: 取值;默认情况下，背景的摆放是从padding box的左上角开始的，背景原点就是可以设置背景的摆放进行自主选择
content-box：将从content-box的左上角开始摆放padding-box：默认，从padding-box的左上角开始摆放border-box：从border-box的左上角开始摆放
- 背景剪裁
background-clip: 取值;指的是背景图片将从哪个盒子开始做剪裁
content-box表示content-box以外的padding-box和border-box部分将不会显示，被剪裁
padding-box表示padding-box以外的border-box部分将不会显示，被剪裁
border-box默认
- text
常用于显示的文字以一张图片作为文字背景的场景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background: url("./static/img/test.png"); <!--对盒子设置一个背景图片--> -webkit-background-clip: text; <!--存在兼容性问题--> color: transparent; <!--将文字颜色设置为透明--> } </style> </head> <body> <div>龙</div> </body> </html>
- 多背景
background: url('1.jpg') no-repeat, url('2.jpg') no-repeat right top, url('3.jpg') no-repeat center center;指的是一个盒子可以设置多个背景，以逗号相隔，默认是写在前面的层级更高，要注意的是背景颜色只能放到最后一个背景中去
C3的颜色渐变效果
- 线性渐变
background-image: -webkit-lindar-gradient(取值);
- 取值一：使用方向
background-image: -webkit-lindar-gradient(方位属性, 起始颜色, 终止颜色); <!--top：从上到下，即起始颜色为上，终止颜色为下--> <!--bottom：从下到上，即起始颜色为下，终止颜色为上--> <!--left：从左到右，即起始颜色为左，终止颜色为右--> <!--right：从右到左，即起始颜色为右，终止颜色为左-->
- 取值二：使用角度
background-image: -webkit-lindar-gradient(45deg(45度), 起始颜色, 终止颜色);
- 取值三：使用多种颜色
background-image: -webkit-lindar-gradient(角度/方位, 起始颜色, 中间颜色1, 中间颜色2, ..., 终止颜色);
- 取值四：使用多种颜色并设置颜色作用范围
background-image: -webkit-lindar-gradient(角度/方位, 起始颜色 0%, 中间颜色1 20 %, 中间颜色2 50 %, ..., 终止颜色 100%);
- 径向渐变
background-image: -webkit-radial-gradient(取值);指从一个中心点沿径向向外产生的颜色渐变效果
- 渐变半径
background-image: -webkit-radial-gradient(水平方向渐变半径(如20px), 水平垂直渐变半径(如30px), 起始颜色, 终止颜色); <!--如果不设置半径，默认整个径向距离都进行渐变--> <!--如果只设置一个半径，表示水平方向和垂直方向的渐变距离共用此值-->
- 渐变原点
background-image: -webkit-radial-gradient(20px at left top, 起始颜色, 终止颜色);
- 多种颜色 & 控制渐变范围
background-image: -webkit-radial-gradient(20px at left top, 起始颜色 0%, 中间颜色1 10 %, 中间颜色2 60 %, ..., 终止颜色 100%);
C3的过渡
过渡属性时CSS3中具有颠覆性的特征之一，通过它可以实现元素不同状态间的平滑过渡，即补间动画，所以常用于制作动画效果
transition: 过度属性, 过渡时间<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: skyblue; transition: width 1s, height 1s, border-radius 2s, background-color 1s; /*当所有过度属性的过度时间一致时，可以使用all，不过耗性能、不推荐*/ /*transition: all 1s; */ } div:hover { width: 200px; height: 200px; background-color: deepskyblue; border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
- 补间动画和帧动画
- 帧动画
指通过将一帧一帧的画面按照固定顺序和速度进行播放，类似电影胶片
- 补间动画
指只设置起始状态和终止状态，由浏览器来自动完成中间的过度
- 单属性解释
transition-property：过度属性transition-duration：过度时长transition-timing-function：过度函数（运动方式）
linear：匀速（默认）ease-in：加速ease-out：减速ease-in-out：先加速后减速ease-out-in：先减速后加速
transition-delay：过度延迟
- 和写示例
transition: property duration delay timing-function;transition: width 1s 2s ease-in-out;
- 一个常见的需求
要求当鼠标放入时有动画，移出时没有动画（上面例子就是一个），此时需要将过渡属性添加到盒子里而非盒子的
hover中
如果将transition放在hover上，鼠标移出时将没有动画效果，这是因为，当鼠标移出时，transition属性浏览器感知不到，相当于浏览器不知道这个属性，所以没有动画效果，而如果是直接放在元素上，浏览器可以一直感知到transition属性。
C3的变换
需要注意的是，对于C3的变换效果，它不会影响盒子的布局，无论该盒子是否脱标，因为它单独设置了一层专门用于效果展示的特殊层，而在效果结束时则又会自动销毁掉该层。
- 2D变换
- 缩放效果
transform: scale(水平缩放比例, 垂直缩放比例)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { float: left; width: 200px; height: 200px; background-color: limegreen; margin: 20px 10px; } div:nth-child(2) { background-color: pink; /*对于动画效果的实现，尽可能使用变换属性transform，而非直接使用transition*/ transition: transform 1s; } div:nth-child(2):hover { transform: scale(1.5, 0.5); } </style> </head> <body> <div>1：2变化了，但是并不影响布局</div> <div>2：1，3始终还是原样</div> <div>3：2变化了，但是并不影响布局</div> </body> </html>
- 平移效果
transform: translate(水平平移距离, 垂直平移距离)
- 数值表示
transform: translate(100px, 100px)
- 百分比表示（相对自身）
transform: translate(10%, 200%)
- 只有一个值则表示水平方向效果
- 旋转效果
transform: rotate(deg)：正角顺时针，负角逆时针
- 斜切效果
transform: skewX(deg)：水平方向（和 -y 轴夹角）
transform: skewY(deg)：垂直方向（和 +x 轴夹角）
- 变换中心点
transform-origin: 取值
- 取值一：方位属性
top、right、bottom、left、center
- 取值二：位置坐标值
- 关于变换顺序
后面的变换是在前面的变换基础上的，另外旋转会改变坐标系的方向，所以一般放在最后
- 3D变换
- 旋转效果
transform: rotateX(deg)；：X轴
transform: rotateY(deg)；：Y轴
transform: rotateZ(deg)；：Z轴
- 移动效果
transform: translateX(deg)；：X轴
transform: translateY(deg)；：Y轴
transform: translateZ(deg)；：Z轴
- 透视效果
指呈现立体效果，一种靠得越近，看着越大的效果，需要在变换元素的父元素中设置perspective属性，值是个数字，越小，效果将越明显，该距离实质设置的是用户眼睛和屏幕的距离，故眼睛距离屏幕越近效果越明显，而对于Z轴的旋转效果、以及X轴和Y轴的平移效果，透视效果是不起作用的，总之这依旧是个平面效果，不是真正的3D效果
perspective: 数值px;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { /*这里设置眼睛距屏幕的距离刚好是比旋转半径少出10px，体验打脸的感觉*/ perspective: 190px; } .inner { width: 200px; height: 200px; background-color: pink; transition: transform 5s; } .inner:hover { transform-origin: top; transform: rotateY(360deg); } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
- 3D效果
真正的3D效果，即子盒子和父盒子不再是同一个平面，需要给父元素添加
transform-style属性
transform-style: preserve-3d;
- 关于立方体
将6个div放一起，通过分别进行不同方向的平移旋转实现，要注意的是对于Z周不能使用%百分比，因为它没有厚度
- 盒子背面可见性
backface-visibility: none; //表示不可见
C3的动画
- 动画和过渡的区别
二者效果差不多，只是过渡需要触发，且限定于两个状态的改变，而动画无需触发，并可以一直执行下去
- 动画的定义
/*方式一：使用 from 和 to 表示动画起止*/ @keyframes 动画名称 ( from{} to{} ) /*方式二：使用百分比表示动画各阶段*/ /*其中百分比和该阶段的动画时长等比例*/ @keyframes 动画名称 ( 0%{} 50%{} 100%{} )@keyframes experience { from{ transform: translate(0, 0) rotate(0deg); } to { transform: translate(500px, 0) rotate(720deg); } }
- 动画的调用
- 复合写法
animation: 动画名称 执行时长 其他参数(顺序随意且非必填)
- 单个参数
animation-name：动画名称animation-druation：动画时长animation-iteration-count: infinite默认是动画结束后闪现到开始位置，即只执行一次，
infinite表示无限次执行
animation-direction: alternate
alternate表示一次执行结束时不闪现到开始位置，而是反向执行动画
animation-delay设置打开页面后的动画延迟执行时间
animation-fill-mode：动画结束时的处理方式
backwards是默认取值，表示闪现回开始位置
forwards表示结束后保持当前状态，即保持不动
animation-timing-function：动画运动方式
linear：匀速ease-in：加速ease-out：减速ease-in-out：先加速后减速ease-out-in：先减速后加速steps(5)：让动画分五步完成实现了帧动画的效果，步数越多表示帧值越大
- 动画完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; animation: test 5s infinite alternate 2s linear; background-color: greenyellow; } @keyframes test { 0% { transform: translateX(0) rotateX(0deg); background-color: #ff9999; } 100% { transform: translateX(100px) rotateX(360deg); background-color: skyblue; border-radius: 50%; } } </style> </head> <body> <div></div> </body> </html>
- 动画的状态
animation-play-state
running：在运行paused：已暂停
伸缩布局
- 几种状态的元素的布局特点
- 标准流
布局涉及行内、行内块、块级等元素类型，总是从上到下、从左往右进行的
- 浮动
布局涉及左浮动和右浮动
- 定位
布局涉及优先级、各种定位对应的基准点，以及边偏移等
- 伸缩
布局涉及主轴和侧轴
display: flex;
- 作用
定义了该属性之后就会生成主轴和侧轴，二者始终为垂直关系，其中主轴方向决定了其内部的子元素的排列方向
- 主轴方向
flex-direction: row：默认，即水平向右
flex-direction: row-reverse：水平向左
flex-direction: column：垂直向下
flex-direction: column-reverse：垂直向上
- 对齐方式
- 主轴对齐方向：
justify-content
flex-start：默认，起点对齐flex-end：终点对齐center：居中space-around：平分先将空间平分，然后每个盒子在等分空间里居中
space-between：两端对齐两端先各放一个盒子，其他子盒子再在中间部分进行平分
- 侧轴对齐方向：
align-items
flex-startflex-end：终点对齐center：居中stretch：默认，拉伸
- 换行
flex-wrap: nowrap;默认效果，不换行
flex-wrap: wrap;换行，当子盒子总宽度超出父盒子时，不再进行默认的等比例缩小，而是自动进行换行
- 伸缩比例
- 示例一
ul > li:nth-child(1) { flex: 1; /*该li占1/6*/ } ul > li:nth-child(2) { flex: 3; /*该li占1/2*/ } ul > li:nth-child(3) { flex: 2; /*该li占1/3*/ }
- 示例二
ul > li:nth-child(1) { flex: 1; /*该li占扣除第二个li之后的空间的1/3*/ } ul > li:nth-child(2) { width: 50px; /*该li设置了固定的宽高*/ height: 50px; } ul > li:nth-child(3) { flex: 2; /*该li占扣除第二个li之后的空间的2/3*/ }
- 注意事项
- 当父盒子宽度为0，子盒子宽度也将为0
- 当父盒子高度为0，高度可以被子盒子高度撑开
- 当子盒子没有宽度，即宽度为0时，不会被拉伸
- 所所有子盒子的总宽度超出了父盒子宽度，会将各子盒子等比例缩小
- 当子盒子没有高度时，高度默认会被拉伸至和父盒子一样高
- 当子盒子和父盒子都有高度时，二者互不干扰
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
