CSS布局笔记，可能有些乱，以后再补充吧~
margin合并影响布局
兄弟元素之间
在默认情况下两个 div 之间的 margin 属性会重合，例如：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main {
border: 1px solid blue;
}
div {
border: 1px solid red;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
效果图：
代码预览地址：http://js.jirengu.com/lehehesoge/1/edit
但在其中插入一个有边框的 div 时，margin 又会被撑开，例如：
代码：
<!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 style="border: 1px solid #000"></div>
<div class="demo"></div>
<div class="demo"></div>
</body>
</html>
效果图：
代码预览地址：http://js.jirengu.com/giqanalumi/10/edit?html,output
即使插入的 div 边框为 0.1px 其他div的margin也会受到影响，会影响的属性还有:
display: table;display: flex
父子元素之间
当给子元素一个 margin-top 时，父元素也会被挤下去
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main {
border: 1px solid blue;
padding: 5px;
}
.child {
height: 100px;
width: 100px;
background-color: #ff0000;
margin-top: 100px;
}
.parent {
background-color: #000;
}
</style>
</head>
<body>
<main>
<div class="parent">
<div class="child"></div>
</div>
</main>
</body>
</html>
图示：
代码预览地址：http://js.jirengu.com/cimunikafi/1/edit
但是当给父元素添加了一个border属性时，它又会撑开父元素
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main {
border: 1px solid blue;
padding: 5px;
}
.child {
height: 100px;
width: 100px;
background-color: #ff0000;
margin-top: 100px;
}
.parent {
background-color: #000;
border-top: 5px solid green;
}
</style>
</head>
<body>
<main>
<div class="parent">
<div class="child"></div>
</div>
</main>
</body>
</html>
图示
代码预览链接：http://js.jirengu.com/cimunikafi/2/edit
除了加 border 属性，会影响的属性还有: padding display: inline-block; display: flex; display: table; overflow: hidden;
如果在有 margin 属性的子元素上添加一个内联元素，那么 margin 也不会影响父元素布局
li小圆点 受display影响
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul {
border: 1px solid #000;
}
li {
display: block;
}
</style>
</head>
<body>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</body>
</html>
图：
代码地址预览：http://js.jirengu.com/kiciminufa/1/edit
原因：由于默认的 li 的 display 属性为： list-item 小圆点只会显示在有这个属性的元素上
position 会影响 dispaly属性
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent {
background: yellow;
height: 100px;
position: relative;
}
.child {
display: inline;
border: 1px solid red;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">内联样式</div>
</div>
</body>
</html>
此时打开控制台选中 child 元素 在控制台右侧选择 Computed 一栏 搜索 display ，就可以看到实际上child 的 display 属性变成了 block ，如图：
代码预览链接：http://js.jirengu.com/yucujokate/1/edit
注意：只有当 display 的属性为 inline 或者 inline-block 时添加 position 属性才会被变为 block
position: fixed 会受 transform 影响
当给有 position: fixed 属性的父元素或祖先元素一个 transform 属性时 position: fixed 就不会相对屏幕定位，而是相对那个父元素或祖先元素定位。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main {
width: 200px;
height: 200px;
border: 1px solid blue;
transform: translate(10px, 50px);
}
.demo {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
right: 5px;
top:50px;
}
</style>
</head>
<body>
<main>
<div class="demo"></div>
</main>
</body>
</html>
图示：
代码预览链接：http://js.jirengu.com/zesiyopemi/2/edit
float 元素会影响周围的 inline 元素
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent {
background: blue;
height: 100px;
}
.float {
background: rgba(255, 0, 0, 0.5);
width: 100px;
height: 60px;
float: left;
}
.child {
width: 300px;
height: 50px;
background: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="float">浮动元素</div>
<div class="child">文字元素</div>
</div>
</body>
</html>
这时 float 元素就会影响兄弟元素里的 inline 元素，如图：
代码预览链接：http://js.jirengu.com/bojacipogu/10/edit
拓展：浮动最初的作用
浮动开始只是为了让图文混排出现的，当在一段文字中插入一个图片，文字默认是与图片底线对齐的。很不美观，于是就出现了 float: left 等属性，可以显示图片又使文字排版美观
