这是我的第一篇博客，记录我的css自学心得！
css-盒子模型学习心得
写在前面:
这是我的第一篇博客心得，希望能对你们有用，由于知识有限，有错误的地方还请指正，定感激不尽！下面，言归正传，一大波干货正朝你而来。
css盒子模型的创建
一个盒子包括四个区域：
1、内容区（content)
2、内边距（padding）
3、边框（border）
4、外边距（margin）
盒子模型直接上图了，四个区域已经很清晰就不过多解释了。
创建一个简单的盒子模型，我一般都是这样写的：
盒子模型中常见的几类问题以及解决方案
（一）两个或多个毗邻的普通流中的块元素垂直方向上的 margin 折叠问题
解决方案：
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）。
2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠）。
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。
3.display设为‘inline-block’。
4. position既不是static也不是relative。
5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context。
直接上图了，我一般都是这样写的：
（二）高度塌陷问题
首先得说下什么是高度塌陷？
在文档流中，父元素的高度默认是被子元素撑开的。当子元素被设置浮动后，其脱离文档流，使父元素出现高度塌陷，导致整个页面布局混乱。
解决方案：
1.可用clear属性来清除其他元素对当前元素的影响
clear属性的可选值有：
none：默认值，不清除浮动。
left：清除左侧元素的浮动对当前元素的影响。
right：清除右侧元素的浮动对当前元素的影响。
both：清除两侧元素的浮动对当前元素的影响。
注意：clear只适用于兄弟元素之间
直接上图：
高度塌陷之前及运行画面：
设置子元素浮动后及运行画面：
可见已经出现了高度塌陷
现在分别采用三种方案进行处理：
第一种方案：用clear属性，将其设置成可选值中的both
代码和效果图如下：
第二种方案：可以在高度塌陷的父元素最后，添加一个空白的块元素，由于这个块元素并没有浮动，故其可撑起父元素高度。然后再对其进行清除浮动。基本没有副作用，有一个带来的小问题就是：会在页面中添加多余的结构。
代码和效果图如下：与第一种方案的的代码和效果图是相同的，这里将不再重复。
第三种方案：可通过after伪类向元素的最后添加一个空白的块元素，然后对其进行清除浮动。这种方法是几乎没有副作用的，推荐使用。
代码和效果图如下：
总结
第一次写博客，还是花了很多时间也很认真的在写。如果以后在遇到问题，解决以后我还会来分享的，希望这些分享对那些初步开始学习css&html的同学有些帮助。喜欢的话，就给个赞吧！作为奖励，我以后会经常分享一些干货的。