盒子模型div

最新推荐文章于 2024-11-13 20:09:05 发布

dongsj_999

最新推荐文章于 2024-11-13 20:09:05 发布

阅读量112

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/dongsj_999/article/details/137869725

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.box1{/* solid实线,dotted点线,dashed虚线 */
				border:5px dotted rgb(241,23,189);/* 边框:大小px 实线 颜色 */padding:10px ;/* 外边距 */
				/* top上,bottom下,left左,right右,margin外边距 */
				width: 200px;
				height: 200px;
			}
			.box2{
				border:3px rgb(167,89,246) solid;
				border-top:5px solid #aaaaff;padding:10px ;
				border-bottom:5px #ff5500 dashed;
				width: 200px;
				height:200px;
				font-size:30px;
				/* pandding-top:25px;
				pandding-left:25px; */
				/* 复合写法顺序为四个值：上右下左；三个值：上 （左右）下；俩个值：（上下） （左右）*/
				padding: 10px 30px;
			}
		</style>
	</head>
	<body>
		<div class="box1">hello world</div><!-- div盒子标签 -->
		<div class="box2">hello box</div>
	</body>
</html>