Day 42/100（网易笔试）position跟display，margin collapse叠加使用会怎么样

写在前面的话

功不唐捐，努力不会白费

在面试的过程中，复习过的经常会碰到~

（一）题目：

position跟display，margin collapse，overflow，float这些特性叠加使用会怎么样？

 

（二）分类讨论

1、position,display和float

1）如果一个元素的display属性被设置为none，那么就不会生成元素对应的box，这种情况下，float和position被忽略

2）否则（display非none），如果一个元素的position属性被设置为absolute或者fixed（都是绝对定位），这种情况下，float被忽略（float计算的值为none），display属性的值根据下表自动计算。box的位置取决于属性top，right，bottom，left以及box的容器

3）否则（display非none，并且position非absolute、fixed），如果float的值不为null（为left或者right），那么box是浮动的并且display的值根据下表来计算

4）否则（display非none，并且position非absolute、fixed，float为none），如果元素是根元素，display的值根据下表来计算。（这种情况下有一个例外：在CSS2.1中定义，当display被指定的值是list-item时，计算结果的display的值为block或者list-item）

5）否则（display非none，并且position非absolute、fixed，float为none，不是根元素），那么就按照被指定的display的属性值来显示。

 

转换对应表

表格 display属性转换： 

指定值 inline-table   转成table

指定值 inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block    转成block

其他任何的指定值都保持不变

 

 

2、margin collapse，overflow

外边距折叠（Margin Collapse）

 

（三）相关联想

1、想到了Css如何布局（左边200px，剩下的自适应宽度）

考察的是BFC（Block Formatting Context）

1）子DOM

左Block  float：left

父级

display：flex

2、CSS3的特性——两种盒子模型：

1）标准盒模型

box-sizing:content-box;（宽度=content+padding）

2）IE浏览器下盒模型

box-sizing:border-box;（宽度=content+padding+border）

3）清除浮动

方法一：

.clear {

  clear: both;

  }

<div class="clear"></div>

方法二：

.clearfix:after{

  content: "020";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden; 

  }

.clearfix {

  /* 触发 hasLayout */

  zoom: 1;

  }

 

以上

 

参考链接：

https://blog.csdn.net/sinat_36422236/article/details/88763187

https://www.cnblogs.com/wulinzi/p/8426383.html

https://tech.youzan.com/css-margin-collapse/