A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

壮烈成仁

初级黑马

  • 黑马币:25

  • 帖子:8

  • 精华:0

© 壮烈成仁 初级黑马   /  2019-10-15 01:08  /  783 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

                                                                      技术贴
       做为一位刚刚入门的萌新来说,写一篇关于技术的帖子来说真的是太不敢当了,只能说是写一些自己浅薄的见解吧。
   
      那么作为一个半只脚刚迈入门槛的程序员来说(好像还不能称为程序员),敲代码做好注释是必不可少的(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;(溢出隐藏的意思)


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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马