盒子模型简单了解

最新推荐文章于 2023-03-06 20:48:21 发布

賣可樂的男孩

最新推荐文章于 2023-03-06 20:48:21 发布

阅读量438

点赞数

分类专栏：前端基础文章标签： css html css3

本文链接：https://blog.csdn.net/qq_52147099/article/details/126754072

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在前端中，一个内容的实际宽高实际由四部分组成：
margin（外边距）+border（边框）+padding（内边距）+内容 = 元素的实际宽高

下面我们就来了解什么是外边距，内边距以及边框：
在这里插入图片描述
随便打开一个网页按下F12（或右键选择检查），这里我们就看到一个元素的盒子模型（div、p…）；蓝色部分是我们的主体内容

设置外边距：
margin：0px 0px 0px 0px;
内边距相同原理：
padding：0px 0px 0px 0px;
四个值分别表示---->上右下左
写两个值和三个值分别代表什么？
两个值：第一个值代表上下第二个代表右左
三个值：第一个为上，第二个为右左第三个为下

设置边框：
border：2px solid red
三个值分别代表------>大小线条样式（实线，虚线）颜色

小案例：
在这里插入图片描述

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 60px;
				/* 3个值 大小 线条样式（实线，虚线）颜色 */
				/* left/right/top/bottom */
				border: 2px solid red;
				/* 内间距 单独设置*/
				/* padding-top: 10px; */
				/* 顺序：顺时针 上右下左 */
				padding: 10px 20px 30px;
				/* 外间距 与内间距相同  */
				margin: 10px 20px;
				overflow: hidden;
				
				/* 使用外间距以及内间距来进行元素位置的确定
					元素默认存在内外间距，为了方便取消位置确定
					*{
						padding：0
						margin：0
						}
				 */
				/* overflow：hidden ；给内部div写外间距，出现两个div一起移动的效果，在外层div写overflow */
			}
			.box_in{
				width: 100px;
				height: 20px;
				border: 2px solid green;
				
				padding: 10px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型
			外间距（上下左右）+边框（上下左右）+内边距（上下左右）+内容=元素实际宽高
			margin           border  		padding 		 文字/图片（width/height）
		 -->
		 
		 <div class="box">盒模型
			<div class="box_in">内层div</div>
		 </div>
	</body>
</html>

賣可樂的男孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型简单了解

给内部div写外间距，出现两个div一起移动的效果，在外层div写overflow */），这里我们就看到一个元素的盒子模型（div、p…蓝色部分是我们的主体内容。三个值分别代表------>大小线条样式（实线，虚线）颜色。/* 3个值大小线条样式（实线，虚线）颜色 *//* 使用外间距以及内间距来进行元素位置的确定。三个值：第一个为上，第二个为右左第三个为下。/* 顺序：顺时针上右下左 *//* 外间距与内间距相同 */四个值分别表示---->上右下左。/* 内间距单独设置*/
复制链接

扫一扫