我们之前讲过如果只有子元素设置了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. c++实现对输入数组进行快速排序

    #include "stdafx.h" #include <iostream> #include <string> #include <vector& ...

  2. python 二叉树计算器

    例子:计算1+2+3+4的值 代码: class Buffer(object): """字符串处理函数""" def __init__(se ...

  3. oracle客户端plsql安装

    1.确认版本 自己的操作系统版本(32位还是64位),oracle instant client(oracle客户端版本)和plsql版本 我自己的版本是:oracle客户端版本 64位,plsql ...

  4. Azkaban3.X的安装（2018年8月19日最新版本）

    参考文章: 1.http://azkaban.github.io/azkaban/docs/latest/ 2.http://blog.csdn.net/gaoqida/article/details ...

  5. sql 嵌套查询

    sql 某一字段 数量大于1 SELECT * FROM ecm_goods_spec AWHERE ( SELECT count( * ) FROM ecm_goods_spec BWHERE A. ...

  6. Heka配置讲解

    基于Heka,ElasticSearch和Kibana的分布式后端日志架构 目前主流的后端日志都采用的标准的elk模式(Elasticsearch,Logstash,Kinaba),分别负责日志存储, ...

  7. 1874 football game(三分法and method to compute the area of trianngle)

    FInd the max area. 1. 三分法 2. NAN (not comparable with number) http://acm.timus.ru/problem.aspx?space ...

  8. C 语言实现多态的原理：函数指针

    C语言实现多态的原理:函数指针 何为函数指针?答案:C Programming Language. 能够查阅下,从原理上来讲,就是一个内存地址.跳过去运行相应的代码段. 既然如此,在运行时决定跳到哪个 ...

  9. virtualbox 安装 mac os x lion 10.7实现全屏显示！

    1. 启动Virtual Box虚拟机,在虚拟机里编辑 /Library/Preferences/SystemConfiguration/com.apple.Boot.plist,找到 <dic ...

  10. 第八章.Spring MVC

    基于MyEclipse开发 工程结构: 所使用到的jar: 代码: FruitControllerTest.java public class FruitControllerTest implemen ...