CSS 盒子模型-一一网

div是什么

div 可定义文档中的分区（division），div 标签可以把网页分割为独立的、不同的部分，不像 h1，p 标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给 div 元素加上 id 或 class，然后通过 css 选中某个 div，对其进行样式美化。

大概就这样，可以把整个网页分成不同的部分。
图片[1]-CSS 盒子模型-一一网
每个 div 可以看成一个盒子

一个盒子中主要的属性有 5 个：width、height、padding、border、margin。如下：
width：内容的宽度。CSS 中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度 = 内容宽度 + padding+border
height：内容的高度。CSS 中 height 指的是内容的高度，而不是盒子的高度。盒子的高度 = 内容高度 + padding+border
padding：内边距
border：边框
margin：外边距

元素宽高

width：宽度
height：高度

width:xxpx
height:xxpx

复制代码

样例代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div>牛哄哄的柯南</div>
	</body>
</html>


复制代码

效果截图：

边框颜色

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369
border-right-color	右边框颜色	border-right-color:#369
border-bottom-color	下边框颜色	border-bottom-color:#fae45b
border-left-color	左边框颜色	border-left-color:#efcd56
border-color	四个边框为同一颜色	border-color:#eeff34
border-color	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000
border-color	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00
border-color	上、右、下、左边框颜色：#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f

边框粗细

border-width: 像素值

border-width:5px

复制代码

边框样式

border: solid;

复制代码

属性值	说明
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框，两个边框的宽度和 border-width 的值相同
groove	定义 3D 沟槽边框
ridge	定义 3D 脊边框
inset	定义一个 3D 的嵌入边框
outset	定义一个 3D 突出边框

样例代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: cadetblue;
				
				border: solid;
				border-width: 5px;
				border-color:#369 #000 #f00 #00f;
			}
		</style>
	</head>
	<body>
		<div>牛哄哄的柯南</div>
	</body>
</html>


复制代码

效果截图：

盒子模型总尺寸 = border-width+padding+margin + 内容宽度

内边距

内边距 (padding-top 、left、right、bottom)

检索或设置对象四边的内部边距。

传参个数	说明
如果提供全部四个参数值	将按上、右、下、左的顺序作用于四边。
如果只提供一个	将用于全部的四边。
如果提供两个	第一个用于上、下，第二个用于左、右。
如果提供三个	第一个用于上，第二个用于左、右，第三个用于下。

注意：
内联对象可以使用该属性设置左、右两边的内补丁。
若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
对应的脚本特性为 padding。

外边距

外边距 (margin-top 、left、right、bottom)

传参个数	说明
如果提供全部四个参数值	将按上、右、下、左的顺序作用于四边。
如果只提供一个	将用于全部的四边。
如果提供两个	第一个用于上、下，第二个用于左、右。
如果提供三个	第一个用于上，第二个用于左、右，第三个用于下。

注意：
内联对象可以使用该属性设置左、右两边的外补丁。
若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。
对应的脚本特性为 margin。

外边距的妙用
网页居中对齐
前提：居中对齐的网页元素必须设定宽度

margin:0px  auto;

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.d1{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
	
				border: solid;
				border-width: 5px;
				border-color:#369 #000 #f00 #00f;
				
				margin-top: 10px;
				margin-right: 20px;
				padding-top: 10px;
			}
			.d2{
				
				width: 200px;
				height: 200px;
				background-color: cadetblue;
				
				border: solid;
				border-width: 5px;
				border-color: #f00 #00f #369 #000;
				
				margin-top: 10px;
				padding-top: 10px;
				padding-left: 30px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div>牛哄哄的柯南</div>
		<div>Keaf</div>
	</body>
</html>


复制代码

效果截图：
图片[2]-CSS 盒子模型-一一网
不加边距的效果截图：

从上面的对比可以看出来内边距和外边距的作用了
内边距可以把 div 变大
外边距可以使 div 移动位置

display 属性

设置为 none 不显示
块级元素 (block)，可以设置宽高，行内元素(inline) 不可以设置宽高
如果想对行内元素设置宽高，可以把元素变为行内块级元素 (inline-block)

主要应用就是我们可以利用 display: inline-block 来使两个 div 块在一行显示

不写 display: inline-block;

样例代码 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		.blockdiv{
		    
		    border: solid 1px red;
		    width: 200px;
		    height: 100px;
		}    
		</style>
		<title></title>
	</head>
	<body>
		<div>块1 </div><div>块2 </div>
	</body>
</html>


复制代码

效果截图 1：

加上 display: inline-block;

样例代码 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		.blockdiv{
		    display: inline-block;
		    border: solid 1px red;
		    width: 200px;
		    height: 100px;
		}    
		</style>
		<title></title>
	</head>
	<body>
		<div>块1 </div><div>块2 </div>
	</body>
</html>


复制代码

效果截图 2：
图片[3]-CSS 盒子模型-一一网
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]