CSS难点

CSS难点

各属性之间互相影响

• margin vs border
  • 相邻margin(3)

    

    • border影响相邻margin合并

      

    • display: table;影响相邻margin合并

      

    • display: flex;影响相邻margin合并

      

      代码：jsfiddle.net/zzzxq2019/e…
  • 父子margin(6)

    

    • border影响父子margin合并

      

    • padding影响父子margin合并

      

    • display: table;影响父子margin合并

      

    • display: flex;影响父子margin合并

      

    • display: inline-block;影响父子margin合并

      

    • oveflow: hidden;影响父子margin合并

      

      代码：jsfiddle.net/zzzxq2019/2…
• 小圆点 vs display
  • li默认属性display: list-item;改变会导致小圆点消失

    

    代码： jsfiddle.net/zzzxq2019/4…
• position: absolute; vs display: inline;
  • display: inline;和display: inline-block;、display: fixed;在position影响下会变成block。

    

    

    

  • display: table;没有被影响。

    

    代码：jsfiddle.net/zzzxq2019/n…

各元素之间互相影响

• position: fixed; vs transform;
  • position: fixed; + transform;导致相对父元素定位而不是视口定位了。

    

    代码：jsfiddle.net/zzzxq2019/s…
• float影响inline元素
  • float影响内联文字环绕，文图混排