gpt4 book ai didi

css - 边框、边距和填充,天哪! (箱型)

转载 作者:行者123 更新时间:2023-11-27 22:30:56 26 4
gpt4 key购买 nike

box model应该很简单,但我就是不明白。

这是一个无意义的表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Box model test</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body style="position:relative; top=0px; left=0px">
<form action="for_submitted.php" method="post">

<fieldset style="top:0px; left: 0px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 16px; width: 81px; height: 14px;">Box 1</div>
</fieldset>

<fieldset style="top:0px; left: 128px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 64px; width: 22px; height: 14px;">Box 2</div>
</fieldset>

<div class="submit_button" style="top:64px; left:64px;"><input type="submit" name="submitButton"

value="Submit"></div>

</form>
</body>
</html>

及其 CSS

body
{
background-color: white;
width: 100%;
position: relative;
}

.panel, .label, fieldset
{
position: absolute;
font: 8px Arial;
}

.submit_button
{
position: absolute;
}

我希望它能显示

.---------..---------.
| box 1 | box 2 |
.---------..---------.

但在 MSIE8(我不得不使用)和 FireFox 中,它显示

.--------..--------.
| box 1 || box 2 |
.--------..--------.

它们为什么重叠?

最佳答案

这里有几个问题。首先,您需要重置 CSS 以删除浏览器的用户代理样式表添加的边距和填充。类似于 Eric Meyer's会做的。

其次,加入reset CSS后还是会有一些重叠。这是由边框引起的,边框的宽度不是 width 的一部分。 outline 不受此影响,因此我在下面的演示中使用它来显示元素实际上并未重叠,但我不建议使用它代替边框。相反,您应该在计算时考虑边框的宽度。

参见:http://jsbin.com/ofusa3/edit

关于css - 边框、边距和填充,天哪! (箱型),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3783812/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com