任务10——浮动定位

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

float:right/left;

设置浮动，可以让元素脱离普通流，使其左右浮动，直到它的外边缘碰到包含框(父容器的边框)或者另一个浮动元素的框的边缘
设置浮动后，普通流中的其他元素感受不到浮动元素的存在；浮动元素下方的块元素会上移，占据浮动元素原来的位置；因为其他元素感受不到浮动元素的存在，因此可能会发生元素之间的覆盖遮挡；
如果对父容器内的元素都设置浮动，那么父容器因为感受不到元素的存在，高度会变为0，造成塌陷；
浮动元素之间是可以互相感知到的，元素移动过程中，如果遇到其他浮动元素的框就会停止；因此如果多个浮动元素的高度不同，那么浮动元素下移过程中，遇到其他浮动元素可能会卡住。
如果浮动元素后面跟着的是文档流中的元素，那么这些元素的框感受不到浮动元素的存在，但是里面的文字会被浮动元素影响，不会随文字的框一起向上移动，会围绕在浮动元素周边；如果想清楚环绕效果，可以用clear属性；

2.清除浮动指什么? 如何清除浮动? 两种以上方法

当为元素设定浮动后，元素脱离普通流，其他元素感受不到它的存在，会造成父元素高度塌陷、元素覆盖等一系列副作用；而这些并不是我们在布局时使用浮动的本意；清除这些浮动所带来的副作用，就是清除浮动；

清除浮动方法：

加无意义标签

<div style="clear:both;"></div>

在浮动的父级元素中，插入一个无意义的标签，这样便可以解决父元素的塌陷问题；

生成BFC
由于BFC（块级格式上下文），可以包含浮动，因此通过生成BFC也可以清除浮动；
但生成BFC一般都会有副作用，通常副作用较小的方法是：

overflow:auto/hidden

3.有几种定位方式？参考点是什么？使用场景是什么？

值	位置参考点	使用场景
inherit	规定应该从父元素继承 position 属性的值	需要继承父元素的定位
static	默认值。没有定位	元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative	内生成相对定位的元素，相对于其正常位置进行定位因此，"left:20" 会向元素的 LEFT 位置添加 20 像素	微调元素在正常流中的位置，用于对齐或调整效果
absolute	相对于距离最近的非static的祖先元素定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。	使元素脱离普通流的同时，可以精确指定位置可以覆盖页面其他元素，可以通过z-index调整叠放顺序相当于可以指定位置的浮动效果
fixed	相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。	使元素固定在窗口的某个位置，当页面滚动时，元素始终保持在窗口固定位置

4.z-index 有什么作用? 如何使用?

z-index 属性指定了一个元素及其子元素的 z-order。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。
这里需要注意的是，z-index使用对象是定位的元素，即position属性是非static的元素；
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：

元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文。

z-index 的值有两种：

auto
值为auto时元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
integer，整数值，可以为负
整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

例如上面对img设置z-index以后，便可是img向下移动一层，衬在默认z-index的元素下方

5.position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？

虽然两者都可以使元素位置发生偏移，但是意义是不同的。

负margin
本质上还是设置元素的外边距，只不过通过负值来反方向设置元素与其他元素见的位置，元素随着margin的变化，是不再占用原来在文档中的位置的，后续的元素会跟着这个元素一起移动；
position:relative
设置position:relative后，只是让元素相对于自己移动，仍然占据着原来在文档流中的空间，只是表现位置会有改变；

用两个例子来说明
原始样式及代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    
    <div class="box2">
      <p id="p1"> 饥人谷饥人谷饥人谷饥人谷饥人谷饥人谷饥人谷饥人谷饥人谷饥人谷</p>
      <p id="p2">天天向上天天向上天天向上天天向上天天向上天天向上天天向上天天向上</p>
      <p id="p3">123456781234567812345678 12345678123456781234567812345678</p>
     
    </div>
    <div class="box3">
      <p>hellow jirengu hellow jirengu hellow jirengu hellow jirengu</p>
    </div>

  </div>
</body>
</html>

*{
  margin:0;
  padding:0;
}
.box1{
  width:600px;
  height: 500px;
  border: 1px solid red;
}

.box2{
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin:20px;
}

 #p1{
   background:green;
  /*position: relative;
  top:-10px;*/
   /*margin-top:-10px;*/
   
 }
 #p2{
   width: 100%;
    height: 100px;
   background:blue;
   /*position: relative;
  top:-10px;*/
   /*margin-top:-10px;*/
 }
 #p3{
    width: 100%;
    height: 100px;
    background:yellow;
 }

.box3{
  width:100px;
  height:100px;
  background:yellow;
  /*position: relative;
  top:-30px;*/
 /*margin-top:-30px;*/
  
}

Paste_Image.png

例子1——元素占据原空间的对比
当我们对box2设置position:relative时，可以看到，只有box2箱上移动了，而box3并没有移动，box2仍占据着原来的空间，如下图所示：

.box2{
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin:20px;
  position: relative;
  top:-30px;
}

Paste_Image.png

当对box2设置负margin时，可以看到box3也随着一起向上移动了，同时box2原有设置的margin在左右下方向仍生效，只是top方向，发生了改变，如下图所示

.box2{
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin:20px;
  /*position: relative;
  top:-30px;*/
  margin-top:-30px;
}

Paste_Image.png

例子2——元素之间覆盖的对比
这里我们用p2和p3来做样式的修改
可以看到当我们设置p2位position:relative时，p2向上移动，覆盖了p1的内容，但是p3并没有向上移动，p2仍占据着原有空间

 #p2{
   width: 100%;
    height: 100px;
   background:blue;
   position: relative;
  top:-10px;
   /*margin-top:-10px;*/
 }

Paste_Image.png

当设置p2为负margin时，p2向上移动，p3也跟着向上移动，但是p2并不是完全覆盖住p1的内容，文字部分有重叠

#p2{
   width: 100%;
    height: 100px;
   background:blue;
   /*position: relative;
  top:-10px;*/
   margin-top:-10px;
 }

Paste_Image.png

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC是块级格式上下文，Block Format Content
在块格式化上下文中，从一个块容器的顶部开始，盒模型被一个接一个地垂直放置。两个兄弟盒之间的垂直距离是由“margin”决定的。在同一个块级格式上下文中，相邻块级框之间的垂直边距会塌陷，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
在块格式化上下文中，每个框的左外边缘与容器的左边缘接触（右向左格式化，右边缘接触）。即使在浮动的情况下也是如此（尽管框中的框可能由于浮动而收缩），除非框建立了一个新的块格式化上下文（在这种情况下，由于浮动，盒本身可能变得更窄）。

生成BFC的方法有：

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible( hidden,scroll,auto, )

BFC的用处主要有两个：

解决父子元素的边距合并问题
解决父子元素的间距合并问题，有三种方法：
1. 设置父元素的边框（可根据需要设置为transparent）;
2. 利用父元素的padding来代替子元素的margin；
3. 生成BFC
  以下用BFC来举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
      <h1>h1</h1>
    </div>
  </div>
</body>
</html>

.box1{
  width: 400px;
  height:500px;
  border: 1px solid red;
  overflow:auto;
}
.box3{
  width: 100px;
  height: 100px;
  background: yellow;
  margin:20px;
}

.box4{
  width: 100px;
  height: 100px;
  background: green;
  margin:20px;
}
h1{
  margin:20px;
}

Paste_Image.png

这里可以看到h1并没有像设想的那样与box4之间有20px的margin，通过设置overflow，让box4生成BFC，可以解决父子元素见的边距合并

.box4{
  width: 100px;
  height: 100px;
  background: green;
  margin:20px;
  overflow:auto;
}

Paste_Image.png

清除浮动
当子元素都设置了浮动时，如果父容器没有设置固定的高度和宽度，会造成父容器的高度塌陷

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
    </div>
  </div>
</body>
</html>

.box1{
  border: 1px solid red;
}
.box3{
  width: 100px;
  height: 100px;
  background: yellow;
  float: left;

}

.box4{
  width: 100px;
  height: 100px;
  background: green;  
  float: left;
}

Paste_Image.png

通过对box1设置overflow:auto，可以解决父容器高度塌陷的问题

.box1{
  border: 1px solid red;
  overflow:auto;
}

Paste_Image.png

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

当两个块级元素同属于一个BFC时，会发生外边距合并，水平的边距不会合并，只是vertical方向，如下举例：

.box1{
  border: 1px solid red;
}
.box3{
  width: 100px;
  height: 100px;
  background: blue;
  margin:20px;
}

.box4{
  width: 100px;
  height: 100px;
  background: green;  
  margin:20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
    </div>
  </div>
</body>
</html>

Paste_Image.png

例子中，对box3,4都设置了margin20px，但实际上两个box之间的margin只有20，这就是外边距合并；

解决相邻元素间的外边距合并，可以通过以下三种方法：

postion:absolute;
float:left;
display:inline-block;

这里用inline-block举例

.box3{
  width: 100px;
  height: 100px;
  background: blue;
  margin:20px;
  display:inline-block;
}

Paste_Image.png

可以看到，通过设置inline-block，两个box之间的margin达到了40px；

根据两个元素的边距间的数值取值不同，有以下规律：

两边均为正值——边距合并，实际效果为较大的margin值（包含两值相等）
两边均为负值值——边距合并，实际效果为较小的margin值（包含两值相等）
一边正，一边负——两只计算后，正常偏移；

上例的取值，正好是两边的margin值相等，以下分别列举了其他几种情况的例子

一边大，一边小，均为正值

.box1{
  border: 1px solid red;
}
.box3{
  width: 100px;
  height: 100px;
  background: blue;
  margin:30px;
}

.box4{
  width: 100px;
  height: 100px;
  background: green;  
  margin:20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
    </div>
  </div>
</body>
</html>

Paste_Image.png

通过审查元素可以看到，合并后，取的是较大值的margin作为合并后的margin；

一边正，一边负

.box1{  
  width: 600px;
  margin:0 auto;
  border:1px solid red;
}

.box3{
  width: 100px;
  height: 100px;
  background: blue;
  margin:30px;
}

.box4{
  width: 100px;
  height: 100px;
  background: green;  
  /*margin:-30px;*/
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
    </div>
  </div>
</body>
</html>

Paste_Image.png

当box不设置margin时，我们可以看到正常的box4位置
当box设置margin为-30时，可以看到box4的位置是在box3设置margin的基础上再负向移动的，正负值抵消，两者垂直方向没有margin；
一正一负的情况下，两者的值计算后正常偏移；

Paste_Image.png

两边都是负

.box1{  
  width: 600px;
  margin:0 auto;
  border:1px solid red;
}

.box3{
  width: 100px;
  height: 100px;
  background: blue;
  margin:30px;
}

.box4{
  width: 100px;
  height: 100px;
  background: green;  
  margin:-10px;
}

.box5{
  width: 100px;
  height: 100px;
  background: yellow;  
  /*margin:-10px;*/
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <div class="box3">
    </div>
    <div class="box4">
    </div>
    <div class="box5">
    </div>
  </div>
</body>
</html>

首先看box4设置负边距，box5未设置边距的效果

Paste_Image.png

当box也设置-10的边距时，可以看到两个边距合并，box4和box5之间边距为-10

.box5{
  width: 100px;
  height: 100px;
  background: yellow;  
  margin:-10px;
}

Paste_Image.png

当box5边距设置为-20px时，可以看到box4和box5垂直方向上边距为-20
所以，当两个边距均为负值时，取小的那个值作为合并后的边距

父子外边距的说明见“6”

8.代码

代码1
代码2
代码3
代码4

最后编辑于：2017.12.08 07:03:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

任务10——浮动定位

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

2.清除浮动指什么? 如何清除浮动? 两种以上方法

3.有几种定位方式？参考点是什么？使用场景是什么？

4.z-index 有什么作用? 如何使用?

5.position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

8.代码

推荐阅读更多精彩内容