CSS盒子模型

牛哄哄的柯南
118 阅读4分钟

CSS盒子模型

div是什么

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

大概就这样，可以把整个网页分成不同的部分。
在这里插入图片描述
每个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 左、右边框颜色：#000border-color:#369 #000
border-color上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00border-color:#369 #000 #f00
border-color上、右、下、左边框颜色：#369、#000、#f00、#00fborder-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 class="d1">牛哄哄的柯南</div>
		<div class="d2">Keaf</div>
	</body>
</html>

效果截图：
在这里插入图片描述
不加边距的效果截图：
在这里插入图片描述

从上面的对比可以看出来内边距和外边距的作用了
内边距可以把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{
		    /* display: inline-block; */
		    border: solid 1px red;
		    width: 200px;
		    height: 100px;
		}    
		</style>
		<title></title>
	</head>
	<body>
		<div class="blockdiv">块1 </div><div class="blockdiv">块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 class="blockdiv">块1 </div><div class="blockdiv">块2 </div>
	</body>
</html>

效果截图2：
在这里插入图片描述
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
在这里插入图片描述

加油！

共同努力！

Keafmd

avatar
文章
阅读
粉丝