任务10——浮动定位

作者: upup_dayday | 来源:发表于2017-07-04 22:43 被阅读0次

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

任务10——浮动定位

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

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

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

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

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

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

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

8.代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读