task 11

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

  1. 父子外边距合并:父元素无边框,和子元素相邻。
    如果父元素有边框,或有内边距则不会出现合并;
  2. 相邻元素间的合并:有外边距则会合并;
    设置元素为float,inline-block,overflow:auto(BFC)则可以消除合并。


    Paste_Image.png

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

  1. 设置font-size:0;
  2. 去除inline-block元素标签间因空格回车产生的间隔;
  3. 设置浮动;
  4. 使用负margin;

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

形成BFC,计算了浮动元素的高度。

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

BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
形成BFC的条件:
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible
BFC的作用
1.防止margin重叠
2.清除内部浮动
3.防止与float元素重叠

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

原因:浮动元素脱离了文档流,父容器感知不到内部元素的存在。
解决办法:父容器形成BFC;在浮动元素后加入使用了clear:both的伪元素(内容为空)如:after。

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

Paste_Image.png

代码题

code1
code2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 在CSS当中,相...
    dengpan阅读 596评论 0 0
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 896评论 0 4
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 670评论 0 3
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 963评论 0 2