inline-block、BFC、边距合并

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

  • 相邻元素
    当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。
inline-block、BFC、边距合并_第1张图片
相邻元素外边距合并
  • 父子元素
    父子元素如果都有上边距,会合并为其中较大的那一个。
inline-block、BFC、边距合并_第2张图片
父子元素外边距合并
  • 单个元素
    如果一个元素没有内容,也没有内边距和边框,那么它的上下外边距也会合并。
inline-block、BFC、边距合并_第3张图片

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

  • 父子元素:
    为父元素创建BFC
    为父元素设置相应的padding或border
  • 兄弟元素 :
    给兄弟元素添加float属性
    给兄弟元素添加position: absolute
    给兄弟元素添加display: inline-block
inline-block、BFC、边距合并_第4张图片
设置浮动,可以和之前父子边距合并比较一下

2.去除inline-block内缝隙有哪几种常见方法?

1.删去空格,使标签接一起。
2.负margin,但是,第一个元素会突出边框一点,另外设置第一个元素margin-left往回缩。
3.浮动,边框塌陷,父元素加overflow:auto
4.父元素fontsize设为0,子元素一定要重新设置字体大小⤵️


inline-block、BFC、边距合并_第5张图片
父元素fontsize设为0,子元素一定要重新设置字体大小

3.父容器使用overflow: auto| hidden撑开高度的原理是什么?

在父容器使用overflow:auto|hidden后,会姜父容器转化为BFC,因为计算BFC的高度时,浮动元素也参与计算,所以就能撑开。


4.BFC是什么?如何形成BFC,有什么作用?

BFC 定义:
  BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  BFC布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算。
  • 形成BFC

设置float,值不为”none”
设置overflow,值不为”visible”(hidden,auto,scroll)
设置display的值为 “table-cell”, “table-caption”,或 “inline-block”
设置position,值不为 “static” 或 “relative”(absolute,fixed)

作用:清除浮动,使外边距不发生合并.

5.浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法

  • 当没有设置任何高度宽度的父容器下只包含浮动元素,父元素高度就会坍塌,因为子元素设置浮动以后就脱离了文档流,父容器边框忽略了浮动元素。

1.浮动父级元素,父级元素的高度就会扩大,直到完全包含它里面的浮动元素。如果使用这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。
2.使用overflow:hidden,zoom:1 。overflow:hidden属性会强制父级元素扩大到包含浮动元素,zoom:1只是触发ie6
3.使用:after伪类清除,不会影响其他任何样式,通用性强。


6.以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?

inline-block、BFC、边距合并_第6张图片
题6

第一个是使用:after伪类添加一个没内容的空行内元素,转化为块状元素,然后再清除浮动;
第二个是加了一个class="clearfix"来清除浮动,里面*zoom:1;为了兼容性,在ie6,7上生效;用于页面放大缩小。

区别是BFC撑开空间是使父容器本身形成一个可以包含浮动元素的独立的空间,上述方法只是撑开了内容。


任务代码1
任务代码2


             本文版权归作者饥人谷_Josh和饥人谷所有,转载请注明来源

你可能感兴趣的:(inline-block、BFC、边距合并)