我们之前讲过如果只有子元素设置了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. idea 多项目部署JRebel

    碰到个问题,Jrebel热部署Idea,两个项目一个可以热部署,一个不行.刚开始发现是其中一个项目没有添加JRebel,于是加上 然而发现还是不行,继续google, 在一篇文章里面发现如下的内容: ...

  2. c# js日期工具

    c#获取日期当年最后一天:model.StartDate.AddYears(1).AddSeconds(-1) js日期工具: var dateToolObj = { methods: { //url ...

  3. eclipse tomcat jdk 版本引用

    今日遇到一个问题,因为比较难找,所以记录下来,方便日后查阅,也许也可以帮助同行. 一个Java project工程,使用了solr6.2,所以需要引用jdk8才可以正常使用. 代码编写好了,已经提交s ...

  4. echarts tooltip太多会超出显示范围-解决

    以下两种解决方式,能够应对大部分出现此类问题项目 tooltip.position: 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置. 可选:string, Array, Function 一.解 ...

  5. July 09th 2017 Week 28th Sunday

    He that boasts of his own knowledge proclaims ignorance. 夸耀知识实乃无知. Honestly speaking, I don't agree ...

  6. [转]Activitys, Threads, & Memory Leaks

    转自:http://www.androiddesignpatterns.com/2013/04/activitys-threads-memory-leaks.html http://www.cnblo ...

  7. getResource和getResourceAsStream

    1. 前言 在Java中获取资源的时候,经常用到getResource和getResourceAsStream,本文总结一下这两种获取资源文件的路径差异. 2.Class.getResource(St ...

  8. Yii: 扩展CGridView增加导出CSV功能

    Yii提供的CGridView组件没有内置数据导出功能,不过我们可以通过扩展该组件来添加该功能. 具体方法如下: 1.首先派生一个子类,添加一个action成员,在该视图的init函数中判断是浏览动作 ...

  9. BZOJ3790:神奇项链(Manacher)

    Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字 母组成的字符串,每个小写字母表示一种颜色.为了制作这个项链,小 H 购买了两个机器.第一个机器可 ...

  10. BZOJ4530:[BJOI2014]大融合(LCT)

    Description 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一条边的负载就是它所在的当前能够 联通的树上路过它 ...