1、高和行高也可以撑开盒子，背景图不行。

2、文字若不设置行高，是包含文字的盒子的行高。

4、如果给了定位，但是没有给left，top等值，默认会腾出行内元素、padding的位置，有的时候我们可以使用这些特性，有的时候我们不熟悉的话可能产生bug。

5、较少功能使用较少代码（a代替ui>li>a）

6、如果盒子都是左对齐的话，最后一个盒子在右边的位置不够的话，会掉下来，如果第一个盒子A比第二个盒子B高，那么最后一个盒子C掉下来后跟第二个盒子B左对齐，而不是跟第一个盒子A左对齐。如果最后一个盒子C后面还有一个盒子D的话，D盒子的顶端跟C对齐。（下图 JD logo 是 A 盒子， 搜索框是 B 盒子， 周杰伦的歌是 C 盒子，我的购物车是 D 盒子。）

7、标准流中的文字不会被浮动的盒子盖住。所以一个大盒子中的小盒子要么都浮动要么都不浮动。

8、父盒子高度为0 ，子盒子如果是浮动的话不占位置，下面的标准流盒子将会跑到子盒子下面。

或者使用了定位，父盒子高度为0，然后子绝父相，下面的标准流盒子依然会跑到子盒子下面。

（这个可以做类似京东的侧边栏，如果侧边栏挡住了跑上来的标准流盒子，那么把包含标准流的整个大盒子定位：position: relative ，因为定位的层级高，所以就可以显示标准流的所有内容了。）

9、想要盒子随着界面变大变小，而盒子随着界面的中线能够移动的时候（类似定位/脱标的盒子居中对齐），不要加版心（margin: 0 auto;）。

10、父盒子有高度，但是子盒子太高，父盒子会被撑破；如果父盒子没有高度，那么父盒子会被撑开，是所有子盒子最高的高度。撑开的盒子可能会产生影响。（不要让浮动的盒子超出父盒子）

11、浮动盒子的相互影响，不管是否在一个大盒子里面（蓝盒子是包含在粉红盒子里面的，紫盒子和粉红盒子是并列的）。

12、谷歌浏览器不支持12号以下字体大小。

13、子盒子不占位置，父盒子高度为0，会导致下面的盒子顶上来了。（清除浮动）

14、 curser: pointer;  模拟鼠标小手样式。

15、 <a href=""></a> 

如果 href 值为空，刷新页面。

如果 href 值为#，跳转到页面顶端，不刷新页面。

如果 href 值为  javascript:;  或者  javascript:void(0)  ，不刷新页面，也不跳转。

16、定位的时候，left 的权限比 right 权限高，top 比 bottom 高，提高权限也没用。

17、图片半透明

opacity：0.4；   优点方便。缺点：里面的内容也会半透明。

CSS3的技术来解决半透明：

background: rgba(0,0,0,0.3);

background: rgba(0,0,0, .3);

18、行高可以继承。

19、如果一个大盒子装的是 li 标签，而且 li 标签是浮动的，如果 li 里面的内容超过了大盒子的话，会有 li 标签掉下来，如何使得所有的 li 标签在一行显示呢？用一个辅助盒子装下所有的 li 标签，然后大盒子只装辅助盒子，这样对于大盒子来说，所有的 li 标签都会在一行显示，即使大盒子很小。而辅助盒子可以使用 ul 来代替，给 ul 一个所有 li 加起来的宽度多一点即可，但是多的一点要少于一个 li 的宽度。

20、行内元素给了定位，不需要转block，只有static, relative定位的时候需要转 block。

21、盒子的border有重叠怎么办，可以往左上移动border的margin来覆盖。

22、background: url("spirit.png") -135px 0;

关于背景の问题：

有时候我发现background后面两个px可以调节位置，有的时候又必须使用left，top等调位置。其实后面的两个px本来就是调位置的，而且调的是整个背景的位置，当背景是整张图片的时候，调节这两个px就可以了，但是精灵图因为需要的只是背景图中的某一个区域，调节这两个px只是将选中的区域移动到定位的原点，然后再使用left，top等将选定的区域调节到定位的具体位置。