美文网首页
入门任务10--浮动定位BFC边距合并

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

作者: _小黑 | 来源:发表于2017-11-08 13:30 被阅读27次
    1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
      一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动中移除,尽管仍然保持部分的流动性。 父容器下的子元素如果都出现浮动,会造成父元素容器高度塌陷的问题;但是浮动还是以父容器的内边框为界,并且会出现边框合并的现象。
      对浮动元素:浮动的框可以左右移动(根据float值而定),直到他的外边缘碰到包含框或另一个浮动元素的框边缘。
      对普通元素: 浮动会让元素脱离普通流,如果浮动的元素后面有普通元素,name这个元素的框会表现的像浮动元素没有存在一样。
      对文本影响: 普通元素会忽略浮动元素,但文本内容会移动,给浮动元素留出空间,会有文本行框围绕浮动元素的现象

    2. 清除浮动指什么? 如何清除浮动? 两种以上方法
      清除浮动指的是在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
      方法一: 在浮动元素后面加上一个类为clear的空元素,让它的属性为clear: both;
      如图

      image.png
      代码链接http://js.jirengu.com/hawav/5/edit
      优点:简单,代码少,浏览器兼容性好。
      缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
      方法二:给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用
    3. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

    position: static;该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    position: relative;
    该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。

    position: absolute;
    不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
    position: fixed;
    不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

    position: sticky
    盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

    • absolute偏移的参考点首先是父元素,然后检查该父元素是否具有position属性,若具有position属性,则以该父元素为参考点进行偏移,若不具有则继续往上一级找,直到body标签为止。
      relative偏移的参考点是自身位置,是拿偏移前的位置与偏移后的位置进行比较,比如top10px,表现出来的其实是向下移动10px。
      fixed偏移的参考点是浏览器窗口。
    1. z-index 有什么作用? 如何使用?
      z-index指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
      定义z-index属性,值必须为整数或者是auto.
    2. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
      使用relative偏移只是看上去位置发生了改变,但实际文档流的位置还是没有变化,但是负margin使得文档流位置发生了变化,从而影响了后续的元素的文档位置。
      如图: image.png
      链接: http://js.jirengu.com/zerir/1/edit?html,css,output
    1. BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
      是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干。
      BFC的触发条件:
    • 根元素或其它包含它的元素

    • 浮动元素 (元素的 float 不是 none)

    • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)

    • 内联块 (元素具有 display: inline-block)

    • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)

    • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

    • 具有overflow 且值不是 visible 的块元素,

    • display: flow-root

    • column-span: all 应当总是会创建一个新的格式化上下文,即便具有column-span: all 的元素并不被包裹在一个多列容器中。
      BFC的作用:

    • 可以用来实现两栏布局
      如图 链接http://js.jirengu.com/xufof/1/edit?html,css,output

      image.png
    • 解决父元素高度塌陷

      image.png
      代码链接 http://js.jirengu.com/yowuq/6/edit?html,css,output
    • 解决相邻垂直窗口的margin合并

      image.png
      代码链接http://js.jirengu.com/pibux/1/edit
    1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
      外边距合并指的是,两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻,兄弟关系相邻,甚至如果一个元素内部没有东西,自身的上下边距相遇时都会发生外边距合并。
      合并的结果为: 当两个外边距都是正数时,取两者之中的较大者;当两个外边距都是负数时,取两者之间绝对值较大者;当两个外边距一正一负时,取的是两者的和。
      相邻的外边距合并:
    • 把元素浮动起来,就不会与其他元素的外边距合并代码

      image.png
    • 把display 设置为inline-block 也不会合并


      image.png
    • 父子关系的合并

      image.png
      http://js.jirengu.com/jubad/3/edit

    代码1 https://jsbin.com/cereso/4/edit?html,css,output
    代码2 https://jsbin.com/gijocor/2/edit?html,css,output
    代码3 https://jsbin.com/cejitof/edit?html,css,output
    代码4 http://js.jirengu.com/zacomokuvu/2/edit?html,css,output

    相关文章

      网友评论

          本文标题:入门任务10--浮动定位BFC边距合并

          本文链接:https://www.haomeiwen.com/subject/ddlopxtx.html