CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

秒速五厘米 2022-05-13 09:10 236阅读 0赞

**1. 盒模型**

**和模型包括：content区、padding区、border区、margin区**

注意：padding和content区的颜色一样；border有自己的颜色；

**问：如果border是虚线，那么虚线之间的颜色是什么呢？**

**答：跟content、padding颜色一样**

![70][]

有趣的理解：盒模型三个区的颜色：content区是帝都，相邻的padding受content控制，颜色与content一致，而border太远，border管的地方由border自己决定（哪怕不设置，默认都透明色|白色），border不管的地方（border-style：dashed、dotted），还是归content管的

**2. position定位**

（1）absolute：脱离原来位置，有层级，高，产生bfc；相对于有定位的父级进行定位，没有定位的父级，相对于文档定位。

（2）relative：保留原来位置，有层级，但不高。不产生bfc；相对于自己原来的位置（在一个块内的位置，如果父级、祖父级移动，它也会跟着移动）

有趣的理解：position：relative；灵魂出窍，肉身还在。其他元素都可以看见肉身，都以肉身为准。

relative作为参照物，absolute作为定位。

（3）fixed：相对于屏幕定位，不管页面怎么移动，fixed的元素，相对于屏幕的位置是不变的。

**讨论：**

**（1）正常情况下，子级的整个盒模型（content、padding、border、margin）左上角与父级的content区的左上角重叠**

.father{
          width: 200px;
          height: 200px;
          border: 10px solid black;
          padding: 20px;
          overflow: hidden;
          white-space: nowrap;
          background: green;
        }
        .son{
          width: 100px;
          height: 100px;
          border: 5px dotted red;
          margin: 3px;
          background: yellow;
        }

父级：

![20190306204941207.png][]

子级：

![20190306204959703.png][]

效果：

![2019030620522740.png][]

**（2）父级是定位元素，子级position：absolute；那么子级的盒模型的左上角与父级的padding左上角重叠**

**（3）position：relative；在正常情况下（无定位的情况下），position：relative通过top和left或者right和bottom与原来位置进行定位**

**3. bfc：block format content块级元素格式上下文，改变了块级结构的内部块的排列方式，比如：给父级设置float：left，那么子级就会在父级内从左到右的排列。**

**块级元素的哪些属性可以触发bfc？**

float 除了none（left、right）  
overflow 除了visible（hidden，auto，scroll ）   
display (inline-block, flex, inline-flex，table-cell，table-caption)   
position值为（absolute，fixed）**由此可见，position：relative并没有改变盒模型的内部结构**

**4. margin的两个问题**

**父子级的margin-top取最大的那个值，作为他们的垂直距离**

**兄弟级的margin-top和marginbottom也是取最大的那个值，作为他们的垂直距离**

**（1）margin塌陷：**父子级的块级元素，垂直方向的margin，父子共用父子中margin值最大的那个，比如：父级的margin-top：100px；子级的margin-top：50px；那么父级和子级margin-top都是100px；

解决办法：父级触发bfc，父级是父级的margin-top，子级是子级的margin-top；

实例中：父级相对于文档，margin-top：100px；子级相对于父级，margin-top：50px；

![70 1][]                                                                            ![70 2][]

**（2）margin合并：**兄弟结构的块级元素，垂直方向上的margin取最大那个margin值。比如：上一个块级的margin-bottom：100px；下一个块级元素的margin-top：50px；那么两个块级元素的垂直margin距离是100px。

解决办法：给其中一个加一个触发bfc的父级，当然，你要是给另一个也加一个触发bfc的父级也可以。

实例：上一个块级元素的margin-bottom：100px；下一个块级元素的margin-top：30px；

![70 3][]![70 4][]

实例效果：

![70 5][]                                                                              ![70 6][]

**注意：在解决margin合并的时候，加了一个触发bfc的父级HTML标签，这是在HTML结构上添加标签，修改结构，不好。所以，margin合并，不要去解决，就使用margin的这种特性。**

**5. float**

（1）特性：给父级设置float，那么子级就会在父级内依次排列，每一行不可溢出父级的宽度，换行排列。

（2）特性：子级元素之间没有文本间隙8px。

（3）特性：display：inline-block。

**（4）产生浮动流：普通的块级元素看不见产生浮动流的元素，所以会与浮动元素处在同一位置（重叠）的下面**

**（5）清除浮动流：**

实例代码：由于wrapper里面的子级是float，产生了浮动流，这时，父级wrapper看不到自己的子级，高度不能被撑开，所以要在子级的后面借用一个p标签，清除左右两侧的浮动流。

**效果：注意此处的p标签失去了段落效果。**

![70 7][]

**注意：坚决不能采用添加标签的形式解决问题，清除浮动流的最好方法：**[用伪元素清除浮动流][Link 1]

像上图那种效果，父级包裹有浮动流的子级，也可以将父级触发bfc，这样就可以包裹子级了

（1）加position：absolute

效果：

![70 8][]

（2）加overflow：hidden

效果：

![70 9][]

**最后还是想说一点：div的display被改为inline-block后，宽、高都由内容决定。**

[70]: /images/20220513/a95d7f31d4a444c397d94603cf85e915.png
[20190306204941207.png]: /images/20220513/31900f48b46e4b7aad6628675c363a9b.png
[20190306204959703.png]: /images/20220513/2e8ba0d7ba7d48b0afae0d6b8745ca89.png
[2019030620522740.png]: /images/20220513/185f5ede2e504e6f9a2ea194ffbfe6d4.png
[70 1]: https://img-blog.csdn.net/20180911200340331?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220513/880c0665899d4b34a2075aea74655daa.png
[70 3]: https://img-blog.csdn.net/20180911201735574?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220513/00887b8321a74e248db6d4254c535a10.png
[70 5]: https://img-blog.csdn.net/20180911201637508?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: /images/20220513/0d4170fe93ce4a1bbcb8cbc56837aabe.png
[70 7]: /images/20220513/77512d9dfdcb4eb0a31afa47c9e29557.png
[Link 1]: https://blog.csdn.net/zyz00000000/article/details/82633164
[70 8]: /images/20220513/11b2d58a22bb44be89fc06cfbeea96c3.png
[70 9]: /images/20220513/26b03fe46b5f4a3084cdae503bf413b3.png