浮动+定位+BFC边距合并


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

浮动元素

浮动元素是设置float为非none值的元素,这时该元素会自动被设置成块元素,可以设置宽度、高度以及边距。浮动元素,顾名思义,使该元素浮动在其他元素之上,离开了原来的文档流,直到浮动到父元素的左右边距(上下边距不受限制)或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻,表面上跟内联元素似的。而非浮动元素则相对复杂一些,分一下两种情况:浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时,行内元素边框、背景和内容都在该浮动元素“之上”显示,若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时,该块级元素边框和背景在该浮动元素“之下”显示,只有内容在浮动元素不在非浮动元素的部分显示。

  • 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示;
image.png
  • 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个(实例中为父元素)任意非浮动元素靠齐;
image.png
  • 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
image.png
浮动元素的影响
  • 对其父元素的影响:
    • 对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷
  • 对其兄弟元素(非浮动)的影响
    • 如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。
    • 如果如果兄弟元素为内联元素,则元素会环绕浮动元素排列。
  • 对其兄弟元素(浮动)的影响
    • 同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面。
    • 反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下。
  • 对子元素的影响
    • 当一个元素浮动时,在没有清除浮动的情况下,它无法撑开其父元素,但它可以让自己的浮动子元素撑开它自身,并且在没有定义具体宽度情况下,使自身的宽度从100%变为自适应(浮动元素display:block)。其高度和宽度均为浮动元素高度、宽度和非浮动元素高度、宽度之间的最大值。

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

浮动

浮动:一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开
清除浮动的方法
  • 1.给浮动的元素的祖先元素加上高度
    • 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了。
  • 2.添加新的元素 、应用 clear:both
HTML:
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
(纠正: padding不会受影响)
  • 3.父级div定义 overflow非 visible
 HTML:
<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS:
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
  • 4.:after 方法
.outer {
    zoom:1;
}    /*==for IE6/7 Maxthon2==*/
.outer :after {
    clear:both;
    content:'.';
    display:block;
    width: 0;height: 0;
    visibility:hidden;
}   /*==for FF/chrome/opera/IE8==*/

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

static(默认)

  • 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。
  • 一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

relative(相对定位)

  • 在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。
  • 有一点需要注意的是,相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

absolute(绝对定位)

  • 如果你想在一个文档(Document)中将一个元素放至指定位置,你可以使用absolute来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。
  • 绝对定位会使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充。

fixed(固定定位)

  • 我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果我想让一个元素定位的参照物总是整个文档(viewport),怎么办呢?答案是使用fixed定位,fixed定位的参照物总是当前的文档。利用fixed定位,我们很容易让一个div定位在浏览器文档的左上,右上等方位。比如你想添加一个信息提示的div,并将该div固定在右上方,你可以使用以下css
    .element { position:fixed; top:2%; right:2%; }

float(浮动)

mix relative and absolute(混合相对定位和绝对定位)

  • 如果对一个父元素设置relative,而对它的一个子元素设置absolute,则子元素的绝对定位的参照物为父元素。

reference


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

z-index

  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index
  • 层级关系的比较
    • 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。
    • 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。
    • IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。
    • z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。
  • 顺序规则
    • 如果不对节点设定 position 属性,位于文档流后面的节点会遮盖前面的节点。
  • 定位规则
    • 如果将 position 设为 static,位于文档流后面的节点依然会遮盖前面的节点浮动,所以 position:static 不会影响节点的遮盖关系。
    • 如果将 position 设为 relative (相对定位),absolute (绝对定位) 或者 fixed (固定定位),这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点,说明前者比后者的默认层级高。
    • 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.
html
<div id="a">
       <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>
image.png
  • 参与规则
    • 不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
  • 默认值规则
    • 如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
  • 从父规则
    (1)如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.
<div id="a" style="position:relative;z-index:1;">
        <div id="a-1">A-1</div>
</div>
<div id="b" style="position:relative;z-index:0;">
        <div id="b-1">B-1</div>
</div>
image.png

(2)如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

image.png

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

position:relative

  • 在static的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。
  • 相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

负margin

  • 使元素位置偏移,使元素在文档流中的位置发生了改变,其后的元素受其影响。

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

BFC--块级格式化上下文

BFC--块级格式化上下文


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

BFC--块级格式化上下文

BFC--块级格式化上下文

margin重叠 :

  • margin参数:上右下左(4个值),其他:四个边距两两对称,比如3个值时,分别对应上右下, 左边边距和右边值一样。

  • margin折叠结果:

    • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
    • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
    • 两个外边距一正一负时,折叠结果是两者的相加的和。

推荐阅读更多精彩内容

  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 任何定义为float的元素,都可以...
    QQQQQCY阅读 58评论 0 0
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 420评论 0 2
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素脱离普通文档流,普通...
    山门龙龙阅读 65评论 0 2
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 脱离正常文档流,沿其容器的左侧...
    _Dot912阅读 310评论 0 3
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:CSS设计flo...
    饥人谷_邵征鹏阅读 102评论 0 0