CSS的五个奇怪特性

margin会受到border和display的影响

以div元素为例
三个并列的div，必然是上下排列，外边距是10px,也就是我们通常说的上下间隔10px
demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .demo{
      border: 1px solid red;
      height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="demo"></div>
  <!-- <div class="demo2" style="border: 0.1px solid green"></div> -->
  <div style="display: flex" class="demo2"></div>
  <div class="demo"></div>
  <div class="demo"></div>
</body>
</html>

以上是正常的效果图
但是
凡事总有例外
一个boder就可以给你分开，像一条隐形的线分隔开了

而且，你改变中间那个div的display即使没有border也可以分割

display: flex 可以分割

对比的效果图如上
displa: table 可以分割
最令我震惊的是display: inline-block,间距是40px

以上特例要记住

li的样式受到display的影响

ul标签的字标签li标签默认会有小圆点，但是一旦你想给li的display属性点更改，圆点就消失

上图是默认样式
你更改了display就完蛋了
绝对定位会改变display的属性
一旦你使用了position: relative position: absolute之后，即使你写了display: inline，但是浏览器计算出来的的仍然是block
以上是没绝对定位的时候

你会发现绝对定位之后的display不是你规定的inline.
inline-block 和 inline都会被改成block
transform会对fixed的元素影响
正常来说fixed的元素是相对于视口定位的，但是与transform结合后就不是这个现象了。CSS3规范说的是会整体缩放，所以要根据父元素定位。
实例如下

上图是正常的，无论你如何拖动滚动条都无所谓。
但是
float影响inline元素
其实float属性不是真正的浮起来来了，而是希望做到文图环绕的效果。文字会环绕在浮动元素的周围。

没有浮动的时候，通过这个图，你也会发现一个奇怪的现象，两个子元素的高度可以超过父元素的高度，而父元素不影响。
下图是浮动后神奇的效果

一般人的理解是你浮起来的，我是正常元素啊这几个字会出现到 一个浮动元素的下面，也就是它本体灰色框的左边，而实际上不是的，会感知到有个浮动元素，文字环绕在哪个浮动元素的旁边。