前端开发--css--盒子模型

最新推荐文章于 2024-08-02 22:44:35 发布

小哦--

最新推荐文章于 2024-08-02 22:44:35 发布

阅读量147

点赞数

分类专栏： html +css +javascript

本文链接：https://blog.csdn.net/sundanping_123/article/details/94594485

版权

html +css +javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>盒子模型</title>
	<style type="text/css">
	
		.box1{
			width: 200px;
			height: 200px;
			background-color: pink;

			border-top-color: green;
			border-top-width: 10px;
			/*  实线 solid  虚线 dashed  点线 dotted */
			border-top-style: solid;

			/* 可以合为一句，下面设置底部、左边、右边*/
			border-bottom: 10px solid green;

			border-left: 10px dashed green;

			border-right: 10px dotted green;

		}

		.box2{
			width: 200px;
			height: 200px;
			background-color: gold;

			/* 如果边框的属性都一样，就可以直接设置*/
			border:10px solid black;
		}

	</style>
</head>
<body>
	<div class='box1'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>

	<br>

	<div class='box2'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>盒子模型</title>
	<style type="text/css">

		.box1{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:10px solid black;
		}

		.box2{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:10px solid black;

			padding-top: 20px;
			padding-left: 40px;
			padding-right: 60px;
			padding-bottom: 80px;

			/* 这里同样可以合并，按照顺时针的顺序  .上、右、下、左，四个参数一一对应。
			如果三个参数，那就是上、左右、下。
			如果两个参数，那就是上下、左右。
			如果只有一个参数，就表示上右下左都是一样的。
			padding:20px  60px  80px  40px;
			*/
		}

	</style>
</head>
<body>
	<div class='box1'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>

	<br>

	<div class='box2'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>盒子模型</title>
	<style type="text/css">

		.box1{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:10px solid black;
			padding: 20px;
		}

		.box2{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:10px solid black;
			padding: 20px;
			margin: 0 0 0 300px ;
		}

		.box3{
			width: 200px;
			height: 200px;
			background-color: gold;
			border:10px solid black;
			padding: 20px;
			margin: -280px 0 0 600px ;
		}

	</style>
</head>
<body>
	<div class='box1'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>

	<br>

	<div class='box2'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>

	<br>

	<div class='box3'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>
</body>
</html>

在这里插入图片描述
例题：主要考察的是计算：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>盒子模型</title>
	<style type="text/css">

		.box1{
			width: 140px;
			height: 140px;
			background-color: gold;
			border:10px solid black;
			padding: 20px;
		}

	</style>
</head>
<body>
	<div class='box1'>这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。这是一个盒子的内容。</div>
</body>
</html>

选中盒子，右击–检查元素
在这里插入图片描述