１．各属性之间互相影响
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>
