gpt4 book ai didi

html - 边框如何影响内部 div 的大小?

转载 作者:太空宇宙 更新时间:2023-11-04 14:04:48 25 4
gpt4 key购买 nike

我想了解边框如何影响内部 div 的大小和可视化。我在我的应用程序中遇到了这个问题,在有错误的字段周围显示了一个边框,而且我似乎无法正确使用 CSS。 (顺便说一句,很明显我还没有完全“掌握”CSS。我正在研究它)。

考虑这个页面:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Booking Dojo Application</title>

<style type="text/css">

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#appContainer {
height: 50px;

width: 500px;
background-color: red;
}

#innerContainer {
height: 50px;
border-width: 5px;
border-style: solid;
/*width: 100%;*/
}

#ruler {
width: 500px;
background-color: blue;
height: 20px;

}

</style>

</head>

<body>
<div id="ruler"></div>

<div id="appContainer">
<div id="innerContainer">
<span>AHAH</span>
</div>
</div>
</body>

</html>

如果我没有指定内部 div 的宽度,那么它的宽度与父级相同包括边框。

但是,如果我确实指定了内部 div 的宽度,就会发生一些奇怪的事情:Chrome 将边框“放在外面”,但是......只在右边?!?

我显然遗漏了一些东西。所以:

  • 为什么我看到的是我所看到的?

  • 我想做的是知道内部 div 的宽度应该指定多少才能获得与“无宽度”相同的结果? (除了“99%”,这似乎在我的应用程序中“有效”,但是……嗯)

最佳答案

http://jsfiddle.net/X3gw6/1/

你需要:

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;

更多信息: http://css-tricks.com/box-sizing/

基本上,内部 div 高度和宽度更大,因为边框...导致问题...

关于html - 边框如何影响内部 div 的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21211454/

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