两个经典bug

最新推荐文章于 2021-06-28 20:29:32 发布
最新推荐文章于 2021-06-28 20:29:32 发布
阅读量239 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/108149961
版权 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	 <div class="right"> </div>
	 <div class="left"> </div>
</body>
</html>


*{
  margin:0;
  padding:0;
}

.right{
   position:absolute;
   right:0;
   width:100px;
   height:100px;
   background-color:#fcc;
   opacity:0.5;
}

.left{
   
   height:100px;
   background-color:#123;
}

在这里插入图片描述
该图说明两个图像重叠在一起了，为了不重叠，应改成如下：

*{
  margin:0;
  padding:0;
}

.right{
   position:absolute;
   right:0;
   width:100px;
   height:100px;
   background-color:#fcc;
   opacity:0.5;
}

.left{
   margin-right:100px;
   height:100px;
   background-color:#123;
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	 <div class="wrapper">
	 <div class="content"> </div>
	 </div>
</body>
</html>


*{
  margin:0;
  padding:0;
}

.wrapper{
   
   width:100px;
   height:100px;
   background-color:black;
   
  
}

.content{
  
   width:50px;
   height:50px;
   background-color:green;
}

在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   
  
}

.content{
  
   width:50px;
   height:50px;
   background-color:green;
}

wrapper带着content一起移动
在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   
  
}

.content{
   margin-left:50px;
   margin-top:50px;
   width:50px;
   height:50px;
   background-color:green;
}

content相对于wrapper水平移动
在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   
  
}

.content{
   margin-left:50px;
   margin-top:100px;
   width:50px;
   height:50px;
   background-color:green;
}

当content相对于wrapper垂直移动时，不管用
在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   
  
}

.content{
   margin-left:50px;
   margin-top:150px;
   width:50px;
   height:50px;
   background-color:green;
}

但当content的margin-top大于wrapper的margin-top的值时，整体都向下移动了。

在这里插入图片描述
总结，在有父子关系的元素中，垂直方向的移动是取父子中margin-top中的最大值做变化。就相当于子级元素不以父级的顶部为界限，即父级的顶部相当于没有（即margin塌陷）。如果想要以父级顶部为界限相对移动，可以在父级顶部设一个线，如下：

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   border-top:1px solid red;
  
}

.content{
   margin-left:50px;
   margin-top:150px;
   width:50px;
   height:50px;
   background-color:green;
}

在这里插入图片描述
这个可以解决问题，但不推荐使用。故使用BFC（block format context块级格式化上下文）是通过改变html元素中的渲染规则。
如何触发一个盒子的BFC.
1.position:absolute;
2.display:inline-block;
3.float:left/right;
4.overflow:hidden;(溢出部分隐藏)

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
 
  
}

.content{
   margin-left:70px;
   
   width:50px;
   height:50px;
   background-color:green;
}

在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   overflow:hidden;
  
}

.content{
   margin-left:70px;
   
   width:50px;
   height:50px;
   background-color:green;
}

在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
   overflow:hidden;
  
}

.content{
   margin-left:50px;
   margin-top:50px;
   width:50px;
   height:50px;
   background-color:green;
}

通过改变父级的渲染规则，触发其BFC即可达到理想效果，如下：
在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.wrapper{
   margin-left:100px;
   margin-top:100px;
   width:100px;
   height:100px;
   background-color:black;
  display:inline-block;
  
}

.content{
   margin-left:50px;
   margin-top:50px;
   width:50px;
   height:50px;
   background-color:green;
}

效果如上图，其他的方法照样可以解决上述问题。虽然四种方法都可以解决上述问题，但同时也引入了新的问题。
1.position:absolute;（后面元素不能罗列在其下面）
2.display:inline-block;（不能独占一行）
3.float:left/right;
4.overflow:hidden;(溢出部分隐藏)（如果要求是子类部分溢出展示，则达不到要求）

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	<span class="box1">123</span>
	<span class="box2">345</span>
</body>
</html>



*{
  margin:0;
  padding:0;
}

.box1{
   margin-right:100px;
   background-color:red;
}

.box2{

   background-color:green;
}

在这里插入图片描述

*{
  margin:0;
  padding:0;
}

.box1{
   margin-right:100px;
   background-color:red;
}

.box2{
   margin-left:150px;
   background-color:green;
}

在这里插入图片描述

上述两张图说明它们之间没有共用区域（是区域累加）。但接下来看看div

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	
	<div class="demo1">1</div>
	<div class="demo2">2</div>
</body>
</html>


*{
  margin:0;
  padding:0;
}


.demo1{
   margin-bottom:100px;
   background-color:orange;
}
.demo2{
  
   background-color:black;
}

在这里插入图片描述

*{
  margin:0;
  padding:0;
}


.demo1{
   margin-bottom:100px;
   background-color:orange;
}
.demo2{
   margin-top:100px;
   background-color:black;
}

效果和上一张一样。
上图可以看出它们的区域合并了，这叫margin合并。如何让div和span一样不共用区域呢，可使用BFC，在开发中一般不解决，可使用这个bug隔开两个元素。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	<div class="demo1">1</div>
	<div class="wrapper">
	<div class="demo2">2</div>
	</div>
</body>
</html>

*{
  margin:0;
  padding:0;
}

.demo1{
   margin-bottom:100px;
   background-color:orange;
}
.demo2{
   margin-top:100px;
   background-color:black;
}

.wrapper{
overflow:hidden;
}

在这里插入图片描述
浮动模型（float）
float:left/right

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	<div class="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>
	<div class="content">5</div>
	<div class="content">6</div>
	<div class="content">7</div>
	<div class="content">8</div>
	<div class="content">9</div>
	</div>
</body>
</html>



.wrapper{
  width:300px;
  height:300px;
  border:1px solid black;
}
.content{
  
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}

.wrapper{
  width:350px;
  height:300px;
  border:1px solid black;
}
.content{
  float:right;
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}

在这里插入图片描述

.wrapper{
  width:350px;
  height:300px;
  border:1px solid black;
}
.content{
  float:left;
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}

在这里插入图片描述

由上图可知float:left/right是将元素按从左到右或从右到左的顺序依次排列。即使是块级元素等也可以排成一排。

.wrapper{
  width:350px;
  height:300px;
  border:1px solid black;
}
.content{
  float:right;
  width:100px;
  height:100px;
  margin-left:10px;
  margin-bottom:10px;
  background-color:black;
  color:#fff;
}

在这里插入图片描述

它也可以在浮动的过程中加一些修饰。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	
	<div class="box"></div>
	<div class="demo"></div>
	
</body>
</html>



.box{
  width:100px;
  height:100px;
  background-color:black;
}
.demo{
  width:150px;
  height:150px;
  background-color:green;
}

在这里插入图片描述

.box{
 float:left;
  width:100px;
  height:100px;
  background-color:black;
  opacity:0.5
}
.demo{
  width:150px;
  height:150px;
  background-color:green;
}

在这里插入图片描述

这是分层吗？不是。原理如下：浮动元素产生浮动流。所有产生浮动流的元素，块级元素看不到它们，故可以重叠在一起如上图。产生bfc的元素和文本类属性的元素（带有inline的元素）以及文本都能看到浮动元素。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
	
	<div class="box"></div>
	<img src="123.png">
	
	
</body>
</html>

在这里插入图片描述

	<!DOCTYPE html>
	<html lang="en">
	 <head>
	  <meta charset="UTF-8">
	  <link rel="stylesheet" type="text/css" href="Untitled2.css">
	  <title>Document</title>
	 </head>
	 <body>
		
		<div class="box">
		  <div class="demo">1</div>
		  <div class="demo">2</div>
		  <div class="demo">3</div>
		  </div>
	</body>
	</html>


.box{
  border:1px solid black;
}
.demo{
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}

在这里插入图片描述

.box{
  border:1px solid black;
}
.demo{
  float:left;
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}

在这里插入图片描述
父级没有框住子类，怎么解决，原因在浮动元素产生了浮动流，如何去除浮动流呢。用p标签的相关语法，如下：

*{
  margin:0;
  padding:0;
}
.box{
  border:1px solid black;
}
.demo{
  float:left;
  width:100px;
  height:100px;
  background-color:black;
  color:#fff;
}
p{
  border-top: 0 solid green;/*该句可写可不写*/
  clear:both;
}

在这里插入图片描述

你也可以在box中设置高为100px 但如果是多行呢，这样不合适，所以上面的方法较好。父级包住浮动元素，要有边框就是这样解决的。
在这里插入图片描述
伪元素：存在与任意一个元素之间。伪元素本来就有，我们可以选中伪元素对它进行修改。

叹！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
软件测试与常见Bug大全
06-07
软件测试常见Bug大全，非常适合测试人员看的一个文档。
两个经典Bug及其解决方法
Cecilia的博客
12-04 332
margin塌陷：当父元素包裹着子元素时，垂直方向的margin取两者之中较大的数值。 解决方法： 1.给父元素设置一个border-top（不建议采用） 2.bfc（block format context — 块级格式化上下文） 如何触发一个盒子的bfc： 1.position: absolute; 2.display: inline-block; 3.float: left / rig...
前端两个经典bug
u011280778的博客
06-29 1063
1、margin塌陷bug <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
软件测试就是挑Bug?也许你有认知偏差
weixin_33695450的博客
12-10 969
“什么是软件测试？”这个看似简单的一个问题，其实也是最难的问题。说它简单，是因为这是一个基本的问题，做软件测试工作多年的小伙伴，自然知道什么是软件测试。说它难，是因为“软件测试”有很多内涵，要了解其全部内涵，并非那么容易。如果我们去问软件研发人员什么是软件测试，得到的答案可能五花八门，人们对软件测试有不同的理解。现在最常见的理解就是:软件测试就是找bug、发现缺陷。但也有人会认为软件测试就是：检查...
解决dotproject的两个小bug的方法
09-30
通过官方论坛找到解决方案的两个小bug，虽然对系统的影响不大，但对于用户体验和系统稳定性来说是不能忽视的。这两个问题主要涉及到讨论区（forums）的功能异常，一个是在讨论区发言权限的控制问题，另一个是SQL查询...
关于c语言的一个小bug详解
09-05
通过这种方式，两个操作数都变为有符号类型，避免了类型提升带来的问题。 在处理无符号整数时，我们有以下几点建议： 1. **尽量避免在代码中过度使用无符号类型**：虽然无符号整数没有负值，但它们在与有符号整数...
软件测试缺陷跟踪的两个经典分析模型
03-23
本文介绍了如何使用两个经典的分析模型，来控制缺陷跟踪的过程。这两个模型叫做《活动bug走势图》、《bug打开关闭图》。另外，在文章中还会提到两个概念：“bug收敛”、“零bug反弹”，具体含义会在介 　缺陷跟踪...
缺陷跟踪的两个经典分析模型
03-23
本文介绍了如何使用两个经典的分析模型，来控制缺陷跟踪的过程。这两个模型叫做《活动bug走势图》、《bug打开关闭图》。另外，在文章中还会提到两个概念：“bug收敛”、“零bug反弹”，具体含义会在介 　缺陷跟踪...
校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)
04-18
校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE版,可能有BUG)校验两个数据库表差异,并生成修改语句(BATE...
[转]关于软件测试的几个经典问题(2)
凌空傲雪的流行前锋
03-05 779
收藏于 2010-04-11 来自于百度空间 测试的几个原则 1. 应当把“尽早地和不断地进行软件测试”作为软件开发者的座右铭。 2. 测试用例应由测试输入数据和对应的预期输出结果这两部分组成。 3. 程序员应避免检查自己的程序。 4. 在设计测试用例时，应包括合理的输入条件和不合理的输入条件。 软件测试的原则 5. 充分注意测试中的群集现象。 经验表明，测试后程序中残存的
软件测试：关于Bug~
qq_44851228的博客
03-14 927
我们该如何去描述一个Bug？在此之前我们首先要清楚一个概念，软件的生命周期。 软件的生命周期有如下五个阶段：需求分析——>测试计划——>测试设计、测试开发——>测试执行——>测试评估； 需求阶段 这是测试人员了解需求、对需求进行分解，得出测试需求； 计划阶段 根据需求编写测试计划、测试方案； 设计阶段 测试人员适当的了解设计，对于设计测试用例是很有帮助的，测试人员搭建测试用例框架，根据需求和设计编写一部分测试用例； 编码阶段 测试人员一般不需要编码的，但已经编码的模块，专业的白盒测试
软件测试之BUG描述
hhl18的博客
06-18 6015
测试人员在找到bug后，就要提交bug了，要提交bug时，最主要的就是要描述好bug，一个好的bug描述，能让开发人员，更快的定位到问题产生的原因，能够更快的解决bug，而，如果描述的很模糊，有可能开发人员在看这个bug的时候，要花费很长的时间去猜测这个bug的意思，甚至于理解错了bug的本意，这将大大的延长该bug解决的时间。 常见bug 管理系统 禅道（zentao）、bug...
软件测试：BUG那些事儿
小心眼儿猫的博客
09-16 1638
main函数：先了解主要工作流程，再细看每一步的细分步骤 int main(void) { int server_sock = -1; u_short port = 0;//传入的端口为0， int client_sock = -1; struct sockaddr_in client_name; int client_name_len = si...
手机测试常见的BUG解析
自己的学习博客
07-16 8783
今天总结之前学习到关于在手机软件测试过程中经常出现的一些现象，这些现象都是什么原因导致的，我们应该如何去抓取LOG,抓取的LOG的路径在哪里 下边我们来看 1、 手机遇到 “应用无响应” 有两个原因导致的：第一种是android进程之间死锁引起的（就是两个进程之间） 第二种就是手机的CPU运行高引
软件测试的几个经典问题
L-Wolf
05-13 3203
其实这些问题真的在哪个论坛里都有，不过奇怪的也是，每次面试都会遇到，无论是自己面试还是给别人面试。。  PS:声明一下，这里的问题基本都不是原创的，答案呢，在软件测试“百家争鸣，百花齐放”的时代也是丰富多彩的。但是道理都差不多。仅作为参考，呵呵~~ 问题一：什么是“软件测试”？ 1。出自(IEEE, 1986; IEEE, 1990). Software testing is
树的遍历（先序、中序、后序详解）
热门推荐
qq_44721518的博客
06-28 4万+
树的遍历主要有三种 1、先序遍历：先遍历根节点，再遍历左节点，最后遍历右节点； 2、中序遍历：先遍历左节点，再遍历根节点，最后遍历右节点； 3、后序遍历：先遍历左节点，再遍历右节点，最后遍历根节点； 总结：先、中、后就表示根节点的遍历处于哪个位置，而总是先左节点后右节点。例如先序遍历，“先”表示根节点最先遍历，再左节点，最后右节点。依此类推中序遍历，后序遍历。 接下来看一个题目，看一下你们是怎么做的。 我们以中序遍历为例来讲（每次以三个节点为一个整体）： 首先从树的根节点开始即C F E 我们再依次来看，
Collections.sort()的详细讲解
qq_44721518的博客
05-29 3万+
Collections.sort()的详细讲解 很多时候都需要对一些数据进行排序的操作。然而那些数据一般都是放在一个集合中如：Map ，Set ，List 等集合中。他们都提供了一个排序方法 sort()，要对数据排序直接使用这个方法就行，但是要保证集合中的对象是 可比较的。 怎么让一个对象是 可比较的，那就需要该对象实现 Comparable 接口啦。然后重写里面的 compareTo()方法。我们可以看到Java中很多类都是实现类这个接口的 如：Integer，Long 等 假设我们有一个学生类，默认需
码分复用的详解
qq_44721518的博客
06-17 1万+
在CDMA中，每个比特时间再划分为m个短的间隔，成为码片，通常m值为64或128，一般m=8 规则如下： 1、使用CDMA的每一个站被指派一个唯一的m bit码片序列，一个站如果要发送比特1，则发送它自己的m bit码片序列，如果要发送0，则发送该码片序列的二进制反码，按照惯例将码片中的0写成-1，将1写成+1、 例如 站点A：0 0 0 1 1 0 1 1 一般写成-1 -1 -1 1 1 -1 1 1 发送比特1，则A站发送码片序列为（0 0 0 1 1 0 1 1）表示发送1 2、【CDMA给每一个站
还是有bug 点击一次删除了两个元素
最新发布
07-14
这样修改后，当 `this.mainIngredient` 数组中的元素数量大于 1 时，才会执行 `splice` 函数删除最后一个元素。而当 `this.mainIngredient` 数组中的元素数量小于等于 1 时，会显示一个提示信息，防止将所有主料都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值