盒子模型div

妧徽

于 2024-04-10 11:57:41 发布

阅读量93

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/woiyuan/article/details/137591030

版权

本文通过实例解析了HTML中的div元素与CSS盒子模型的关系，探讨了边框（border）、内边距（padding）和宽度、高度属性的设置，以及不同边框样式的应用。

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

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