仿写京东页面笔记

1.字体图标的大小用font-size调整，用width和height是没用的，一般用于给i设置宽高，而iconfont放进去恰好等于i的宽高，然后上下位置用margin调整

2.一般像京东这种除了导航栏其余背景颜色一致且居中设置的，不用单独起类名（.w）,而是放进一个大盒子里，给这个大盒子margin:0 auto;

3.导航栏我的京东位置，之所以hover后宽度不够，是因为在hover时给加了边框宽度，会挤旁边的元素

4.不可以用行内元素包含块级元素！！！因为浏览器会自动添加一些属性，除去a（添加了a也会少给属性的）之外不用行内元素包含块级元素，尤其span

5.Hover只能从上级找下级或者找同级的，不可能从下找上，比如先给儿子设了字体颜色，后来再去更改父亲的字体颜色以达到更改儿子颜色的效果是不可能的，又比如想点击盒子a hover后出现的盒子b去让a显示也是不可能的

6.+选择器是选择相邻的盒子，~选择器是选择所有同级的选择器

7.想点击li盒子hover后出现div盒子，如果布局合理可以实现relative定位后微调，然后用+选择器hover，布局不行的话就用绝对定位了，如果还想放在div盒子上也不会消失的话，就用大盒子（li）包裹这两个盒子，放在大盒子上再改变两个盒子的属性

8.一定要注意图层，相同类型的层叠用z-index调整，不同类型的用position：relative；提高图层

9.display: none和display: block之间的切换也会出现过渡效果失效的情况。解决方法：1.用opacity(透明度)去替代。2.用visibility : hidden和visibility: visible进行替换