Question

＆＃13;

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#Tri{
		width:0px;
		height:0px;
		border-top: 50px solid yellow;
		border-right:50px solid red;
		border-bottom:50px solid green;
		border-left:50px solid blue;
	}
	</style>
</head>

<body>
	<div id="Tri"></div>
</body>

＆＃13;

这是绘制四个三角形的代码，我能得到的是，在这段代码中，div的宽度是0px，但它的边界是50px，它怎么可能？

Answer 1

CSS中的“盒子模型”实际上是：

宽度+填充+边框=框的实际宽度

高度+填充+边框=框的实际高度

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Answer 2

因为width和height样式仅控制html元素的内部width和height。边框weight控制HTML元素的外部部分。

这个解释了内容没有空间

    #Tri{
    width:0px;
    height:0px;
    border-top: 50px solid yellow;
    border-right:50px solid red;
    border-bottom:50px solid green;
    border-left:50px solid blue;
}

虽然这个解释了内容中有空间，因为div元素占用了可用的width，因此它会延伸。

    #Tri{
    border-top: 50px solid yellow;
    border-right:50px solid red;
    border-bottom:50px solid green;
    border-left:50px solid blue;
}

受到css box model的攻击。</ p>

首先应用边距，以将元素与html文档中的其他对象相隔离。然后应用Border，其中显示基于边界的4个彩色三角形的示例。然后将应用Padding来将内容与border进行距离，最后将您将其样式设置为width:0px的元素内容和height:0px仅应用于border内{1}}。

Answer 3

好问题。以下是CSS框模型的说明：

css-box-model http://www.w3schools.com/css/box-model.gif

如果将内容（即高度和宽度）保留为0，则边框仍然存在。在W3Schools.com了解有关CSS框模型的更多信息。

Answer 4

您可以通过指定box-sizing来操纵盒子模型。

box-sizing: border-box;

应该达到你想要的效果。它也是Internet Explorer（以前用于？）应用盒子模型的方式。

边界如何比div本身更大？

4 个答案: