选择器：.box：类名选择器， #box：ID选择器 ，div p：后代选择器， div.box：交集选择器 ； div,p,span：并集选择器 ，
div>p ：子代选择器； *:通配符，div+p：选中div后面的第一个P，div~p：选中div后面所有的P
伪类选择器：:hover鼠标经过 ， :link正常状态， :action点击， :viaited点击之后的状态
结构伪类：E：first-child：选择E父盒子中的第一个E，last-child：选择E父盒子中的最后一个E
E：nth-child(n)：选择E父盒子中的第n个E，E:nth-child(odd/even)：选择E父盒子中编号为奇数、偶数的E标签
E:nth-child(-n+5)：选择E父盒子中的前五个E标签 ， E:nth-last-child(-n+5)：选择E父盒子中的后五个E标签
伪元素：用::标示，::before，在之前添加，::after，在之后添加，产生的伪元素相当于div的子元素，可以使用标签的属性
伪元素选择器：::frist-letter 选择第一个字母，::frist-line 选择第一行，::selection 选择区域的样式，一般用于设置背景颜色和字体 颜色
透明：rgba模式（红蓝绿（0-255） alpha 透明度（0-1））
background-color：rgba(0,0,255,0.3)
HSLA H：色调 S：饱和度 L：亮度 Ａ：alpha透明度
background-color：hsla(0,50%,50%,0.1)
opacity：（取值0-1）；可以给盒子设置透明，但是会影响子盒子，并切子盒子不能更改透明度
background：transparent；可以设置透明，但是无法自定义颜色，完全透明
文本阴影：text-shadow：3px 3px 3px red
盒子模型：传统盒子宽度=padding+border+width，内容区域大小不变，总体大小变化
C3盒子模型 box-sizing：content-box、padding-box、border-box
私有化前缀：-webkit-(谷歌的)，-moz-(火狐)，-ms-(IE )这个去百度详细了解如果加前缀也无法显示就放弃使用
边框圆角：border-radius:100px(正圆)或100%（拓展性强）
border-radius:左上，右上，右下，左下
边框阴影：box-shadow:左右位移值 上下位移值 模糊值 阴影大小值 颜色 inset内阴影
边框图片：border-image-source:url();
border-image-slice:27 27 27 27;图片边框的剪裁
border-image-width:27px;图片边框的宽度
border-image-repeat：
repeat;边框图片的正常平铺，但是可能会显示不完整
round平铺，但是保证图片完整显示
stretch拉伸显示
背景尺寸：background-size:设置背景大小（cover放大图片直至盖住整个盒子，会超出 contain能完整显示，但不能保证布满饿盒子）
背景原点：默认背景从padding开始 background-origin：padding-box;(border-box,content-box)
背景裁剪：background-clip:padding-box;
多背景：
线性渐变：渐变属于背景background-image:linear-grendient(to right,起始颜色，终止颜色)，方向也可以使用角度设置比如4 5deg，颜色还可以自定义在框内所占的长度比这样实现彩虹线，又或者从多少开始多少结束这样就可以实现斑马线
径向渐变：语法：radiul-gragient(辐射半径 中心点位置 ，起始颜色，终止颜色)
backgroud-image:radial-gradient(at left top,yellow, blue)
backgroud-image:radial-gradient(at 50px 10px yellow,blue)
过渡体验：配合：hover使用
1、transition:width 2s,backgroud-color 1s（其还有延迟执行属性linear 1s表示延迟1s执行或者这样写 (transition:all 2s)
2、transition-property 过渡属性
3、transition-duration 过渡时间
4、transition-timing-function 过渡曲线
(linear匀速ease(ease-out)减速ease-in加速ease-in-out先加速后减速)
5、transition-delay延迟属性
气泡案例
位移：translate（）
1、右移正数，左移负数（右下为负，左下为负）
2、第一个指水平移动，第二个值垂直移动距离
3、可写百分比数值，相对与自身的尺寸
4、盒子在父盒子中居中的方法
position：absolute;
left:50%;
transform:translate(-50%);
旋转：rotate（45deg）
正值顺时针，负值逆时针
旋转中心：transform-origin 默认旋转中心：几何中心
本博客是用于本人学习笔记，不喜勿喷，禁止用于商业盈利