<style>
/* 样式 /
/ *去除外边距，内边距，ul/il的点，去除下划线 */
通配符 清除浏览器默认样式 * {
margin: 0;
padding: 0;
/ 浏览器的内边距外边距为0 */
}
body
html {
width: 100%;
height: 100%;
/* 设置到最大 */
}
P {
color: blueviolet;
font-size: 50px;
font-family: "楷体";
/* font 字体 size 尺寸 family 填写字体 align 排列 center中心*/
text-align: center;
/* 字体居中 */
text-align: right;
/* 字体靠右 */
text-align: left;
/* 字体靠左 */
background-color: rgb(255, 0, 0);
/* 字体背景 */
height: 100px;
/* 与行宽保持一样才能使文字在背景中心 */
line-height: 100px;
/* 与宽保持一样才能使文字在背景中心 */
width: 100%;
/* 背景颜色左右长短 */
font-weight: bold;
/* 字体加粗 */
font-weight: lighter;
/* 字体变细 */
border: 4px solid red;
/* 4px设置边框的宽度 solid设置边框为实线；dashed虚线；dotted点状线；groove双线 设置颜色 */
border-radius: 50px;
/* 设置边框角变圆 */
background-image: url(加图片名称);
/* 给复选框增加背景图片 */
background-repeat: no-repeat;
/* 如果图片太小不会重复增加直至框中占满 */
background-size: contain;
/* contain 将背景图片等比例缩放背景图片始终包含在容器内（自己设置的小框框） */
background-size: cover;
/* 将照片设置到完全覆盖容器 */
background-position: center;
/* 照片居中 */
position: relative;
/* 相对定位 在设置之后再去进行设置上下左右就会以原来得位置为定点进行移动 */
position: absolute;
/* cbsolute 绝对定位 父元素 应设置为position: relative;（绝对定位）这样子元素才不会跑到父元素以外 */
position: fixed;
/* fixed固定 */
margin: 10px auto;
/* margin边缘：意距离原来的位置像那个方位移动 设置框架的位置 给字体增加宽高也可以居中 盒子居中 */
cursor: pointer;
/* 使鼠标指向时变换指针 */
transform: rotate(45deg);
/* transform：改变 转变 rotate 旋转 deg 度 */
transform: scale(10deg);
/* scale: 缩放 */
transform: translate(50px, 100px);
/* 旋转 */
background-image: linear-gradient(to right, red, yellow);
/* to riget 渐变从左到右 to bottom渐变从上到下 to bottom right渐变从左上角到右下角*/
background-image: radial-gradient(red, yellow, blue);
/* 由内而外的放射性的渐变 */
text-shadow: 5px 5px 5px rebeccapurple;
/* 给文本增加背景填充 前两个5px背景位置 后一个5px背景模糊度 背景颜色 字体阴影*/
box-shadow: 5px 5px 5px yellow;
/* 给背景盒子增加背景填充 前两个5px背景位置 后一个5px背景模糊度 背景颜色 盒子阴影*/
/*盒模型的组成部分 内容content 内边距padding 边框border 外边距marign */
padding: 100px;
/* 在制作盒模型中一个值代表上下左右 */
overflow: hidden;
/* hidden作用内容会删减，并且其余内容不可见 */
overflow: scroll;
/* sceoll：卷轴 内容会被修剪，浏览器会以滚动条形式展现给我们浏览 */
overflow: auto;
/* 浏览器会以滚动条形式展现给我们浏览 注：只显示右边的滚条下边的删除 */
float: right;
/* 设置浮动 */
clear: both;
/* 清除浮动 */
transition: width 2s;
/* width 规定过度css属性的名称 2s规定过度所花费的时间 只向一个方向延伸 */
transition: width 2s, height 2s, transfrom 2s;
/* 旋转变化 后面的数值s为旋转速度*/
transition: all 3s linear 2s;
/* 更简便的进行旋转变化 */
transition: ease-in-out 2s;
/* ease-in-out 停顿多少秒才会开始变化 */
/* ease慢速开始，然后变快然后慢速结束 ease-in慢速开始变化 ease-out规定以慢速结束的过渡效果 ease-in-out规定以慢速开始和结束 */
animation: donghua 1s linear 2s infinite;
/* 动画设置 轮回几秒 线型 无限循环 */
@keyframes donghua;
/*keyframes 创建动画，将一套 CSS 样式逐渐变化为另一套样式 */
opacity: 0.7;
/* 0-1 opacity=调节透明度 */
}
</style>