浮动定位BFC边距合并

2017-03-15 本文已影响0人 S级食材咩咩羊

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

浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中。
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
其他浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其他浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

清除浮动指解决父容器高度塌陷问题，让父元素在视觉上包含子元素的效果
1.使用css在父元素的最后增加一个空的div
2.使父容器形成BCF
- float：left, right
- overflow: hidden, auto, scroll
- display: table-cell, table-caption, inline-block
- position: absolute, fixed

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

1.普通流：位置由元素在html中的位置决定，参考点是文档流中的位置，在一般场景下使用。占据文档空间。
2.相对定位：对应position属性的relative值，参考点为元素自身在文档流中的位置，需要对元素自身位置进行微调时使用。占据原来的文档空间
3.绝对定位：对应position属性的absolute值，参考点为距离最近的非static祖先元素，在需要元素参照特定参照物进行定位时使用。无文档空间。
4.固定定位：对应position属性的fixed值，参考点为视口，在需要在窗口固定位置显示时使用。无文档空间。

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

z-index控制叠放顺序，z-index越高，元素位置越靠上。
直接赋值使用。

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

position:relative占据原来的文档空间，视觉上偏移，不影响普通流中元素的位置
负margin占据自身的文档空间，影响其他普通流中的元素

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

BFC：Block Format Content，块级格式化上下文
- float：left, right
- overflow: hidden, auto, scroll
- display: table-cell, table-caption, inline-block
- position: absolute, fixed
作用
- BFC可以阻止垂直外边距折叠

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

.ct{
  background: pink;
  margin: 10px;
  overflow: auto; //生成BFC
}

Paste_Image.png

BFC不会重叠浮动元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="aside"></div>
    <div class="content">122222222222222222222#2.清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指解决父容器高度塌陷问题，让父元素在视觉上包含子元素的效果
</div>
  </div>
</body>
</html>

.ct{
   border: 1px solid;
}

.aside{
  width: 50px;
  height: 50px;
  background: red;
  float: left;
}
.content{
  background: yellow;
  overflow: hidden;
}

Paste_Image.png

BFC可以包含浮动

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

.ct{
   background:blue;
   display:inline-block;
}

.box{
  width:100px;
  height:100px;
  border: 1px solid red;
  float:left
}

Paste_Image.png

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

外边距合并：当两个垂直外边距相遇时，他们形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
父容器形成BFC
参考6中的垂直外边距合并

浮动定位BFC边距合并

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

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

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

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

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

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

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

猜你喜欢

热点阅读