css position相关问题延伸

怼烎@ 2022-09-25 07:18 86阅读 0赞

**一、'display'、'position' 和 'float' 的相互关系**

首先我们先来看下这3个属性。

**display 属性:**规定元素应该生成的框的类型。  
 block 象块类型元素一样显示；  
none 缺省值；  
inline 象行内元素类型一样显示；  
 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示；  
list-item 象块类型元素一样显示，并添加样式列表标记 （display 还有很多其他值设置，读者自行查找）。

**position 属性:**规定元素的定位类型。  
absolute表示生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；  
fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位；  
relative生成相对定位的元素，相对于其正常位置进行定位；  
static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

**float:**也是是一种布局方式，它定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 在布局过程中也经常会使用它来达到左右并排布局的效果。  
  
**'display'、'position' 和 'float' 的相互关系**

### 1. 'display' 的值为 'none' ###

如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。

### 2. 'position' 的值是 'absolute' 或 'fixed' ###

如果 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float'无效；

'float' 计算后的值应该是 'none'，并且，'display' 会被按照下表设置。

框的位置将由 'top'，'right'，'bottom' 和 'left' 属性和该框的包含块确定。

也就是说，当元素是绝对定位时，浮动失效，'display' 会被按规则重置。

<table> 
 <tbody> 
  <tr> 
   <th><span style="font-family:'courier new',courier"><span style="font-family:'courier new',courier"><span style="font-family:'courier new',courier">设定值</span></span></span></th> 
   <th><span style="font-family:'courier new',courier">计算值</span></th> 
  </tr> 
  <tr> 
   <td><span style="font-family:'courier new',courier">inline-table</span></td> 
   <td><span style="font-family:'courier new',courier">table</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:'courier new',courier">inline, run-in, table-row-group, table-column, table-column-group, table-header-group,&nbsp;</span><br> <span style="font-family:'courier new',courier">table-footer-group, table-row, table-cell, table-caption, inline-block</span></td> 
   <td><span style="font-family:'courier new',courier">block</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:'courier new',courier">其他</span></td> 
   <td><span style="font-family:'courier new',courier">同设定值</span></td> 
  </tr> 
 </tbody> 
</table>

**display置换表**

### 3. 'float' 的值不是 "none" ###

'float' 的值不是 "none"，该框浮动并且 'display' 会被按照转换对应表设置。

### 4. 元素是根元素 ###

元素是根元素，'display' 的值按照转换对应表设置。

### **二、position跟display、overflow、float下的margin collapse。**  margin collapse，即外边距折叠 ###

在css2.1中，水平的margin不会被折叠。

垂直margin可能在一些盒模型中被折叠：

**1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。**

> 最终的margin值计算方法如下：
> 
> a、全部都为正值，取最大者；
> 
> b、不全是正值，则都取绝对值，然后用正值减去最大值；
> 
> c、没有正值，则都取绝对值，然后用0减去最大值。 注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

### 2.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 ###

> 浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。
> 
> 浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。
> 
>     <div style="margin-bottom:50px;width:50px; height:50px; background-color:green;">A</div>
>     <div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
>         <div style="margin-top:50px;background-color:gold;">B</div>
>     </div>
> 
>  
> 
>   
> 
> 
> 示意图：  
> ![margin_20c5.png][]
> 
> 两个绿色的块儿之间，相距100px，而若 B 和它的浮动包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，显然，没有发生折叠。inline-block 元素、绝对定位元素的 margin同样如此， 不会和垂直方向上其他元素的 margin 折叠。

### 3.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠 ###

以 “overflow : hidden” 的元素为例：

若 B 和它的 "overflow:hidden" 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生。

示意图：  
![margin_20c6.png][]

### 4.元素自身的 margin-bottom 和 margin-top 相邻时也会折叠 ###

自身 margin-bottom 和 margin-top 相邻，只能是自身内容为空，垂直方向上 border、padding 为 0。

示例：

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。

示意图：  
![margin_20c7.png][]

[margin_20c5.png]: http://www.w3help.org/zh-cn/kb/006/006/margin%20c5.png
[margin_20c6.png]: http://www.w3help.org/zh-cn/kb/006/006/margin%20c6.png
[margin_20c7.png]: http://www.w3help.org/zh-cn/kb/006/006/margin%20c7.png