外边距折叠
比如
如下代码
最终结果是外边距30px 而不是50px
为了避免折叠
通常都是取一个方向的外边距

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      div{
        width: 100px;
        height: 100px;
        border: 1px solid salmon;
      }
      #a{
        margin-bottom: 20px;
      }
      #b{
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id="a">
      
    </div>
    <div id="b">
      
    </div>
  </body>
</html>

使用flex布局
有div float inline-block之类百分比等等；
其实都需要做一些处理 比如浮动 要考虑脱离文档流 给周围的元素的影响
需要清除浮动 clear：both content："",display:table或block

#c:after{
        clear: both;
        content: " ";
        display: inline-block;
      }

百分比需要考虑宽度高度
如果使用flex
display:flex
可以简单做出预想的效果 尤其是响应式上面

重置css样式

*{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }

由于css的继承性
我们使用*选择器来消除一些因为不同浏览器而表现的标签样式不一样
比如说ul li p h1之类的 如果需要体现标签特性
可以使用
style内联 1000权重
id 2 100
class(类、伪类和属性选择器） 3 10
标签选择器(标签选择器和伪元素选择器) 4 1
通配符、子选择器和相邻选择器 5 0.1
组合选择器权重会叠加 大的会覆盖小的
等等 来覆盖
毕竟 css具有优先级

实现动画效果
建议不要改变 元素的宽度高度边框 定位等等
使用transform：translateX Y rorateXY scale
浏览器也支持

主流的浏览器 指内核 chorme 或webkit 的浏览器