声明：本篇文章是我在学习“指尖流逝的夏末”博主的文章——CSS3与页面布局学习总结（四）——页面布局的多种方法过程中，把自己认为重要的易忘记的一些点加以记录，另外有些地方再加上自己的一些理解。
一、负边距与浮动布局
1.1负边距（margin为负值时）
1.1.1向上移动
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移。
1.1.2去除列表右边框
就像原文中实现的商品展示列表，最初很困惑为什么div2的设置一定要设置为-20px，且无论是修改成0，-10还是其他的值，都不会正确显示出来。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>负边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
height: 380px;
margin: 0 auto;
border: 3px solid dodgerblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: orangered;
float: left;
}
#div2{
margin-right: -20px; //不懂为什么要是-20px!!!!!!
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>查看元素，发现这时候div2的大小为，width:800px。为什么是800呢，因为本来应该4个div的width +4个右间隙=820px，但是div2设置了margin-right:-20px，就相当于将div向右移动了20px，这时候刚好达到如图所示的效果，第四个div的margin-right被隐藏了。
否则，例如当我们将div2的margin-right设置为0时，查看元素，少了两个。
再次查看其余的两个div块，如下图所示。原来是被挤到了下一行去了。这正是因为，我们刚才算的，本来需要820的width才能放下8个div块，但是，margin-right:0时，相当于此时的div2等于外部的div大小760px，明显放不下8个div块，但是一排三个是绰绰有余的，因此放不下的自然就挪到了下一行！
小小的总结：浮动元素在包含块内，当包含块宽度不足以容下浮动元素时，便会自动折行。
二、定位
又翻看了该博主的另一篇博文：CSS3与页面布局学习总结（三）——BFC、定位、浮动、垂直居中
2.1两个概念：
（1）BFC：“块级格式化上下文”——触发条件：元素定位非static、relative的情况下，float也是一种定位方式；
特点有：不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖；
例如：如果一个浮动元素后面跟着一个非浮动元素，就产生重叠。如图所示：
因此，通过overflow:hidden属性产生BFC块级格式化上下文，阻止浮动元素的覆盖。
（2）IFC：“行内格式化上下文”——触发条件：
2.2定位类型
（1）static:静态定位->定位偏移属性将不会被应用如top、right、bottom、left。
（2）relative：相对定位->参照自身在常规流中位置，通过top、right、bottom、left定位。
（3）absolute：绝对定位->找里自身最近的祖先元素，一直找到，如果没有那么其祖先元素就是body。！！但祖先元素必须定位，不为static即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
div {
border: 2px solid yellow;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;/*在这里 div1div2都没有设置定位，
因此这里的absolute是相对于body元素 从标准准流中脱离了 所以会跑到div的外面去*/
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div id="div1"> div1
<div id="div2"> div2
<div id="div3">div3
</div>
</div>
</div>
</body>
</html>现在当给div3的父元素的父元素即div1设置定位后，效果如下所示：
（4）fixed：固定定位->偏移定位以窗口为参考，即相当于窗口右下角浮动着一个小窗口，但滑动滚动条时，该窗口始终相当于位于窗口的右下角，并不会随滚动条的滑动而改变他的位置。
注：absolute和fixed都脱离了常规流，该定位下，盒子的偏移位置都不会影响常规流中的任何元素。
2.3 其他的定位属性
（1）z-index：设置层叠次序的优先级，值越大优先级越高，越显示在前面。默认值为auto，元素在当前层叠上下文中的层叠级别是0。
上图所示图片的示例代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
position: absolute;
}
#div1 {
background: lightsalmon;
}
#div2 {
background: lightgreen;
left: 33px;
top: 33px;
z-index: 1; //层叠次序最大，显示在最前面一层，其余两个div1和div2均按在dom结构中的次序，从上往下显示。
}
#div3{
background: lightblue;
left: 66px;
top: 66px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
</body>
</html>（2）display：取值有none（元素不显示）、inline（显示为行内元素）、block（0块级元素）。
（3）opacity属性：设置元素的不透明级别，取值为（0-1）。
（4）target伪类（只有只是css3的浏览器才可以使用，详细参见原文例子及本人的css笔记）：匹配相关URL指向的E元素，URL后面跟锚点#，也就是指向文档内某个具体的元素，这个被链接的元素就是目标元素，：target选择器用于选择当前活动的目标元素。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content {
height: 50px;
font-size: 20px;
color: royalblue;
border: 2px solid darkblue;
}
div :target {
background: lightgreen;
}
</style>
</head>
<body>
<div id="div1">
<a href="#p1">第一段</a> //这里的href就相当于url后面跟了一个#p1，然后通过点击时，即会触发选择到id为p1的div元素。
<a href="#p2">第二段</a>
<a href="#p3">第三段</a>
</div>
<div id="div2">
<div id="p1" class="content">第一段内容</div>
<div id="p2" class="content">第二段内容</div>
<div id="p3" class="content">第三段内容</div>
</div>
</body>
</html>
（5）浮动：行内元素不能设置其宽高，设置也不会起作用。
因此，一般需要将行内元素转换为block或inline-block后，才可以设置其宽高。
清除浮动：clear none | left | right | both，顺次为两边都有浮动对象 | 不允许左边有浮动对象 | 不允许右边有浮动对象 | 两边均不允许有浮动对象
例如，清除内部浮动时，外部一个div包含了浮动的div，必须要在内部的末尾加上清除浮动的，放在前面则不会起作用。
（6）多种居中方法：
有宽度标签设置margin: 0 auto ->水平居中；
设置定位元素的所有偏移都为0且margin为auto是，将水平垂直居中，父元素自身高度可动态变化？?父元素自身高度可动态变化是什么意思。。
如下所示的示例中，设置了div1的所有偏移为0且定位为绝对定位，由于这时父元素div0设置了其定位，因此div1的参照标准为div0。因此，这里偏移都为0时，设置的margin:auto就生效了。div的width为100，div0的width为600，故将margin-left及margin-right均设置为250px，同理margin-top和margin-bottom自然也就被设置为50px。这时候的div1也就自然是水平垂直居中的了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#div0{
width: 600px;
height: 200px;
position: relative;
margin:0 auto;
border:2px #9acfea solid;
}
#div1{
width: 100px;
height: 100px;
background: #2aabd2;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">div1</div>
hello word
</div>
</body>
</html>
当修改div的左偏移和上偏移均为10px时，效果如下。但是要注意带单位不然，偏移为10时，就是按其他的标准来的。
第三种：让元素相对于父元素定位，left左right右各偏移50%，在同时定位margin-left为宽度的一半，距离父元素顶端为自身高度的一半margin-top为自身高度的一半，且两者都为负。即左移和上移。
总之，脱离文档流的两种方式，浮动和定位！