资讯专栏INFORMATION COLUMN

盒子边界(根据理解和测试记录,在概念上可能有描述错误,推荐补充)

stormzhang / 1753人阅读

摘要:测试测试测试测试在以前蠢蠢的不知道的时候,有时候会通过给增加然后给最后一个去除类似这样,虽然这样可以解决,但是不推荐。如果与的边界值大于会小于之间的间距时,可以根据情况重新设置首尾边界的具体值。

前言:边界属性margin是盒子与盒子之间的间距,一定要记住这个前提。
BFC

满足下列条件之一就可触发BFC(IE的触发需要再额外增加zoom: 1)

根元素,即HTML元素

overflow的值不为visible

设置border

float的值不为none

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

边界值重叠
两个相邻的块级元素之间的margin边界值会互相重叠。如:第一个div的margin-bottom和第二个div的margin-top区域会重叠,只显示最大值。(其实说实在的,应该没人会这么写,毕竟直接设置一个盒子的的边界值就可以了。但是这个还是需要注意的。)

解决方法: 其中一个div增加子元素,并设置overflow的值不为visible(触发BFC的元素都可以解决,根据样式需求选择合适的方法即可),然后子元素设置边界值。


测试
测试
边界值无效, 第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题(重点)
 
  • 测试
  • 测试
  • 测试
  • 测试

解决方法:通常情况下,我们会选择给li一个边界top或者bottom来分割开每个li之间的间隔,但是你会发现,第一个子元素的margin-top和最后一个子元素的margin-bottom不会产生跟ul之间的间距,会出现越界。其实一样的处理。


  • 测试
  • 测试
  • 测试
  • 测试

ps: 在以前蠢蠢的不知道的时候,有时候会通过给ul增加padding-bottom,然后给最后一个li去除margin类似这样,虽然这样可以解决,但是不推荐。 如果li与ul的边界值大于会小于li之间的间距时,可以根据情况重新设置首尾边界的具体值。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53519.html

相关文章

  • 盒子边界(根据理解测试记录概念可能描述错误推荐补充)

    摘要:测试测试测试测试在以前蠢蠢的不知道的时候,有时候会通过给增加然后给最后一个去除类似这样,虽然这样可以解决,但是不推荐。如果与的边界值大于会小于之间的间距时,可以根据情况重新设置首尾边界的具体值。 前言:边界属性margin是盒子与盒子之间的间距,一定要记住这个前提。 BFC 满足下列条件之一就可触发BFC(IE的触发需要再额外增加zoom: 1) 根元素,即HTML元素 overfl...

    Genng 评论0 收藏0
  • 不用写代码,也能做好接口测试

    摘要:接口测试形式单个接口测试包含性能测试和通过接口调用进行场景测试。充分来说就是接口测试相对容易实现自动化持续集成。 本文你将了解到 1、接口测试基本概念,包含什么是接口,什么是接口测试,为什么要做接口测试2、接口测试用例设计3、怎样不用写代码,也能快速的根据开发的API文档完成接口自动化测试脚本 注:如果你对接口基本概念和接口测试用例已熟悉,可以直接跳过,其实看一遍也无防,就当作 温故知...

    idisfkj 评论0 收藏0
  • 软件测试肖sir__005测试用例设计方法(1)

    摘要:需要结合其他测试用例设计的方法进行补充。比如边界值边界值在软件中边界值测试方法是发现错误能力最强的一种。其中,原因是表示输入条件,结果是对输入执行的一系列计算后得到的输出。与取值或,表示某状态不出现,则表示某状态出现。 ...

    gnehc 评论0 收藏0
  • 测试基本面试知识

    测试基本知识1、请你分别介绍一下单元测试、集成测试、系统测试、验收测试、回归测试:(1)单元测试:完成最小的软件设计单元(模块)的验证工作,目标是确保模块被正确的编码,使用过程设计描述作为指南,对重要的控制路径进行测试以发现模块内的错误,通常情况下是白盒的,对代码风格和规则、程序设计和结构、业务逻辑等进行静态测试,及早的发现和解决不易显现的错误。(2)集成测试:通过测试发现与模块接口有关的问题。目...

    不知名网友 评论0 收藏0
  • ❤️【全网最全】花费3小时整理出5000字软件测试必须掌握的基本理论知识!❤️

    软件测试的基本理论知识有很多, 根据不同情况划分的,内容比较多~ 目录 1、软件测试概述 2、软件测试基础软件的概念 3、软件测试分类 4、白盒测试用例设计方法 5、黑盒测试用例设计方法 6、缺陷管理软件缺陷 1、软件测试概述 软件测试的IEEE定义:使用人工或自动的手段来运行或测量软件系统的过程,目的是检验软件系统是否满足规定的需求,并找出与预期结果之间的差异。软件测试的发展趋势: ① 测试工...

    ivan_qhz 评论0 收藏0

发表评论

0条评论

stormzhang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<