html - border怎么能比div本身大呢?

标签 html css

       
<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>

这是绘制四个三 Angular 形的代码,我看不懂的是这段代码中,div的宽度是0px,但是它的边​​框是50px,这是怎么回事?

最佳答案

好问题。这是 CSS 框模型的示例:

css-box-model
(来源:w3schools.com)

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

关于html - border怎么能比div本身大呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26499499/

相关文章:

html - CSS 布局问题

html - Bootstrap Library 引用打破了 anchor 悬停功能

html - 元标记?表单域放大焦点但在移动设备上聚焦时不会取消缩放?

php - 单击按钮后文本显示在下方

jquery - 在 FF/Chrome 上使用 jQuery 进行矩阵转换的 CSS3 转换

javascript - 如何在html a href标签中添加多个javascript变量

javascript - 响应式嵌入式 youtube

javascript - 如何让这个数组重复显示3次?

Javascript/CSS 灯箱仅适用于第一个元素?

html - 使用 css transition 和 scale() 时文本抖动