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

css-盒子模型学习心得

写在前面:

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

 

css盒子模型的创建

    一个盒子包括四个区域：

      1、内容区（content)

      2、内边距（padding）   

      3、边框（border）

      4、外边距（margin）

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

 

 

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

 

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

（一）两个或多个毗邻的普通流中的块元素垂直方向上的 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。

 

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

       

     

（二）高度塌陷问题

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

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

    解决方案：

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

           clear属性的可选值有：

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

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

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

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

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

直接上图：

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

 

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

  

可见已经出现了高度塌陷

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

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

 

代码和效果图如下：

 

 

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

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

 

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

 

代码和效果图如下：

 

总结

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

 

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