PHP基础学习第八篇CSS盒子模型（什么是盒子模型、边框与轮廓、外边距、内边距）

XM..

于 2022-09-26 21:29:51 发布

阅读量547

点赞数 4

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/xiaomoge__/article/details/127003464

版权

HTML 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一、什么是CSS盒子模型（box model）

所有HTML元素可以看作盒子，盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距）-清除边框外的区域，外边距是透明的。

Border（边框）-围绕在内边距和内容外的边框。

Padding（内边距）-清楚内容周围的区域，内边距是透明的。

Content（内容）-盒子的内容，显示具体的文本和图像。

元素的宽度和高度：

当指定一个CSS元素的宽度和高度时，我们只是设置内容区域的宽度和高度。而完整大小的元素，必须添加内边距，边框和外边距。

div{

width:300px;

border:25px solid green;

padding:25px;

margin:25px;

}

二、边框（border）与轮廓（outline）

边框样式（border-style）:

none：默认无边框；

dotted：点线边框；

dashed：虚线边框；

solid：定义实线边框；

double：定义一个双层边框，边框的宽度均为border-width的值；

边框宽度（border-width）：

两种定义方式：可指定长度值，如2px或0.1em（单位为px，pt，cm，em,等）；

或者使用thick（粗）、medium（默认值）和thin（细）这三个关键字；

举例：

p.one{

border-style:solid;

border-width:5px;

}

p.two{

border-style:solid;

border-width:medium;

}

边框颜色（border-color）:

border-style:solid;

border-color:red;

}

备注：CSS可以对四个边框单独设置

border-top-style:dotted

border-bottom-style:dotted;

border-left-style:solid;

border-right-style:solid;

}

轮廓（outline）

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，可设置样式、颜色和宽度。

备注：下面实例使用了简写

border:1px solid red;

outline:green dotted thick;

}

三、外边距（margin）

margin（外边距）属性定义元素周围的空间。

定义不同的外边距：该示例定义了一组上下均为100px,左右为50px的外边距。

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

简写属性：

margin:25px 50px 75px 100px;

对四个边距分别定义

margin:25px 50px 75px;

上为25px,左右为50px，下为75px

margin:25px 50px;

上下为25px,左右为50px

margin:25px;

四个边距均为25px

四、内边距（padding）

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

定义了一组上下为25px,左右为50px的内边距

下图为实验操作代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css盒子模型</title>
		<link rel="stylesheet" type="text/css" href="实验3.css">
	</head>
	<body>
		<div class="with">用于展示元素的具体宽度</div>
		<p class="border-style">用于展示边框样式和颜色</p>
		<p class="border-margin">用于展示外边距效果</p>
		<p class="padding">用于展示内边距效果</p>
	</body>
</html>

.with{
	width:300px;
	border:25px solid green;
	padding:20px;
	margin:20px;
}
.border-style{
	border-style:solid;
	border-width:thick;
	border-color:green;
}
.border-margin{
	margin:25px 50px;
}
.padding{
	padding:25px 20px 50px;
}

效果如下：