前端注意点
1.字体用unicode
2.font-weight用数字 400=normal 700=bold
3.颜色用16进制
4.display:block 块级元素
display:inline-block 行内块，可以有宽高
display:inline 行内元素 ，无宽高
5.h1,p文字块元素，不包裹div，一般就包裹文字，
a里面可以放块级元素
6.行高概念
7.让文字垂直居中，line-height = 盒子高度
8.优先级
* {} 和 继承的权重最低 0000
标签选择器 < 类,伪类选择器 < id选择器 < 行内 < !important
div < .nav < #btn2 < style="" < color:#f00!important
0001 0010 0100 1000 ∞
9.权重计算
a:hover -----》 0001 + 0010
0005 + 0005 = 000 10
10.继承的权重为0，无论父亲是否!important，自己 有定义的样式用自己的
11.背景图片的位置
background: #000 url(images/sm.jpg) no-repeat scroll center top ;
色图铺定位
12.背景半透明 CSS3
background: rgba(0, 0, 0, .3);
13.合并表格相邻边框
14.padding 上右下左
padding 会撑大 带有 width 和 height 的盒子
盒子宽： border-left+ padding-left + width + padding-right + border-right
15.盒子居中对齐
①margin: 0 auto
②margin-left: auto 左侧自动充满
margin-right:auto 右侧自动充满
③margin: auto 上下不起作用，所以仅仅是左右居中
16.相邻块元素垂直外边距的合并
17.嵌套块元素垂直外边距的合并
只定义内嵌div的垂直方向margin-top，父级元素也会跟着下来。
但是水平方向的margin-left是有用的。
解决方案：
①可以为父元素定义1像素的上边框或上内边距。
②可以为父元素添加overflow:hidden。
18.盒子尺寸
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
19.盒子阴影
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4) inset;
box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影;
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
20.浮动的盒子跨越不了padding
21.浮动可以让盒子默认转换为行内块
22.版心
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
23.行高会继承，所以一般line-hight 在父级元素中统一定义
24.banner图一般做背景图片
25.高度剩余法
26.清除浮动的本质
为了解决父级元素因为子级浮动引起内部高度为0 的问题。
ul，li一般就是给li高度，从而撑开ul，父级元素一般不给高。
为什么高度会为0？
因为浮动的子元素脱标了，不占位置，然而父亲又没设宽高所以高度为0.
如果子元素不浮动，是会撑开盒子的，所以父元素的高是子元素的高。
27.清除浮动的方法
① 额外标签法
最后一个浮动标签后新添加一个标签，清除浮动
如果清除了浮动，父亲自动检测孩子的高度，以最高的为准
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
②父级添加overflow属性法
清除浮动原则：谁影响浮动清除谁，不影响无需清除
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，
无法显示需要溢出的元素。
③使用after伪元素法
css属性前面带星号，其他浏览器都略过，ie6，ie7将解析
④使用before和after双伪元素清除浮动
28.一行3个板块，中间2个缝隙，直接给中间div左右margin就行了
29.定位(定位模式 + 遍偏移 构成了定位)
| static | 自动定位(默认定位方式) |
| relative | 相对定位，相对于自己原文档流的位置进行定位 |
| absolute | 绝对定位，相对于自己上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
①static：
div,span....
静态定位唯一的作用，取消定位
②relative
以自己的左上角为基准点移动
原来的位置继续占有
③absolute
完全脱标，不占位置，和浮动一样
父级元素没有定位：
以浏览器的当前屏幕
父级元素有定位：
以最近的，有定位的父级元素左上角为基准点
子绝父相：
因为父级元素需要占位
④fixed
完全脱标，不占位置
以浏览器为准
添加了绝对定位 和 固定定位后，自动变成行内块元素，展示与否是根据
是否又内容，所以我们做通栏的导航条，需要给一个宽
30.定位中的 模式转换
添加了绝对定位 和 固定定位后，自动变成行内块元素
31.定位盒子居中对齐
加定位 和 浮动的 盒子 margin：0 auto失效
32.层叠次序(z-index,只有定位的盒子又z-index属性)
浮动：
后面的div会在浮动的div下面
定位：
后面定位的div会压在前面定位的div之上
注意：
① z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
② 如果取值相同，则根据书写顺序，后来居上。
③ 后面数字一定不能加单位。
④ 只有相对定位，绝对定位，固定定位有此属性，
其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
33.z-index经典案例
为什么margin-left:-1可以合并边框？
因为最左边的盒子先往左-1，然后因为浮动所以第二个盒子自动会先
受float的影响靠上来，接着再往左-1，所以能合并。
34.display
display:none 隐藏
display:block 显示
隐藏后不占位置
35.visibility
visibility:visible 显示
visibility:hidden 隐藏
隐藏后 仍然占位置
36.仿土豆透明盒子
37.overflow的使用
auto 超出了就显示滚动条，不超出就不显示
38.鼠标样式cursor
cursor: pointer; /*小手*/
cursor: text; /*选择*/
cursor: default; /*小白*/
cursor: move; /*十字架*/
39.outline 表单轮廓线，文本域防止拖拽
40.vertical-align垂直居中 (针对于行内块元素，块级元素没有)
基线对齐：vertical-align:baseline;
垂直居中：vertical-align:middle;
顶部对齐：vertical-align:top;
因为图片和文字基线对齐，所以图片底部有3px空白间隙？
解决：
①只要 不是baseline都行
网易写法： img { vertical-align:top;border:0;}
②将图片转化为块级元素
img {display:block;}
41.常见行内块元素
img，input，textarea
42.溢出文字隐藏
white-space:nowrap;
overflow:hidden;
43.CSS精灵图主要做背景Sprites
44.滑动门
a里面包个span
45.切右下角边
div宽度比5*li少1，ul宽度比5*li大以保证一行有5个，
然后div给overflow:hidden，则溢出的1px线会被隐藏
46.行高不带单位
font:12px/1.5 Microsoft YaHei;
行高会继承，所以行高是1.5*12 = 24px
47.CSS Reset 处理跨浏览器兼容性
normalize.css
48.ico图标
www.jd.com/favicon.ico
放在项目的根目录和index.html平级
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
49.项目目录结构
50.优化代码
子元素和父元素高度相同，只给子元素加高度，会自动撑开父元素，节省代码量
51.Logo写法
div里面放h1,h1里面放a
搜索引擎就靠 京东 这两个字来搜索
52.SEO三大标签优化
①title
长度小于28个中文
②description
字符数含空格在内不要超过 120 个汉字
③keywords
Keywords应该限制在6～8个关键词左右，电商类网站可以多少许。
53.ul,input 和 button默认有内边距
54.ps量图的时候边框不量
55.css被划掉，权重不够
56.轮播图结构
57.图片的宽度和父亲的一样宽
58.CSS验证，压缩
http://validator.w3.org/unicorn/
http://tool.chinaz.com/Tools/CssFormat.aspx
压缩后名字位 base.min.css
===================== IE9以上版本 H5=======================
1.新标签
<header> 语义 :定义页面的头部 页眉</header>
<nav> 语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义: 定义文章</article>
<section> 语义： 定义区域</section> 像div
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>
2.datalist
3.插入音频视频
流行使用，引用外部视频连接
4.结构伪类选择器
5.属性选择器
6.伪元素选择器
7.字体图标新做法
其实还是span那种好用，伪元素低版本浏览器不支持
9.CSS3盒子模型
1就是CSS中的盒子模型，2是CSS3的盒子模型
10.CSS3盒子模型案例
11.转换ico图标
先切图 尽量透明图片 png-24 格式
cuttman 官网 http://www.cutterman.cn/zh
切出透明png图片
12.文字对齐
13.CSS3盒子在量图的时候注意要把边框也量进去
14.椭圆形要圆角，高度的一半
15.CSS3动画 过渡transition
过渡写到本身上，谁做过渡动画，写到谁身上
何时开始，鼠标经过后1s再展现动画
16.图片左右移动
是图片动了，不是盒子动了
过渡变背景颜色
17.2D变形(CSS3) transform
CSS3版 定位盒子 垂直居中
位移：translate 移动
18.变形之缩放 scale
注意要overflow hidden
19.变形之旋转(rotate)
20.过渡之倾斜 skew
21.变形简写
22.CSS3动画 (animation)
心跳动画
23.CSS3伸缩布局flex
父级元素添加display:flex
子元素:flex:1
24.图片自动缩放
25.CSS3文字阴影text-shadow
不建议使用，耗性能
26.手机上的精灵图都是按2倍大小来做的，为了ios缩放图片仍然清晰
27.背景缩放，注意是背景！
background-size
cover保证背景区域始终被图片填满！！
contain：长边是宽，宽到了停止。长边是高，高到了停止。
案例：
浏览器前缀
28.ios和android的切图方法是不一样的
29._background-size ie6识别 *+background-size ie7识别....
30.颜色渐变
31.多背景
32.泡泡案例
33.背景透明和盒子透明
背景透明不影响字，盒子透明字也影响
34.翻转的盒子
绕x
绕Y
两面翻转的盒子