做为一位刚刚入门的萌新来说，写一篇关于技术的帖子来说真的是太不敢当了，只能说是写一些自己浅薄的见解吧。
   
      那么作为一个半只脚刚迈入门槛的程序员来说（好像还不能称为程序员），敲代码做好注释是必不可少的（ctrl+?），做好注释可以让自己的代码更有顺序，自己看和别人看都特别的明了，标最多的注释，做最明白的人。

       做好注释之后呢，就可以愉快的敲代码了，但是，代码之中有（指学习了的HTML和CSS）许许多多作用让人混淆的妖艳贱货，比如插入图片（img）和插入背景图片（background-image）还有内边距（padding）和外边距（border）等等这些都是非常容易让新手傻傻分不清的代码，因为他们作用太相似了，相信这些问题一直困扰每一代新人，那我作为一个学习了有十多天的伪程序员来讲解一下问题。

         图片（img）和背景图片（background-image）这俩都是插入图片的，那他们的区别在哪里呢？图片（img）是要在HTML里面书写的而且会占位置，是有体积的，而背景图片（background-image）是在CSS里面书写的且不会占位置，上面是可以放其他盒子（DIV）和元素的，一定要牢记。

         接下来就是我们的内边距（padding）和外边距（border）了，这个说实话第一天学完之后只知道他们的语义“盒子（DIV）的内外边距”这俩哥们主要是控制盒子和盒子里面的内容位置的，但是呢不清楚到底如何使用，接下来我用我的经验来解释一下吧~

         外边距（border）拉开盒子和盒子之间的距离
         内边距（padding）拉开内容到盒子边缘的距离

         如果给固定宽高的盒子添加了border和padding就会将盒子的宽高撑开；
         如果盒子没有设置宽高的时候添加了padding盒子的宽高也会被撑开；
         如果是固定宽高的盒子添加了，我们需要加了多少就减去多少

         这样才可以让盒让宽高和没加外边距（border）内边距（padding）之前一样

         当我们开始使用这俩代码以后有一个最最严重的问题，边距塌陷，天呀！太可怕了！


          吃瓜群众的提问：“那么如何解决呢？”

          两个盒子如果垂直上下排列，上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终
          显 示的样式两个值谁大就显示谁；
          解决方案：不要同时设置，只给一个盒子设置即可；

          如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会
          跟着掉下来；

          解决方案

          为父级设置上边框（ border-top不建议使用）

          直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度
          不建议使用，因为多了一像素的内边距需要减去

          直接给父级盒子添加overflow:hidden;（溢出隐藏的意思）


      好啦，写了两组代码的常见问题，希望为各位未来程序员们有所帮助，现在的我对前端也没什么自己的理解，如果我以后能成为一名大佬的话，我会回来发表一篇真真正正的好技术贴的嘿嘿(●ˇ∀ˇ●)。

  做为一位刚刚入门的萌新来说，写一篇关于技术的帖子来说真的是太不敢当了，只能说是写一些自己浅薄的见解吧。
   
      那么作为一个半只脚刚迈入门槛的程序员来说（好像还不能称为程序员），敲代码做好注释是必不可少的（ctrl+?），做好注释可以让自己的代码更有顺序，自己看和别人看都特别的明了，标最多的注释，做最明白的人。

       做好注释之后呢，就可以愉快的敲代码了，但是，代码之中有（指学习了的HTML和CSS）许许多多作用让人混淆的妖艳贱货，比如插入图片（img）和插入背景图片（background-image）还有内边距（padding）和外边距（border）等等这些都是非常容易让新手傻傻分不清的代码，因为他们作用太相似了，相信这些问题一直困扰每一代新人，那我作为一个学习了有十多天的伪程序员来讲解一下问题。

         图片（img）和背景图片（background-image）这俩都是插入图片的，那他们的区别在哪里呢？图片（img）是要在HTML里面书写的而且会占位置，是有体积的，而背景图片（background-image）是在CSS里面书写的且不会占位置，上面是可以放其他盒子（DIV）和元素的，一定要牢记。

         接下来就是我们的内边距（padding）和外边距（border）了，这个说实话第一天学完之后只知道他们的语义“盒子（DIV）的内外边距”这俩哥们主要是控制盒子和盒子里面的内容位置的，但是呢不清楚到底如何使用，接下来我用我的经验来解释一下吧~

         外边距（border）拉开盒子和盒子之间的距离
         内边距（padding）拉开内容到盒子边缘的距离

         如果给固定宽高的盒子添加了border和padding就会将盒子的宽高撑开；
         如果盒子没有设置宽高的时候添加了padding盒子的宽高也会被撑开；
         如果是固定宽高的盒子添加了，我们需要加了多少就减去多少

         这样才可以让盒让宽高和没加外边距（border）内边距（padding）之前一样

         当我们开始使用这俩代码以后有一个最最严重的问题，边距塌陷，天呀！太可怕了！


          吃瓜群众的提问：“那么如何解决呢？”

          两个盒子如果垂直上下排列，上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终
          显 示的样式两个值谁大就显示谁；
          解决方案：不要同时设置，只给一个盒子设置即可；

          如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会
          跟着掉下来；

          解决方案

          为父级设置上边框（ border-top不建议使用）

          直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度
          不建议使用，因为多了一像素的内边距需要减去

          直接给父级盒子添加overflow:hidden;（溢出隐藏的意思）


      好啦，写了两组代码的常见问题，希望为各位未来程序员们有所帮助，现在的我对前端也没什么自己的理解，如果我以后能成为一名大佬的话，我会回来发表一篇真真正正的好技术贴的嘿嘿(●ˇ∀ˇ●)。