【CSS学习笔记七】盒子模型

最新推荐文章于 2021-05-22 14:32:55 发布

思索与猫

最新推荐文章于 2021-05-22 14:32:55 发布

阅读量344

点赞数

分类专栏： CSS学习文章标签： CSS 盒子模型

本文链接：https://blog.csdn.net/qq_28997735/article/details/98477112

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

盒子模型：

所有HTML元素可以看作盒子

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

举图说明：
在这里插入图片描述
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，必需要知道的盒模型是如何工作的

计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

实例1：

<!DOCTYPE html>
<html>
	<head>
		<title>盒子模型</title>
		<meta charset = "utf-8"/>
		<style>
			div
			{
				background:lightgrey;
				width:250px;
				border:5px solid blue;
				padding:15px ;
				margin:5px ;
			}
		</style>
	</head>
	<body>
		<img src ="白.jpg" width = "300px">
		<div>p站id:75255636<br/>
			 宽=250+5*2+15*2+5*2=300px<br/>
			 刚好与图片宽度相同<br/>
		</div>
	</body>
</html>

结果：
在这里插入图片描述
实例2：

<!DOCTYPE html>
<html>
	<head>
		<title>盒子模型2</title>
		<meta charset = "utf-8"/>
		<style>
			div.a
			{
				background:lightgrey;
				height:250px;
				border:5px solid blue;
				padding:15px ;
				margin:5px ;
				float:left;
			}
			img
			{
				float:left;
			}
		</style>
	</head>
	<body>
		<div style = "width:800px">
			<div class = "a">			
				 p站id:75255636<br/>
				 高=250+5*2+15*2+5*2=300px<br/>
				 刚好与图片高度相同<br/>			 
			</div>
			<img src ="白.jpg" height = "300px">
		</div>
	</body>
</html>

结果：
在这里插入图片描述

思索与猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记七】盒子模型

盒子模型：所有HTML元素可以看作盒子CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。举图说明：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，...
复制链接

扫一扫

专栏目录