#盒子模型

最新推荐文章于 2024-09-02 11:46:47 发布

撒都不干

最新推荐文章于 2024-09-02 11:46:47 发布

阅读量199

点赞数 5

文章标签： html

本文链接：https://blog.csdn.net/c200310045217/article/details/138661703

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style type="text/css">
			/*
			border:边框
			solid:实线	dashed:虚线	dotted:点线
			top:上	bottom:下	left:左	right:右
			margin:外边距	padding:内边距
			width:宽	height:高 
			单位：px像素
			颜色的三种表示：
			1.颜色的单词
			2.rgb（0~255,0~255,0~255）
			3.#0000000
			*/
			.box1{
			/*	单独写边框
				border-top:;
				border-bottom: ;
				border-left: ;
				border-right: ;
			*/
				/* 边框:大小1px 实线 边框颜色 红色 */
				border: 1px solid red; 		/* 边框复合写法 */
				width: 200px;	/* 宽 */
				height: 200px;	/* 高 */
				font-size: 36px;	/* 字体大小 */
			/* 单独写法
				padding-top: 30px;
				padding-left: 30px;
				padding-bottom: 30px;
				padding-right: 30px; 
			*/
			/* 	复合写法：
				四个值顺序: 顺时针方向（上右下左）
				三个值：上，（左/右），下
				两个值：（上/下），（左/右）
				一个值：（上/下/左/右）
			*/
			padding:10px 20px  ;
				
			}
			.box2{
				border: 1px solid green;
				width: 200px;	/* 宽 */
				height: 200px;	/* 高 */
			}
		</style>
	</head>
	<body>
		<div class="box1"> hello word！</div>
		<div class="box2">hello box</div>
	</body>
</html>