CSS盒子模型与布局实战：从基础到复杂设计-优快云博客

本文链接：https://blog.youkuaiyun.com/FacelessFix/article/details/118685305

1.盒子模型(box model)

1.1什么是盒子模型
盒子模型是css中布局用到的一种模型，将网页当作由若干个盒子嵌套的模型，盒子中可以放入html元素。
1.2盒子模型的组成
盒子模型由四部分组成
1.margin — 外边距
2.border — 边框
3.padding —内边距
3.content —内容

1.3盒子模型的作用
当确定了一个

的width和height后，再确定box的margin、border、padding的width和height后，这个

的位置和内容的大小就确定了。通过这样的方式可以让我们轻松的完成网页的布局。
盒子模型可以嵌套使得我们可以设计出复杂而美观的网页。
2.margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
清楚周围的元素区域，具体理解为就是当设置了margin为npx时，盒子会把贴近的元素顶开npx。如果想让盒子间有间隔，可以指定margin的值。
在这里插入图片描述

在这里插入图片描述
2.完成下图的网页布局

2.1将1，2合成一个div为left，3，4，5，6合成一个div为right；left和right合成一个div为all。
设定body的宽和高为 1600和800

	<body style=" margin: 0px; width:1600px;height: 800px; bisque; border: solid 2px; color: blue;">
		<div id="all" >
			<div id="left"></div>
			<div id="right"></div>
		</div>

2.2设置all的margin为18px，border：2px;
width=1600-40=1560px;
height=800-40=760 px;

#all{
			width: 1560px;
			height: 760px;
			margin: 20px;
			margin: 18px;
			border: solid 2px darkgoldenrod ;
		}

2.2

2.3设置left的width=500px ,则right的width=1560-500-20=1040px
right设置margin-left=20px
去掉all的border

#all{
			width: 1560px;
			height: 760px;
			margin: 20px;
			margin: 18px;
			
			display: table;
		}
		#left{
			width: 500px;
			height: 760px;
			
			border: solid 2px cadetblue;
			display: table-cell;
		}
		#right{
			width: 1040px;
			height: 760px;
			border: solid 2px cadetblue;
			display: table;
			margin-left: 20px;

2.3
2.4.1
在left中加入子div1、子div2

<div id="left">
				<div id="div1">
					<h1>1</h1>
				</div>
				<div id="div2">
					<h1>2</h1>
				</div>
			</div>

2.4.2
设置div1的height=190px margin-bottom=20px;div2的height=760-210=550px.去掉left的border.

#div1{
			border: solid 2px  blue;
			height: 190px ;
			margin-bottom: 20px;
		}
		#div2{
			border: solid 2px  #0000FF;
			height: 550px;
		}

2.4.3
在right中加入子div3和子div456，设置div3的height=260px ;margin-bottom=20px
,div4的heigh=760-260-20=480px.
在这里插入图片描述
2.5将div456中插入div4和div56.这样套下去有个问题456的边框显示不了了。不知道如何解决。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型完成布局</title>
		<style type="text/css">
		#all{
			width: 1560px;
			height: 760px;
			margin: 20px;
			margin: 18px;
			
			display: table;
		}
		#left{
			width: 500px;
			height: 760px;
			
			display: table-cell;
		}
		#right{
			border: solid 2px crimson ;
			width: 1040px;
			height: 760px;
			display: table;
			margin-left: 20px;
			
		}
		#div1{
			border: solid 2px  blue;
			height: 190px ;
			margin-bottom: 20px;
		}
		#div2{
			border: solid 2px  #0000FF;
			height: 550px;
		}
		#div3{
			border: solid 2px  blue;
			height: 260px ;
			
			}
		}
		#div456{
			margin-top: 1.25rem;
			border: #DC143C 5px solid;
			height: 400px;
		}
		</style>
	</head>
	<body style=" margin: 0px; width:1600px;height: 800px; bisque; border: solid 2px; background-color: bisque; ">
		<div id="all" >
			<div id="left">
				<div id="div1">
					1
				</div>
				<div id="div2">
					2
				</div>
			</div>
			<div id="right">
				<div id="div3">
					3
				</div>
				<div id="div456">
				456
				
				</div>	
			</div>
		</div>
	</body>
</html>