web前端开发基础（五）（盒子模型）

象象zy

于 2024-05-30 19:45:15 发布

阅读量451

点赞数 4

分类专栏：网页 Dreamweaver web前端开发基础文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_75079701/article/details/139242679

版权

网页同时被 3 个专栏收录

6 篇文章

订阅专栏

Dreamweaver

6 篇文章

订阅专栏

web前端开发基础

6 篇文章

订阅专栏

一、盒子模型

CSS 盒子模型(Box Model)

在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素

它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）。

Margin(外边距)

清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）

Margin：auto自动调整到适合的居中位置

Border(边框)

围绕在内边距和内容外的边框

Padding(内边距)

清除内容周围的区域（两个值：第一个值上下，第二个值左右）

Content(内容)

盒子的内容，显示文本和图像

二、例子及代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
		*{
			margin: 0;
			padding: 0
		}
	.box{
		background-color: antiquewhite;
		width:300px;
		height:400px;
		padding:14px 14px;
	}
	.title{
		border-left: 3px solid blue;
		margin-bottom: 10px
	}
	.a p{
		text-align: center;
	}
	.b p{
		width:130px
	}
	.c{
		text-align: center;
		float: left
	}
	.d{
		text-align: center;
		float: right
	}
	</style>
</head>

<body>
<div class="box">
		<div class="title">日常</div>
		<div class="a">
		  <img src="file:///C|/Users/dell/Desktop/d27e6bcb5b94a9bcd70907edfb5722e.jpg" width="300" height="150">
<p>牵牛花</p>
	  </div>
		<div class="b">
			<div class="c">			
				<img src="file:///C|/Users/dell/Desktop/981d8ca57430fcc5707ae47a6859b4f.jpg" width="127" height="170">
<p>夕阳</p>
		  </div>
			<div class="d">			
				<img src="file:///C|/Users/dell/Desktop/62df6b8c8396ff435c25ef965e1e0a1.jpg" width="127" height="170">
<p>猫咪</p>
		  </div>
		</div>
	</div>
</body>
</html