任务01-01-盒模型

最新推荐文章于 2024-09-11 20:31:47 发布

weixin_46137837

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量65

点赞数

文章标签： css web javascript html

本文链接：https://blog.csdn.net/weixin_46137837/article/details/118944581

版权

本文介绍了Web盒模型的概念，它将HTML元素视为包含内容、内边距、边框和外边距的矩形盒子。通过一个案例展示了如何利用CSS的border属性创造三角形沙漏图案，深入解析了盒模型的细节及其在网页设计中的应用。

摘要由CSDN通过智能技术生成

文章目录

初识web
1.思维导图
2.案例

初识web

盒模型 就是把html页面的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都有元素的内容,内边距(padding),边框(border),外边距(margin)组成.

1.思维导图

在这里插入图片描述

2.案例

利用 border 的特性做出三角形沙漏等图案

<!DOCTYPE html>
<html>
<head>
	<title>盒模型</title>
	<style type="text/css">
		div{
			width: 0;
            height: 0;
            border: 100px solid red;
            border-top-color: black;
            border-bottom-color: black;
            border-left-color: transparent;
            border-right-color: transparent;

		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>