入门10 浮动定位BFC边距合并

2017-10-12  本文已影响7人  512a36a11b8c
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征：

  1. 不占据普通文档流的空间。
  2. 浮动元素的左（右）外边界不能超过其包含块的左（右）内边界。
  3. 浮动元素的左（右）外边界必须是源文档中之前出现的左浮动（右浮动）的元素的右（左）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
  4. 左浮动元素的右外边界不会在其右边浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
  5. 一个浮动元素的顶端不能比其父元素的内顶端更高。
  6. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
  7. 如果文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成的框的任何行框的顶端更高。
  8. 如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，这个浮动元素会向下浮动到之前浮动元素下面的某一点。
  9. 浮动元素必须尽可能高地放置。
  10. 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。
  11. inline元素设置浮动，改变inline的display使得它像个block-level。
  12. 在重叠上，浮动元素会遮盖block-level元素的背景，不会遮盖inline元素。

内边界:指盒模型中的content边界。外边界：指盒模型中的margin边界。
影响：

  1. 非BFC的正常文档流父元素会"感受"不到浮动元素的存在，从而产生"高度塌陷"。
  2. 其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
  3. 普通元素(非inline-level)会无视浮动元素的存在,从而占据浮动元素的"原来的位置"。
  4. 文字(也既inline-level)级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样。

文档流是指按照从左到右、从上到下的布局方式，又称普通流、正常流、标准文档流。标准化的语言是：文档流是浏览器按照 HTML 的内容按顺序解析并呈现，遇到行内元素就往行内放，遇到块级元素就空一行放置，一次排列。

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

清除浮动是指清除浮动元素给父元素造成的高度塌陷和给其他元素产生的影响。
方法一：给父元素设置after伪元素。

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

方法二：创建BFC，将浮动元素限定在BFC内，避免影响其他元素。
overflow: hidden/auto/scroll
float: left/right
position: absolute/fixed
display: inline-block/table-cell/table-caption

清除浮动指元素的侧边不允许出现浮动元素，从而使得浮动元素的不占据普通文档流空间的使得父元素的高度塌陷问题得到解决，主要通过clear属性实现。

clear:指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

方法：

  1. 设置浮动包含块的父元素height值。
  2. 使得含块的父元素变成BFC。
  3. 通过添加:after伪元素，然后在伪元素上设置clear属性来实现。
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
定位方式 实现方式 使用场景
static 默认布局，按照文档流定位 默认布局
relative 相对于元素自身正常位置进行定位，元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移 适用于层叠效果
absolute 绝对定位，相对于有除static外定位属性的第一个父元素偏移，absolute定位元素会脱离文档流 适用于小区块的布局使用频繁
fixed 相对浏览器窗口定位，设置的偏移属性，是相对于浏览器窗口的位置 适用于广告等意图一直出现在用户眼前的信息
4. z-index 有什么作用? 如何使用?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

值 描述
auto 默认，堆叠顺序与父元素相等
number 根据数值确定元素的堆叠顺序
inherit 从父元素继承z-index的值

css层叠顺序

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

position:relative相对自己原本的位置偏移，不影响其它普通流中元素的位置。

margin：除了让元素自身发生偏移还影响其它普通流中的元素。

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

BFC：块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

形成条件：

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

在以下场景中外边距合并：

  1. 同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
  2. 父子元素的外边距合并。
  3. 空元素的外边距合并。

外边距合并规则：

不让相邻元素外边距合并的方法：

总结：

  1. 这些margin都处于普通流中，并在同一个BFC中；
  2. 这些margin没有被非空内容、padding、border 或 clear 分隔开；
  3. 这些margin在垂直方向上是毗邻的，包括以下几种情况：
  1. 例外的情况
Paste_Image.png
上一篇下一篇

猜你喜欢

热点阅读