慕课 前端工程师笔记 css部分
`####选择器
子选择器 div > p 选中div的子标签p
相邻兄弟选择器 img+p 图片后面紧跟的p
序号选择器
:first-child 首个元素
:last-child 末尾元素
:nth-of-type 第三个某类型元素
:nth-child(3) 第三个元素
:nth-child(3n+2) 从第2个开始 每三个选中一个
:nth-child(odd) 偶数
:nth-child(even) 奇数
:nth-last-child(3)倒数第三个元素
属性选择器
img[alt] 选择有alt属性的img标签
img[alt=”故宫”] 选择alt属性是故宫的img标签 img[alt^=”北京”] 选择alt属性以北京开头的img标签 img[alt$=”夜景”] 选择alt属性以夜景结尾的img标签 img[alt*=”美”] 选择有alt属性中含有美字的img标签 img[alt~=”手机拍摄”] 选择有alt属性中有空格隔开的手机 拍摄字样的img标签
CSS3新增伪类
:empty 选择空标签
:focus 选择当前获得焦点的表单元素
:enabled 选择当前有效的表单元素
:disabled 选择当前无效的表单元素
:checked 选择当前已经勾选的单选按钮或者复选框
:root 选择根元素，即<html>标签
伪元素
::before和::after
在元素的前面和和面加入content
::selection
CSS伪元素应用于文档中被用户选中的部分（
使用鼠标圈选的部分）
::first-letter和::first-line
::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
浮动
1.子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素
BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
如何创建BFC
方法①：float的值不是none
方法②：position的值不是static或者relative
方法③：display的值是inline-block、flex或者inline-flex
绝对定位
绝对定位的盒子垂直居中是一个非常实用的技术
position: absolute;
top: 50%;
固定定位
固定定位只能以页面为参考点，没有子固父相这个性质
阴影
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4),10px 20px 30px 40px rgba(0,0,0,.4)
背景图片
contain和cover
contain和cover是两个特殊的background-size的值
contain表示将背景图片智能改变尺寸以容纳到盒子里
background-clip属性
border-box 背景延伸至边框（默认值） （边框也有背景图片）
padding-box 背景延伸至内边（padding），不会绘制到边框 处（仅在dotted、dashed边框可察觉） （内边距部分有背景图片）
background-attachment属性
fixed 自己滚动条不动，外部滚动条不动
local 自己滚动条动，外部滚动条动
background综合属性
线性渐变
盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right, blue, red); 左到右渐变
background-image: linear-gradient(45deg, blue, red); 斜着渐变
浏览器私有前缀
Chrome -webkit-
Firefox -moz-
IE、Edge -ms-
旋转
旋转变形
将transform属性的值设置为rotate()，即可实现旋转变形
transform: rotate(45deg);
可以使用transform-origin属性设置自己的自定义变换原点
缩放变形
将transform属性的值设置为scale()，即可实现缩放变形
transform: scale(3);
斜切变形
将transform属性的值设置为skew()，即可实现斜切变形
位移变形
将transform属性的值设置为translate()，即可实现位移变形
transform: translate(100px, 200px);向右移动 向下移动
3D旋转
将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转
perspective属性
空间移动
当元素进行3D旋转后，即可继续添加translateX()、 translateY()、translateZ()属性让元素在空间进行移动
一定记住，空间移动要添加在3D旋转之后
transition
transition：width 1s linear 0s; 什么属性需要过渡 动画时长 变化速度曲线 延迟时间
动画
动画定义
@keyframes r { from {
transform: rotate(0); }to {
动画的调用
animation: r 1s linear 0s 3;哪个动画 耗时时间 动画曲线 延时 播放次数 永远写 infinte
alternate和forwards
如果想让动画的第2、4、6……（偶数次）自动逆向执行，那 么要加上alternate参数即可
如果想让动画停止在最后结束状态，那么要加上forwards
animation: movelr 2s linear 0s infinite alternate;
多关键帧动画
#
@keyframes changeColor { 0% {
background-color: red ; }20% {
background-color: yellow ; }40% {
background-color: blue ; }60% {
background-color: green; }80% {
background-color: purple ; }100% {
`
共有 0 条评论