1.边距冲突：
当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算，浏览器会忽略小的那个值而使用大的值。
2.边距折叠：
假设要在警告框里插入一个标题，并且要在它与div的顶部和底部之间各留出一点空间，浴室设置标题的margin为10px。但是设置的边距反而出现在了div的上方，这种现象叫做边距折叠，意味着两个边距变成了一个。解决的方法有两种：（1）在<div>标签周围添加少量的padding；（2）给<div>添加一条border。
水平边距不会和浮动元素之间的边距发生折叠，绝对定位和相对定位的元素也不会发生折叠。
3.行内元素：
行内元素只有left/right的margin值，例如<img>与<a>。
4.背景颜色：
使用background-color和border时，如果边框样式为圆点或者虚线，在圆点或虚线之间的空白处就会显示出背景色。换句话说，web浏览器实际上是把背景色显示在边框线的下方。
5.border-radius：
border-radius有四个值时，顺序为：左上角、右上角、右下角、左下角。
6.设置盒模型高度与宽度：
（1）content-box:宽度与高度包括内容部分。
（2）padding-box：宽度与高度包括padding部分。
（3）border-box：宽度与高度包括border部分。
7.overflow：
（1）visible：把内容显示在任何地方。
（2）scroll和auto：会添加滚动条。
（3）hidden不现实超过的那部分内容。
8.float：
源代码的顺序对浮动元素的显示有很大影响。浮动标签的HTML代码必须出现在任何包围浮动元素的内容之前，假设你已经创建了这样一个网页，它包含一个<h1>标签，后面是一个<p>标签。在<p>标签的末端，又用一个<img>标签插入了一张图片，假设你把这张图片浮动到右边，那么<h1>标签和<p>标签里面的内容仍然出现在照片的上方，只有<img>标签后面的内容会包围图片的左侧。