持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情。

样式重置

CSS reset 和 CSS Normalize.css 二者都是用来统一浏览器的默认样式

reset 重置，相对暴力，影响范围大，讲求跨浏览器的一致性 Normalize.CSS 标准化，相对平和，保留有用的样式

font 属性连写至少要有字号和字体。 font-weight 字体加粗属性 normal、bold

background-repeat 设置背景图片是否重复，以及重复样式 no-repeat：不重复 repeat-x：横向平铺 repeat-y：纵向平铺 background-attachment 设置背景图片是否固定，属性值：fixed 固定不会被滚动条滚走，scroll：与fixed相反 background-size 设置背景图的尺寸 background-origin 控制背景图从什么地方开始，默认：background-origin：padding-box; //从内边距开始显示

scroll 内容被剪辑，浏览器会显示滚动条以便查看其余内容 inherit：从父元素继承 overflow 属性 auto 如果内容被剪，浏览器显示滚动条以便查看其余内容

overflow-warp 文字换行 设置或检索当前内容超过指定容器边界时是否换行属性值：normal 允许内容顶开或溢出指定容器的边界； break-word：内容将在边界内换行，如果需要单词内部允许断开

Border边框：
   - dotted        点状边框        - dashed        虚线边框
   - solid         实线边框        - double        双线边框
   - none          无边框          -hidden         隐藏边框
圆角：
border-redius：9px；        (圆角)
border-radius    的值如果为百分比，则为盒子的宽度与高度的比值。所以当值为50%的时候，正好是直径为盒子长度的圆。

center作为标签时是：内容居中标签

动画

过渡动画：transition
变换动画：transform
关键帧动画：keyframes animation动画

什么是CSS动画：使用CSS3控制页面元素CSS属性变化优势：简单：不需要使用JavaScript 流畅：由浏览器执行动画减少代码量

transition 过渡

2D转换 缩放 scale transform: scale(x, y); 取值大于1 放大，小于1 缩小，不能为百分比。
位移 translate transform:translate(水平位移，垂直位移) 参数为百分比，相对于自身移动，正值向右和向下，负值向左和向上；只写一个值表示水平移动。 旋转 rotate transform: rotate(角度); 参数正值顺时针(45deg); 负值逆时针 transform-origin 改变旋转的坐标原点 transform-origin: 水平坐标垂直坐标； rotate 旋转默认以盒子正中心为坐标原点的。 transform-origin: center bottom;(旋转时，以盒子底部的中心为原点坐标)
透视 perspective perspective:110px; 加给变换的父盒子
rotateX rotateY rotateZ 绕x、y、z轴旋转
backface-visibility 隐藏旋转div的背面值：visible 背面可见； hidden 背面不可见

CSS学习笔记

样式重置

动画

transition 过渡