我们之前讲过如果只有子元素设置了margin top而父元素没有边框则会跟着被顶下来的。

而我们怎么解决这个问题呢？

就是给父元素设置一个边框

而为什么我们在第二个浮动的盒子设置边框没有用呢？应为第一个盒子浮动了以后，第二个盒子前面就没有元素了，就默认是body父元素了，所以我们如果不给父元素设置边框就会被顶下来。

而我们给body设置边框仅仅是为了演示一下这个现象，因为在企业开发中我们没有人会给body设置边框的。

给body添加一个边框以后，再给div2添加边框发现设置10px没有效果

然后我们又给它设置18px，发现还是没有效果

为什么没有效果呢?

因为div2会把div1给覆盖了，所以设置了22px也看不到

我们怎么知道文字有多高呢？

发现文字的默认高度是100*22，所以文字的高度是22

所以我们只要设置了大于22就可以看出来了

课时133.margintop失效原因（理解）的更多相关文章

  1. 清除浮动元素的margin-top失效原因（更改之前的错误）

    //样式代码body,div{ margin:; padding:; } .box1{ background:#900; width:200px; height:200px; margin:20px ...

  2. div里面的margin-top失效

    div标签中的元素margin-top失效的解决方法 元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法, ...

  3. 高阶篇：4.2.2）DFMEA层级分明的失效模式、失效后果、失效原因

    本章目的:明确失效模式.失效后果.失效原因的定义,分清楚层次关系,完成DFMEA这部分的填写. 1.失效模式,失效后果,失效原因的定义: 这是FEMEA手册第四册中的定义. 1.1 潜在失效模式 (b ...

  4. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  5. oracle 索引失效原因及解决方法

    oracle 索引失效原因及解决方法 2010年11月26日 星期五 17:10 一.以下的方法会引起索引失效 ‍1,<>2,单独的>,<,(有时会用到,有时不会)3,like ...

  6. 关于margin-top失效的解决方法

    常出现两种情况:(一)margin-top失效 先看下面代码: <div><div class="box1" >float:left</div> ...

  7. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  8. kubectl get 后按2次tab键命令补全的失效原因分析

    kubectl get 后按2次tab键命令补全的失效原因分析 2019/10/28 Chenxin a.bash客户端工具 在centos用户下, cd ~;echo "source &l ...

  9. Synchronized 失效原因

    Synchronized 同步出现失效 Synchronized ,大家都知道这个是Java 提供的一种原子性内置锁,其实现原理是通过获取对象的监视器monitor进行来实现同步的,只有当线程获取到对 ...

随机推荐

  1. SVN 代码托管

    1.安装服务 使用yum安装subversion,简单.不繁琐. 1 yum install -y subversion 2.创建版本库 1 2       mkidr /svn/obj        ...

  2. mysql 免安装版文件含义及作用

    相信很多同学在首次安装mysql 免安装版时,对其中的文件不解,下面以 5.6.24为例讲解这里个文件代表什么: bin: 存放编译好的工具 data:存放数据库数据的位置(就是我们数据库存放的地方) ...

  3. order by注入点利用方式分析

    漏洞分析 使用sqli-lab中的lesson-52作为测试目标.关键代码为: error_reporting(0); $id=$_GET['sort']; if(isset($id)) { //lo ...

  4. Angular4 微信的坑

    1.不要重置对象的引用!(重置只应该在组件或服务的初始化时) why:会使页面产生闪烁 2.不要给图片绑定一个空的值或空的图片引用(如果值从服务器异步过来,那应该在初始化时给它一个默认值) why:会 ...

  5. January 17 2017 Week 3 Tuesday

    You can't shake hands with a clenched fist. 紧握拳头你就无法与他人握手. If you want to shake hands with others, j ...

  6. 《SQL必知必会》总结

    目录   第1章 了解SQL 第2章 检索数据 第3章 排序检索数据 第4章 过滤数据 第5章 高级数据过滤 第6章 用通配符进行过滤 第7章 创建计算字段 第8章 使用数据处理函数 第9章 汇总数据 ...

  7. HBuilde H5开发，关于JSON的Storage存储

    今天踩坑了,在这里记一下. 我想做一个列表,开始是一个一个复制粘贴,然后发现这样太不灵活了,如果我有更多内容要填难道还要再一个一个复制吗? 所以我想到直接用JS动态生成最好,我的思路是这样的: //首 ...

  8. css 17课--

    ---------------------------------------------------------------------------------------------------- ...

  9. Layer Trees Reflect Different Aspects of the Animation State

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreA ...

  10. PHP------XML

    XML XML的含义:可扩展标记语言,设计出来的目的是:传输数据 HTML的含义:超文本标记语言,设计出来的目的是:显示数据 它们两个设计出来的目的是不一样的. 它们两个都是标记语言,相似性比较高. ...