CSS学习之盒子模型学习

最新推荐文章于 2024-06-23 13:17:15 发布

原创最新推荐文章于 2024-06-23 13:17:15 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js

CSS教程专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解CSS盒子模型，包括div标签的特点、盒子模型的组成部分如外边距(margin)、边框(border)、内边距(padding)及内容区域的设置方法。通过实例演示如何调整元素的布局和间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<title>css的盒子模型学习</title>
		<meta charset="UTF-8"/>
		<!--
			css的盒子模型学习：
				div标签：
					块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
					特点：
						默认宽度是页面的宽度，但是可以设置。
						高度默认是没有的，但是可以设置。(可以顶开)
						如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
				盒子模型：
					外边距:margin
						作用：用来设置元素和元素之间的间隔。
						居中设置:margin:0px auto;上下间隔是0px,水平居中。
						可以根据需求单独的设置上下左右的外边距。
					边框：border
						作用：用来设置元素的边框大小
						    可以单独设置上下左右
					内边距：padding
						作用：设置内容和边框之间的距离
						注意：内边距不会改变内容区域的大小
						可以单独的设置上下左右的内边距
					内容区域：
						作用：改变内容区域的大小。
						设置宽和高即可改变内容区域的大小。
		-->
		<style type="text/css">
			img{
				width: 49.53%;
				height: 150px;
			}
			#showdiv{
				border: solid 100px;
				width: 40%;
				height: 200px;
				margin-bottom: 10px;
				margin: 0px auto;
				padding: 20px;
			}
			#div01{
				border: dashed 3px orange;
				width: 40%;
				height: 200px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			<img src="img/a1.jpg"/>
			<img src="img/a1.jpg"/>
		</div>	
		<div id="div01">
			
		</div>
	</body>
</html>