我试图理解绝对的位置.我有以下代码段
div#div1 {
position: absolute;
left: 0;
right: 0;
height: 100px;
border: 1px solid green;
background-color: green;
width: 100%;
}
td {
position: relative;
border: 1px solid blue;
height: 18px;
width: 100%;
}
table {
width: 100%;
}Run Code Online (Sandbox Code Playgroud)
<table>
<tr>
<td>
<div id="div1">
This is a heading with an absolute position
</div>
</td>
</tr>
</table>Run Code Online (Sandbox Code Playgroud)
由于定位绝对,我在顶部获得了一些额外的空白区域.当我指定时top:0px,它工作正常.
有人可以解释为什么只使用左右定位时会留下一些空间.
我有一个看起来像这样的html页面
body {
height: 200px;
background-color: lightblue;
padding: 0px;
border: 1px solid red;
}Run Code Online (Sandbox Code Playgroud)
<html>
<head>
</head>
<body>
<p> First para </p>
<p> Second para </p>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
在这里,我指定团体height作为200px和background-color身体元素"lightblue".为什么background-color身体适用于整个页面,而不仅仅是200px身体的高度?
我正在尝试为我们的富文本组件之一编写测试,该组件是使用 React js 中的 slate js 编辑器实现的。因此,在编写测试时,我正在检索元素 div[contenteditable='true'],但无法模拟更改、模糊、焦点等事件。附加到编辑器组件的处理程序不会被调用。我尝试了多种组合,但没有成功。有人可以帮忙吗?是否可以使用测试库模拟 contenteditable 元素的事件(contenteditable 使用 slatejs 实现)?
contenteditable reactjs slatejs react-testing-library testing-library