1、normalize.css 网站初始化
保留浏览器默认样式而不是全部去掉
2、ico 浏览器头显示的图片
查看： https://www.jd.com/favicom.ico
3、png 转换成ico
地址：www.bitbug.net
4、网站优化三元素：
- title：头显示 和ico 一起显示 28个字符
- description： 搜索引擎优化
- keyword： 搜索关键字 6-8 个关键字
5、icomoon文字：icomoon.io
引入字体 font-family: 'icomoon';
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?vj3z6h');
src: url('../fonts/icomoon.eot?vj3z6h#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?vj3z6h') format('truetype'),
url('../fonts/icomoon.woff?vj3z6h') format('woff'),
url('../fonts/icomoon.svg?vj3z6h#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
6、加了绝对定位、固定、浮动的行内元素，可以不用转换display，直接设置宽高
7、实用工具:PS FW
取消浮动： overflow：hidden
8、精灵图的使用：
li: n-th-child(2) h5 {
background-position:0 -43px;
}
9、盒子设置top，会变高
box-sizing：border-box 或 bottom - top
10、p内既浮动又居中：
display：inline-block （行内元素）
float：left；
text-align：center；
11、img下有一条白色的空隙
display：block；
vertical-align：middle
12、模块居中
transform：translateY(50%)
top：50%
13、鼠标经过变成小手
cursor：pointer
14、显示：你好，我是靳东...
三个标签组合使用
- white-space：nowrap；不换行（强制行内显示）
- overflow：hidden；溢出隐藏
- text-overflow：ellipsis；超出部分显示...
15、元素被遮挡
z-index：999 提高它的层次
16、手放上显示模块：（过渡特效）
.add-r{
width：0px；
height： 480px；
transition：all 0.8；
}
.ad:hover .add-r{
width：90px；
}
17、BFC(Block Formatting Context) 块级格式化上下文
封闭的区域：块级元素参与，可以创建：
- voerflow 不为visible
- float 不为none
- position 为absolute、fixed
- display：inline-block、table-cell、table-caption、flex、inline-flex
