我们之前讲过如果只有子元素设置了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. Scrum----学习心得

    Scrum学习心得 什么是敏捷开发? 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的 开发方法.它不是一门技术,它是一种开发方法,也就是一种软件开发的流程,它会指导我 ...

  2. php遍历数组赋值

    <?php $arr=array( array("num"=>100,"name"=>"Liuxy","scor ...

  3. Java不带.classpath的svn项目下载，转成到eclipse中

    .classpath是Eclipse的工程文件,别人没有将工程的信息传到SVN库中,就检查不出.classpath文件,识别不了项目结构. 这种做法也是比较提倡的方法.SVN上只要有项目的源码信息就可 ...

  4. C++中类与结构体的区别

    相信有一点专业知识的人都知道,C语言是一种结构化语言.它层次清晰,便于按模块化方式组织程序,易于调试和维护.在很大程度上,标准C++是标准C的超集.实际上,所有C程序也是C++程序,然而,两者之间有少 ...

  5. vs2017 git到oschina 方法

    vs2017中git基本使用方法: 1.开发环境vs2017,git服务器使用git.oschina.net 2.打开vs2017 创建项目 如果已有项目则: 3.完成后在文件前面会有小锁的图标,说明 ...

  6. 全链路实践Spring Cloud 微服务架构

    Spring Cloud 微服务架构全链路实践Spring Cloud 微服务架构全链路实践 阅读目录: 网关请求流程 Eureka 服务治理 Config 配置中心 Hystrix 监控 服务调用链 ...

  7. phoneGap的Android下编写phonegap 发送短信插件

    一.前端代码的编写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. jquery ajax 标准写法

    $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json ...

  9. php 日志扩展

    今天发现一个比较好的php应用日志扩展,这里先mark一下,回头有空再详细介绍: http://neeke.github.io/SeasLog/

  10. protected internal 和internal 区别

    private:只能在本类中使用protected:在本类中及其子类中可以使用  可以跨程序集 internal:同一命名空间(程序集)中的类可以使用  限定的是只有在同一个程序集中才可以访问,可以跨 ...