这是我的第一篇博客，记录我的css自学心得！

曾经终败给现在 2022-05-31 00:55 162阅读 0赞

# css-盒子模型学习心得 #

## 写在前面: ##

这是我的第一篇博客心得，希望能对你们有用，由于知识有限，有错误的地方还请指正，定感激不尽！下面，言归正传，一大波干货正朝你而来。

## css盒子模型的创建 ##

一个盒子包括四个区域：

1、内容区（content)

2、内边距（padding）

3、边框（border）

4、外边距（margin）

盒子模型直接上图了，四个区域已经很清晰就不过多解释了。

![SouthEast][]

创建一个简单的盒子模型，我一般都是这样写的：

![SouthEast 1][]

盒子模型中常见的几类问题以及解决方案

（一）两个或多个毗邻的普通流中的块元素垂直方向上的 margin 折叠问题

解决方案：

**        1.**浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠**（注意这里指的是上下相邻的元素）。  
  
     2.**创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠**（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠**）。

**简单的来说就是开启BFC(Block Formatting Content)，触发的直接做法是：**

1.设置元素浮动。

2.overflow不为visible。  
  3.display设为‘inline-block’。  
  4. position既不是static也不是relative。  
  5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context。

直接上图了，我一般都是这样写的：

![SouthEast 2][]

### （二）高度塌陷问题 ###

###     首先得说下什么是高度塌陷？ ###

在文档流中，父元素的高度默认是被子元素撑开的。当子元素被设置浮动后，其脱离文档流，使父元素出现高度塌陷，导致整个页面布局混乱。

解决方案：

1.可用clear属性来清除其他元素对当前元素的影响

clear属性的可选值有：

none：默认值，不清除浮动。

left：清除左侧元素的浮动对当前元素的影响。

right：清除右侧元素的浮动对当前元素的影响。

both：清除两侧元素的浮动对当前元素的影响。

**  注意：clear只适用于兄弟元素之间**

**直接上图：**

**高度塌陷之前及运行画面：**

### ![SouthEast 3][]![SouthEast 4][] ###

**设置子元素浮动后及运行画面：**

![SouthEast 5][] ![SouthEast 6][]

可见已经出现了高度塌陷

现在分别采用三种方案进行处理：

## 第一种方案：用clear属性，将其设置成可选值中的both ##

**代码和效果图如下：**

![SouthEast 7][]![SouthEast 8][]

## 第二种方案：可以在高度塌陷的父元素最后，添加一个空白的块元素，由于这个块元素并没有浮动，故其可撑起父元素高度。然后再对其进行清除浮动。基本没有副作用，有一个带来的小问题就是：会在页面中添加多余的结构。 ##

代码和效果图如下：与第一种方案的的代码和效果图是相同的，这里将不再重复。

## 第三种方案：可通过after伪类向元素的最后添加一个空白的块元素，然后对其进行清除浮动。这种方法是几乎没有副作用的，推荐使用。 ##

**代码和效果图如下：**

![SouthEast 9][]![SouthEast 10][]

## 总结 ##

第一次写博客，还是花了很多时间也很认真的在写。如果以后在遇到问题，解决以后我还会来分享的，希望这些分享对那些初步开始学习css&html的同学有些帮助。喜欢的话，就给个赞吧！作为奖励，我以后会经常分享一些干货的。

**更多精彩内容请关注公众号：干货分享录**

![20190413174801384.png][]

[SouthEast]: /images/20220531/bd9a9c44c8524ca097bfbf37f4de4d1f.png
[SouthEast 1]: /images/20220531/ee5f01ddf51244e9a7727dbf33dfa29b.png
[SouthEast 2]: /images/20220531/c0b1734158084456b9ef02e990a26cd7.png
[SouthEast 3]: https://img-blog.csdn.net/20180201235933282?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VuY2hhbmdsYW4xNTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: /images/20220531/c2d3db12a4424e0f87a346f2891e122f.png
[SouthEast 5]: https://img-blog.csdn.net/20180202000555818?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VuY2hhbmdsYW4xNTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 6]: /images/20220531/9dede5476a204cddaca8dc7be7b9dcc0.png
[SouthEast 7]: https://img-blog.csdn.net/20180202142624961?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VuY2hhbmdsYW4xNTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 8]: /images/20220531/d0b11aafdcdb47809026119e36de7d69.png
[SouthEast 9]: https://img-blog.csdn.net/20180202144042295?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VuY2hhbmdsYW4xNTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 10]: /images/20220531/7b896397b2ba4844977dddb0071ec0c6.png
[20190413174801384.png]: /images/20220531/107fb9fbd2614a22870997981292654e.png