对位置有更深的理解(掌握位置是如此重要)
【不一样的CSS】深入理解 position (掌握定位就是这么 sao 气)
写在前面
对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新,实现各种布局的方式已经多得数不胜数了。
最近利用碎片时间,大概用了半个月的时间整理了一个系列,本系列文章总结了 CSS 中的各种布局,以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。
该系列的导航帖点我进入,里面可以快速跳转到你想了解的文章(建议收藏)
position
属性概述
position
属性是掌握 CSS 布局中重要得一个属性,该属性用于指定一个元素在文档中的定位方式。通过 top
,right,bottom
和 left
属性则决定了该元素的最终位置。
该属性具有以下五个值:
-
static
: 默认值,表示正常布局行为,此时设置top
,right
,bottom
,left
和z-index
属性均无效。 -
relative
: 将元素设置为相对定位元素,该方式不脱离文档流 -
absolute
: 将元素设置为绝对定位元素,使元素相对于最近的非static
定位祖先元素的进行定位。 -
fixed
: 将元素设置为固定定位元素,使元素相对于视觉窗口进行定位。 -
sticky
: 将元素设置为粘性定位元素,一开始不脱离文档流在默认位置,当到达某个位置时,相对于视口进行定位。
absolute 属性值
基本特性
absolute
属性值与 float
属性名,具有相同的特性:
- 包裹性:所谓的包裹性就是指元素的宽度会收缩到与内容一致。
- 破坏性:所谓的破坏性指的就是父元素的高度塌陷
脱离文档流
将 position
属性的值设置为 absolute
时,其元素会脱离文档流。
文档流就是将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。
所谓的脱离文档流就是元素不再在文档流中占据空间,而是处于浮动状态 (可以理解为漂浮在文档流的上方) 。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>脱离文档流</title>
<style>
.item {
width: 300px;
height: 200px;
background-color: #ec407a;
/* 脱离文档流 不占文档中的空间 */
position: absolute;
}
img {
width: 500px;
}
</style>
</head>
<body>
<div class="item"></div>
<img src="./../image/img.jpg" />
</body>
</html>
不脱离文档流的表现如下图所示:
脱离文档流的表现如下图所示:
可以看出 <div>
元素已经漂浮在图片的上方了。
与 margin
共同使用
absolute
属性值与 margin
共同使用时可以完成一些效果很不错的布局。例如一个搜索框效果,示例代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉框定位二三事</title>
<style>
body {
margin: 0;
background-color: #edeff0;
}
/* 容器样式 */
.container {
margin-top: 120px;
margin-left: 240px;
overflow: hidden;
}
/* 输入框样式 */
.input {
width: 240px;
line-height: 18px;
padding: 10px;
margin: 0;
border: 0 none;
}
.input:focus {
outline: 0 none;
}
.list {
/* 默认不显示,当输入内容时,通过js控制其显示 */
/* display: none; */
position: absolute;
width: 260px;
/* 通过 margin 来控制其显示的位置 */
margin: 39px 0 0 -1px;
padding-left: 0;
list-style-type: none;
border: 1px solid #e6e8e9;
background-color: #fff;
box-shadow: 0px 1px 2px #d5d7d8;
font-size: 12px;
}
/* 列表项样式以及悬停样式 */
.list > li {
line-height: 30px;
padding-left: 12px;
}
.list > li:hover {
background-color: #f9f9f9;
}
.list a {
display: block;
color: #5e5e5e;
text-decoration: none;
}
.list a:hover {
color: #000;
}
</style>
</head>
<body>
<div class="container">
<ul class="list">
<li>
<a>玩转CSS布局之 Grid 布局</a>
</li>
<li>
<a>玩转CSS布局之 Flex 布局</a>
</li>
<li>
<a>玩转CSS布局之深入理解 position 定位</a>
</li>
<li>
<a>玩转CSS布局之深入理解 z-index 定位</a>
</li>
</ul>
<input class="input" placeholder="请输入内容" />
</div>
</body>
</html>
执行结果如下图所示:
此时可以通过 JavaScript
的方式来控制提示内容的显示与隐藏。
left、right、top、bottom 的使用
开启定位之后,可以通过这四个属性来控制其偏移量,其参数可以传递像素值,百分比(代表元素包含块的宽度的百分比)等。
简单的使用这里就不介绍了,这里介绍一些在开发中的小技巧
-
没有宽度和高度声明实现的全屏自适应效果
示例代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>没有宽度和高度声明实现的全屏自适应效果</title> <style> .overlay { position: absolute; /* 将其元素拉满整个页面 */ left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; } </style> </head> <body> <div class="overlay"></div> </body> </html>
-
left
right
和width
实现水平居中,示例代码如下所示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>left right 和 width 实现水平居中</title> <style> img { position: absolute; right: 0; left: 0; width: 800px; /* 开启决定定位后 margin: auto 是无法实现水平居中的,需要通过 left right 和 width 配合使用 */ margin: auto; } </style> </head> <body> <img src="../image/img.jpg" /> </body> </html>
实现效果如下所示:
值得注意的是
absolute
属性值是不能与float
共同使用的,当共同使用时,float
将会失效。
与 z-index
的关系
绝对定位的元素可以通过 z-index
控制层级显示,但是在开发过程中,需要我们的代码结构清晰,这个并不是必要的。使用准则如下:
- 如果只有一个决定定位的元素,自然就不需要
z-index
来控制层级显示,该元素会自动覆盖普通元素。 - 如果有两个绝对定位的元素,控制 DOM 流的前后顺序也能达到需要的覆盖效果,自然也不需要
z-index
属性。 - 如果有多个绝对定位交错,这种事非常少见的,通过 DOM 流的顺序,和
z-index: 1
就可以实现 - 如果是非弹框类的决定定位元素
z-index
的值是大于2的,必定z-index
是冗余的,代码完全可以优化。
relative 属性值
对 absolute
的限制作用
relative 属性值对 对 absolute
的具有如下限制作用
-
当父元素开启
relative
定位后,其子元素如果开启absolute
定位后 子元素的left
、right、top
、bottom
的属性值永远不会超出父元素。示例代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>relative 属性值对 对 `absolute` 的具有如下限制作用</title> <style> .container { /* 父级元素开启 relative 定位 */ position: relative; height: 400px; width: 600px; margin: 0 auto; background-color: #9c27b0; } .item { /* 子元素开启 absolute 定位 */ position: absolute; background-color: #4caf50; height: 200px; width: 300px; /* 子元素的 top left right bottom 会被限制在 父级容器中 */ right: 0; bottom: 0; } </style> </head> <body> <div class="container"> <div class="item"></div> </div> </body> </html>
执行结果如下所示:
-
当有两个元素都开启
relative
定位,并都通过z-index
限制层级,假如父元素1号的z-index
的值为2,父元素2号的z-index
的值为1。父元素2号下面的子元素无论z-index
的值多大,永远不会覆盖父元素1下面的子元素。 -
如果父元素未开启
relative
定位,其overflow: hidden;
的限制对absolute
定位的子元素并没有任何限制,只有父元素开启relative
定位后,才会对absolute
定位的子元素做限制。示例代码如下:
.container { /* 父级元素开启 relative 定位 */ position: relative; height: 400px; width: 600px; margin: 0 auto; background-color: #9c27b0; overflow: hidden; } .item { /* 子元素开启 absolute 定位 */ position: absolute; background-color: #4caf50; height: 200px; width: 300px; right: 0; top: 0; }
HTML 结构同上
当父元素未开启 relative 定位的效果如下:
开启后如下所示:
left、right、top、bottom 的使用
当元素开启 relative
定位后,其偏移是相对于自身,且对其他元素没有侵入性的。简单的说就是相对自己原来的位置进行偏移,且对其他元素与没有任何的影响。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>left等偏移属性的使用</title>
<style>
.container {
/* 父级元素开启 relative 定位 */
position: relative;
height: 400px;
width: 600px;
background-color: #9c27b0;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
执行结果如下:
realtive 最小化影响原则
所谓 relative 的最小化影响原则,指的是尽量 relative
属性值对其他元素或布局的潜在影响!具体体现在两个方面:
-
使用
absolute
属性值时,尽量不使用relative
做限制,而是使用margin
完成其定位功能。 -
当必须通过 父元素开启
relative
定位,子元素的absolute
才能实现定位效果的时候,可以再其子元素单独创建一个的父元素,并开启relative
定位,子元素就可以相对于该父元素进行定位,这么做的好处就是relative
布局就不会影响其他元素。示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>relative 最小化影响原则</title> <style> .container { height: 400px; width: 600px; background-color: #9c27b0; margin: 0 auto; } .item { height: 100px; width: 50px; background-color: #ff7043; line-height: 100px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <!-- 单独创建一个 开启 relative 定位的 父元素--> <div style="position: relative"> <!-- 这样不会影响后面元素的定位 --> <div class="item" style="position: absolute; right: 0">1</div> </div> <div class="item">2</div> </div> </body> </html>
执行结果如图所示:
fixed 属性值
当 position
的属性值设置为 fixed
时,该元素会相对于浏览器窗口进行偏移,即定位的基准点就是浏览器窗口。这就会导致该元素的位置不会跟随页面滚动而变化,就像固定在页面上一样。
该属性还可以搭配 top
、bottom
、left
、right
这四个属性一起使用,表示该元素的初始位置是基于视口计算的。如果不使用这四个属性,表示元素的起始位置就是元素的默认位置。
示例代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fixed 属性值</title>
<style>
body {
margin: 0;
height: 2000px;
}
.container {
/* 开启 fixed 定位 */
position: fixed;
height: 400px;
background: #2c80c5;
/* 实现居中 */
left: 0;
right: 0;
width: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
当页面无论怎么滚动,该元素始终定位在顶部。
执行结果如下:
sticky 属性值
sticky
属性值与其他属性值不一样,该属性值会产生一个动态效果,灵活的运用该属性值可以完成一个吸顶的效果。
这个值像是 relative
和 fixed
的结合。一些时候是 relative
定位 (定位的基准点是自身默认位置) ,另一些时候自动变成 fixed
定位 (定位的基准点是视口) 。
该属性值必须搭配 top
、bottom
、left
、right
这四个属性一起使用,不能省略,否则等同于 relative
定位,不产生 动态固定 的效果。
该属性值得定位规则为:当页面滚动,父元素开始脱离视口时即部分不可见) ,只要与 sticky
元素的距离达到生效门槛,relative
定位自动切换为 fixed
定位;等到父元素完全脱离视口时 (即完全不可见) ,fixed
定位自动切换回 relative
定位。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sticky 属性值</title>
<style>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.title {
/* 适配 safari 浏览器 */
position: -webkit-sticky;
position: sticky;
height: 60px;
background: #ff7300;
top: 0px;
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="title">内容1</div>
<img src="../image/img.jpg" />
</div>
<div>
<div class="title">内容2</div>
<img src="../image/img.jpg" />
</div>
<div>
<div class="title">内容3</div>
<img src="../image/img.jpg" />
</div>
<div>
<div class="title">内容4</div>
<img src="../image/img.jpg" />
<img src="../image/img.jpg" />
</div>
</div>
</body>
</html>
执行结果如下图所示:
当我们的页面滚动时,只要视口的顶部与 .title
的距离 >=0
,.title
就会自动变为 fixed
定位,保持与视口顶部 0px
的距离。页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),.title
恢复成 relative
定位。
生效规则
position:sticky
的生效是有一定的限制的,总结如下:
- 须指定
top
,right
,bottom
或left
四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。- 并且
top
和bottom
同时设置时,top
生效的优先级高,left
和right
同时设置时,left
的优先级高。
- 并且
- 设定为
position:sticky
元素的任意父节点的 overflow 属性必须是 visible,否则position:sticky
不会生效。这里需要解释一下:- 如果
position:sticky
元素的任意父节点定位设置为overflow:hidden
,则父容器无法进行滚动,所以position:sticky
元素也不会有滚动然后固定的情况。 - 如果
position:sticky
元素的任意父节点定位设置为position:relative | absolute | fixed
,则元素相对父元素进行定位,而不会相对视觉窗口定位。
- 如果
- 达到设定的阀值。这个还算好理解,也就是设定了
position:sticky
的元素表现为relative
还是fixed
是根据元素是否达到设定了的阈值决定的。
上一篇: css 位置属性
推荐阅读
-
对位置有更深的理解(掌握位置是如此重要)
-
气泡排序(超级详细)--升序",从小到大;另一种是 "降序",从大到小。该主题可抽象为 "按升序对 n 个数字排序 "的一般形式。 排序是一种重要的基本算法。排序的方法有很多种,但在本题中我们将使用冒泡排序法。 冒泡法的基本思想 冒泡法的基本思想是,每次比较相邻的两个数字时,较小的那个会被移到前面。如果有 5 个数字9,8,5,2,0,第一次将前两个数字 8 和 9 互换。第二次将第二个和第三个数字(9 和 5)对调......这样一共对调 4 次,得到 8-5-2-0-9 的顺序,可以看到:最大的数字 9 一直在 "下沉",成为最下面的一个数字,而小的数字 "上升" 最小的数字 "上升"。最小的数字 0 已经向上 "浮 "了一个位置。经过第一次比较(共 4 次比较和交换),得到了最大的数字 9。 然后进行第二趟比较,对剩下的前 4 个数字(8、5、2、0)进行新一轮比较,这样第二个最大的数字就 "沉到了底部"。同样,按照上述方法进行第二轮比较。经过 3 次比较和交换,我们得到了第二大数 8。 按照这个规律,我们可以推断出,比较 5 个数字需要 4 次旅行,才能将 5 个数字从小到大排列起来。在第一次旅行中,两个数字之间进行了 4 次比较,在第二次旅行中,进行了 3 次比较......在第四次旅行中,只进行了一次比较。 思路总结 总结:如果有 n 个数字,那么要进行 n-1 次比较。在第一次行程中进行 n-1 次比较,在第 i 次行程中进行 n-i 次比较。
-
像首席技术官一样思考:如何高效管理 30 人的研发团队?-管理越多越轻松。好的研发团队,应该是上拨下用,即下级对上级的向上管理;而不是反过来,总是向下管理,甚至是 CTO 做经理的事,经理做工程师的事,工程师最终会被当成实习生。如果是这样,就会越管越累,不仅团队无法成长,而且团队整天很忙还效率低下,问题一大堆。 有这样一个小故事:一位高级经理下班后帮忙倒垃圾,结果被老板训斥了一顿。这就好比首席技术官做了实习生自己该做的事。事情本身没有对错之分,只是从不同的角度有不同的理解。 古人云:"用人不疑,疑人不用"。在面对自己的研发团队时,应该相信他们能做好,授权一线开发人员充分发挥专业特长,不要限制他们的工作。但在相信他们的同时,也要进行二次确认,始终秉持 "我相信,但我要确认 "的原则和严谨的精神。因为每个人都会犯错和疏忽,通过发挥团队的智慧,团队犯错的机会就会大大减少。比如回归测试、代码审查、开发演示、变更审批等等。 如前所述,每个人都难免会犯错。但作为管理者,你所设计和商定的流程不能出错。管理者的每一个决定和沟通都应该经过深思熟虑。就像红绿灯的交通设计,某辆车不小心闯红灯可能会扣分,但红绿灯的设计一定要正确、人性化、统一。再比如,开发人员可能会因为疏忽大意写出 bug,但研发流程的设计和上线流程的发布不能有任何差错。因此,流程体系的设计,一方面要结合当前团队规模、业务特点和需要重点解决的问题来设计,另一方面也要在人员防错、效率提升、发挥团队集体智慧等维度进行综合考量。应该站在更高更抽象的角度去思考,不断思考一个倍受欢迎的园区应该如何设计,思考一个灵动、经典、永恒的建筑应该遵循怎样的模式,思考一个成功、优秀、卓越的研发团队应该需要怎样的流程和制度。 最后,反馈很重要。向上汇报很重要,向下反馈也很重要。能够保持顺畅的双向反馈和闭环管理,对研发团队的协作和沟通有着非常明显的积极作用。在向上汇报方面,要培养团队在正式汇报、会议汇报、私下沟通、书面总结、非正式场合等方面的沟通能力,提醒下属报喜也要报忧。凡事先记录,再跟进,最后反馈。反馈很重要,主动汇报更难得。 另一方面,同时也不要忽视向下反馈。好的爱,是双向的。团队也是如此,没有严格的上下级之分,只是分工和角色不同而已。作为管理者,不必总保持一种 "神秘感",让人 "捉摸不透 "才是牛。当团队做得好或有人做得好时,要记得在公开或私下场合给予肯定和赞许。业务有增长、业绩有提升时,别忘了给团队一些鼓励,或者安排一次下午茶或聚餐。在例会或正式会议上,也可以同步向大家传达一些重要信息和高层指示。"欲速则不达,欲远则同行"。 当向上汇报、向下反馈的沟通闭环形成后,同时结合前面研发过程的管理闭环,双管齐下,就能形成良性循环。如此反复,持之以恒,优秀卓越的研发团队,必将呈现。 能力、产出和效率 接下来,继续重复关于能力、产出和效率的话题。 站在不同的角色,以及一个企业经营、生存和发展所需要的基础上,我把研发生产力分为三个层次,分别是:一线员工关心的研发能力、管理层关心的软件产出和操作人员关心的企业生产效率。简单概括就是:既要把工作做好,又要能出成果,还要能帮企业赚钱。
-
R-FCN 论文理解 - I. R-FCN 入门 1.R-FCN 的贡献 提出位置敏感得分图,解决目标检测的位置敏感问题; 基于区域的全卷积网络框架,用于两阶段目标检测; 比 Faster-RCNN 快 2.5-20 倍(在 K40GPU 上使用 ResNet-101 网络,0.17 秒/图像);。 2.R-FCN 与传统两阶段网络的异同点 图 11 R-FCN 与传统两级网络的异同点 相同点:首先是两个两级检测框架(全卷积子网络+RoI-wise 子网络);其次是最终输出都是相应的类别和相应的 BB;不同点:如上图所示,R-FCN 与 Faster R-CNN 相比,R-FCN 有更深的共享卷积:如上图所示,与 Faster R-CNN 相比,R-FCN 有更深的共享卷积网络层,因此可以获得更多抽象特征;从图中表格可以看出,Faster R-CNN 的共享卷积子网络为 91 层,RoI-wise 子网络为 91 层。RoI-wise子网络为 10 层,而 R-FCN只有深度为 101 层的共享卷积子网络。与 R-CNN 相比,最大的区别在于直接获取整幅图像的特征图,然后提取相应的 ROI,而不是直接在不同的 ROI 上获取相应的特征图。
-
计算机视觉中,究竟有哪些好用的目标跟踪算法(下)-快速变形主要因为CF是模板类方法。容易跟丢这个比较好理解,前面分析了相关滤波是模板类方法,如果目标快速变形,那基于HOG的梯度模板肯定就跟不上了,如果快速变色,那基于CN的颜色模板肯定也就跟不上了。这个还和模型更新策略与更新速度有关,固定学习率的线性加权更新,如果学习率太大,部分或短暂遮挡和任何检测不准确,模型就会学习到背景信息,积累到一定程度模型跟着背景私奔了,一去不复返。如果学习率太小,目标已经变形了而模板还是那个模板,就会变得不认识目标。(举个例子,多年不见的同学,你很可能就认不出了,而经常见面的同学,即使变化很大你也认识,因为常见的同学在你大脑里面的模型在持续更新,而多年不见就是很久不更新) 快速运动主要是边界效应(Boundary Effets),而且边界效应产生的错误样本会造成分类器判别力不够强,下面分训练阶段和检测阶段分别讨论。 训练阶段,合成样本降低了判别能力。如果不加余弦窗,那么移位样本是长这样的: 除了那个最原始样本,其他样本都是“合成”的,100*100的图像块,只有1/10000的样本是真实的,这样的样本集根本不能拿来训练。如果加了余弦窗,由于图像边缘像素值都是0,循环移位过程中只要目标保持完整那这个样本就是合理的,只有目标中心接近边缘时,目标跨越边界的那些样本是错误的,这样虽不真实但合理的样本数量增加到了大约2/3(padding= 1),即使这样仍然有1/3(3000/10000)的样本是不合理的,这些样本会降低分类器的判别能力。再者,加余弦窗也不是“免费的”,余弦窗将图像块的边缘区域像素全部变成0,大量过滤掉分类器本来非常需要学习的背景信息,原本训练时判别器能看到的背景信息就非常有限,我们还加了个余弦窗挡住了背景,这样进一步降低了分类器的判别力(是不是上帝在我前遮住了帘。不是上帝,是余弦窗)。 检测阶段,相关滤波对快速运动的目标检测比较乏力。相关滤波训练的图像块和检测的图像块大小必须是一样的,这就是说你训练了一个100*100的滤波器,那你也只能检测100*100的区域,如果打算通过加更大的padding来扩展检测区域,那样除了扩展了复杂度,并不会有什么好处。目标运动可能是目标自身移动,或摄像机移动,按照目标在检测区域的位置分四种情况来看: 如果目标在中心附近,检测准确且成功。 如果目标移动到了边界附近但还没有出边界,加了余弦窗以后,部分目标像素会被过滤掉,这时候就没法保证这里的响应是全局最大的,而且,这时候的检测样本和训练过程中的那些不合理样本很像,所以很可能会失败。 如果目标的一部分已经移出了这个区域,而我们还要加余弦窗,很可能就过滤掉了仅存的目标像素,检测失败。 如果整个目标已经位移出了这个区域,那肯定就检测失败了。 以上就是边界效应(Boundary Effets),推荐两个主流的解决边界效应的方法,但速度比较慢,并不推荐用于实时场合。