CSS的奇怪之处

１．各属性之间互相影响

a.margin与border

后边会详细说，关于margin合并的问题；

b.小圆点与display

display的默认样式为display: list-item，如果我们修改为display: inline等会改变样式，也就是小圆点消失了。

<style>
    li{
      display: inline;
    }
  </style>
<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

效果图

c.position: absolute与display:inline

先看代码，我们指定子元素为inline。

<style>
    .parent{
      background: green;
      height: 100px;
      position: relative;
    }
    .child{
      display:inline;
      border:1px solid red;
      position: absolute;
    }
  </style>
<div class="parent">
  <div class="child">内联样式</div>
</div>

效果图

我们查看计算出来的属性：

浏览器计算结果

２．各元素之间互相影响

a. position与transform

我们将子元素相对视口定位，看代码：

<style>
    .parent{
      background: green;
      height: 100px;
      position: relative;
      /* transform: scale(0.9); */
    }
    .child{
      position: fixed;
      border:1px solid red;
      bottom:0;
      left:0;
    }
  </style>
<div class="parent">
  <div class="child">内联样式</div>
</div>

正常

然而当我们在父元素添加transform，将父元素做一个变形的时候：

父元素添加了transform

b.float影响inline元素

先看效果：

效果图

注意“你好”的位置。也就是说，不会影响div，但是会影响里边的文字。

<style>
    .parent{
      background: green;
      height: 100px;
    }
    .float{
      height: 100px;
      width: 70px;
      background: rgba(255,0,0,0.8);
      float: left;
      
    }
    .child{
      width: 300px;
      height: 50px;
      background: white;
    }
  </style>
<div class="parent">
  <div class="float">浮动元素</div>
  <div class="child">你好</div>
</div>