HTML和CSS面试题第35题

position 跟 display、margin collapse、overflow、float 这些特性相互叠加

一、‘display’、‘position’ 和 ‘float’ 的相互关系

下图：

设定值	转换后
inline-table	table
inline, inline-block,run-in,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption	block
其他	保持设定值

1、position:absolute 和 position:fixed 优先级最高，有它存在的时候，浮动不起作用

<style>
.container {width: 300px;height: 300px;border: 1px solid #ff0000;
}
.item {width: 100px;height: 100px;border: 1px solid yellowgreen;background-color: yellowgreen;position: fixed;float: right;
}
</style><div class="container"><div class="item"></div>
</div>

2、display值为none

当元素display值为none时，元素不产生框，float和position都不起作用。

3、float值不为none

当元素有了浮动属性（float不为none，是left或right）后，该框浮动且display值会按上表转换。例如，span是行内元素，设置浮动后会变为块级元素。

4、元素为根元素

如果元素是根元素，设置的display也会按上表进行转换。否则，元素的display值为指定值或默认值。

二、position 跟 display、overflow、float下的 margin collapse

补充：margin collapse 外边距折叠 指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距

margin 毗邻，可以归结为以下两点：

这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
这些 margin 都处于普通流中。

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

参与折叠的 margin 都是正值

<div style="height:50px; margin-bottom:50px;width:50px; background-color: red;">A</div>
<div style="height:50px;margin-top:100px; width:50px; background-color: green;">B</div>

在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。

参与折叠的 margin 都是负值

<div style="height:100px; margin-bottom:-75px;width:100px; background-color: red;">A</div>
<div style="height:100px;margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。

参与折叠的 margin 中有正值，有负值

<div style="height:50px; margin-bottom:-50px;width:50px; background-color: red;">A</div>
<div style="height:50px;margin-top:100px; width:50px; background-color: green;">B</div>

先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

相邻的 margin 要一起参与计算，不得分步计算

<div style="margin:50px 0;background-color:green; width:50px;"><div style="margin:-60px 0;"><div style="margin:150px 0;">A</div></div>
</div>
<div style="margin:-100px 0;background-color:green; width:50px;"><div style="margin:-120px 0;"><div style="margin:200px 0;">B</div></div>
</div>

A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组：

正值：50px，150px，200px
负值：-60px，-100px，-120px

根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80

此时我们的解决方法就是：在元素能够触发格式化上下文（BFC）

给父元素添加下列 css 样式的其中一个即可
- border-top: 1px solid transparent;
- padding-top: 1px;
- display: inline-block;
- float: left;
- position: absolute;
- position: fixed;
- overflow: scroll;
对于兄弟元素而言：
- 给其中一个元素添加父元素，然后触发BFC规则（不推荐）
- 只设置其中一个块级元素的margin值即可（推荐）

HTML和CSS面试题第35题相关推荐

[剑指offer]面试题第[35]题[Leetcode][第138题][JAVA][复杂链表的复制][暴力][HashMap][复制链表]
[问题描述][中等] [解答思路] 1. 暴力直接复制将链表从头节点一个一个复制下去, 在根据记录的总长度num,遍历原来的每个节点的random到尾节点个数count,然后顺序遍历找到新链表的该 ...
105道 CSS 面试题，助你查漏补缺
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?[1] 2.CS ...
【面试题】755- 104道 CSS 面试题，助你查漏补缺（上）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
104道 CSS 面试题，助你查漏补缺（上）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
值得收藏的 104个 CSS 面试题
给大家分享104个 CSS 面试题,助你查漏补缺.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助 CSS 面试知识点总结最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本 ...
104道 CSS 面试题
104道 CSS 面试题 (给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Not ...
104道 CSS 面试题，助你查漏补缺（下）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
【面试题】104道 CSS 面试题，助你查漏补缺（下）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
程序员面试题精选100题(48)-二叉树两结点的最低共同父结点[数据结构]
题目:二叉树的结点定义如下: struct TreeNode { int m_nvalue; TreeNode* m_pLeft; TreeNode* m_pRight; }; 输入二叉树中的两个结点 ...
第十一届蓝桥杯省赛 C++组试题第2题求完数
/* 第十一届蓝桥杯省赛C++组试题精讲第2题求完数因子:因子也叫因数,例如3×5=15,那么3和5是15的因子. 同时15×1=15,那么1和15也是15的因子. 1,3,5,15 这四个因子是1 ...

HTML和CSS面试题第35题

position 跟 display、margin collapse、overflow、float 这些特性相互叠加

HTML和CSS面试题第35题相关推荐

最新文章

热门文章