边框简写：border(-top/bottom/right/left）: 1px solid red 没有顺序 ;
合并相邻的边框 border-collapse:collapse仅作用于表单数据
background:背景颜色 背景图片地址 背景是否平铺 背景图像是否滚动 背景图片位置（精灵图
background: blank url(image/.jpg) no-repeat fixed center top;
/* 定位=定位模式+边偏移 子绝父相 */
√相对定位：选择器{position: relative;} 相对于自己原来的位置反向移动，原来的位置持续占有，后面盒子上不去，一般给父盒子
√绝对定位：选择器{position: absolute;},相对父元素（有定位，如果没有，则父类的父类……）移动，如果无父元素/父元素无定位，则以浏览器为准定位。不占有原来的位置
√固定定位：选择器{position: fixed;固定在可视窗口一个位置，不随滚动条滚动，不占有原先位置}
粘性定位：选择器{position: sticky;top/left/right/bottom: xxpx;可是窗口为参照点，占有原来位置，导航栏}
定位叠放次序：选择器{z-index: 1;}可正可负可0，默认auto,越大越靠上，相同则后来居上，不能加单位
鼠标形状-cursor:default默认小白/pointer小手/move移动/text文本/not-allowed禁止
行内元素从左到右顺序排列，碰到父元素边缘则自动换行：span,a,i,em 块级元素独占一行：div,hr,p,h1-h6,ul,ol,dl,form,table -->
浮动元素具有行内块元素性质，行内元素添加float后变行内块 -->
块级元素不设置宽度，默认和父级一样宽，添加浮动后，大小根据内容决定；浮动盒子中间没有缝隙，行内块有缝隙 -->
display:none;隐藏对象，不在占有原来位置；visibility:hidden元素隐藏，继续占有位置 -->
display:block;转换为块级元素/显示元素；visibility:visible元素可视 -->
overflow:hidden隐藏溢出部分，auto自动加滚动条。有定位的盒子可能有要溢出的部分，慎用hidden -->
溢出文字用省略号表示：white-space:nowrap;(必须强制1行内显示，默认normal自动换行）overflow:hidden;text-overflow:ellipsis; -->
浮动加margin不会撑大盒子 -->
浮动的元素不会压住下面标准流的文字、图片，只压盒子。但是绝对、固定定位会全压 -->
并集选择器是逗号，节省代码 -->
vertical-align用于图片和表单（行内块）与文字（行内）垂直对齐：baseline/top/middle/bottom -->
bug:图片底部有空白缝隙：1.给图片加vertical-align:除了基线都可以2.把图片转换为块级元素display:block -->
盒子边缘重叠加粗，left改为-1px,如果效果是hover变颜色，则加relative，在hover里z-index设置大一点 -->
/* 防止拖拽文本域 */
textarea {
resize: none;
}
/* 取消表单轮廓 */
input, textarea{
outline: none;
}
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?pvh3aq');
src: url('fonts/icomoon.eot?pvh3aq#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?pvh3aq') format('truetype'),
url('fonts/icomoon.woff?pvh3aq') format('woff'),
url('fonts/icomoon.svg?pvh3aq#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
\
/* 字体声明结束 */
CSS3
新增语义化标签
谷歌自动播放需要添加muted（静音），loop是循环播放，poster加载等待的画面，preload='atuo预先加载/none'（如果使用autoplay则忽略该属性）
<video src="#" autoplay="autoplay" muted="muted"controls="controls" loop="loop" poster="##"></video>
<input type="text/email/url/date/time/month/week/number/tel/search/color" required="required"必填 placeholder="文本"提示文本 autofocus="autofocus" autocomplete="off不保存历史键入值/on默认" multiple="mutiple">
选择器
1.属性选择器（10）：元素[属性] 元素[属性=“xx”] 选择xx开头的属性值的元素：元素[属性^=“xx”] 选择xx结尾的属性值的元素：元素[属性$=“xx”] 选择带有xx的属性值的元素：元素[属性*=“xx”]
2.结构伪类选择器：类：first-of-type/last-of-type/nth-of-type(n)第n个/odd奇数等价2n+1/even偶数等价2n/直接写n则选择从0开始，每次加1的数/可以写关于n的公式，指定元素编号
类：first-child/last-child/nth-child(n)父元素里所有孩子编号
3.伪元素选择器：element::before父元素里面的前面创建元素/after父元素里面的后面插入元素{content='xxx'}，和标签选择器权重一样为1，行内元素，一般配合浮动使用
SS3盒子模型，box-sizing:content-box,盒子大小为：width+padding+border(以前默认的)/border-box,盒子大小为width,不会撑大模型，放到初始化里
calc()可以做计算+，-，，/
渐变-transition:要过渡的属性(宽、高，背景颜色，内外边距，all) 花费时间（xxs，必须写s） 运动曲线(可忽略) 何时开始(可忽略，默认0s)；多个属性用逗号分割，谁做过度给谁加
LOGO SEO优化 1.logo里首先放h1标签，提权 2.h1再放一个链接可返回首页，即把logo的背景图片给链接 3.链接里放文字（网站名称），但设置不显示 方法：1)text-indent:-9999px,然后overflow:hidden,淘宝的做法 2)font-size:0;京东的做法 4.最后给链接一个title属性，鼠标放到logo上可看到提示文字
2D转换
1.移动
transform:translate(x,y); x,y是移动的位置，或者分开写
transform:translateX(n);
transform:translateY(n);
不会影响其他元素位置，对行内元素没有作用。可以写%，是以自己单位为1
2.旋转
transform:rotate(度数);
度数单位是deg不能省略；角度为正就是顺时针，负就是逆时针；默认旋转中心是元素的中心点。
3.放大/缩小
transform:scale(x,y);
x,y是宽和高放大倍数；相同写一个就行，默认中心点缩放，不影响其他盒子。 自定义中心点
transform-origin:x y;
x和y是用空格隔开，默认是50% 50%，可以用top bottom left right center;通常配合过渡使用 transition:all 1s.
综合写法： 空格隔开，顺序会影响转换效果，有位移时先写位移
transform:translate() rotate() scale();
动画 1.在style里定义动画
@keyframes 动画名称{
//开始状态 0%,100%相当于from to;是时间的划分百分比，可以写多个状态
0%{transform:...}
//结束状态
100%{transform:...}
}
2.调用动画,设置持续时间
animation-name:动画名称;
animation-duration:xs;
3.常用的动画属性
简写 animation:动画名称 持续时间 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
可以使用多个动画，用逗号连接
1)速度曲线linear：匀速；ease:默认，慢快慢；steps(步长)：像素效果
3D转换
1.translate3d(x,y,z); 不能省略，如果没有就写0，越贴脸z越大
2.透视perspective(xpx);给想产生3D效果盒子的父盒子添加，是眼睛离屏幕的距离，越小越成像越大
3.transform:rotaX(xdrg);沿X轴正向旋转x度，YZ轴相似。（正方向遵循左手法则） transform:rotate3d(x,y,z,deg);自定义轴旋转
4.默认子元素不开启3D空间 transform-style:flat
transform-style:preserve-3d;//子元素开启3d空间，写给父级
