html盒子模型

最新推荐文章于 2024-10-09 11:42:00 发布

Y2076205436

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量91

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Y2076205436/article/details/138634741

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			.box1{
				border-width: 1px;
				border-color: aqua;
				border-style: solid;/* solid;实线*/
				/* 复合写法:
				border:颜色 粗细 样式;顺序不变
				solid:实线 dashed:虚线  dotted:点线 */
				/* 颜色的写法:
				颜色的英语单词,rgb() */
				border: 1px solid rgb(85, 255, 255);
				width: 200px;
				height: 300px;
				padding:20px;
				padding-top: 20px;
				padding:10px 20px 30px 40px;
				/* top:上 left:左 right:右 bottom: 下 center:居中 */
				padding:里面写一个值 左右上下
				padding:两个值(上下.左右)
				padding:三个值(上,左右,下)
				padding:四个值(上'右'下'左)
			}
		</style>
	</head>
	<body>
		<div class="box1">
			hello world
		</div>
	</body>
</html>