CSS盒子模型-小白学习中

最新推荐文章于 2023-01-18 21:28:17 发布

小白学习中–.–

最新推荐文章于 2023-01-18 21:28:17 发布

阅读量358

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/mryer/article/details/109728866

版权

本文详细介绍了CSS盒子模型，包括概念、边框、内容、内边距和外边距。边框可以通过border-color、border-width和border-style属性进行定制。内容是盒子的核心，其大小可通过width、height和overflow属性控制。内边距padding和外边距margin则影响元素间距，margin允许使用负值。

摘要由CSDN通过智能技术生成

CSS盒子模型

一、盒子模型的概念

一个独立的盒子模型由内容、边框（border）、内边距（padding）和外边距（margin）4部分组成。
在这里插入图片描述
1、border是设定边框线条，盒子的其他部分是相对border而言的。
2、padding是指内容与border之间的距离，padding是透明的。
3、margin是border到图中的最外边虚线的范围，也是透明的。
4、最中间是盒子中显示的内容。

二、边框（border）

在设置边框时，可以分别使用border-color（边框的颜色）、border-width（边框的粗细）和border-style（边框的样式）属性。
1、border-color：用于指定border的颜色，可以是十六进制的值也可以是颜色的名称，如“#000000”、“red”。例如：

border-color:#000000;

2、border-width：用于指定border的粗细程度，其属性值可以是thin、medium和thick，也可以是长度计量值。例如：

border-width:5px;

3、border-style：用于指定border的样式，如果没有设置样式，那么边框的其他属性都不其作用，边框将不存在。其属性值如下：

属性值	功能描述
none	无边框（默认值）
hidden	隐藏边框，可以用来解决表格中边框冲突的问题
dotted	点状边框
dashed	虚线边框
solid	实线边框
double	双线边框
groove	3D凹槽边框
ridge	3D凸槽边框
inset	3D凹边边框
outset	3D凸边边框

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框样式</title>
		<style type="text/css">
			p{
    
				border-color: #0000FF;
				border-width: 5px;
			}
		</style>
	</head>
	<body>
		<p style="border-style: dotted;">为了正义</p>
		<p style="border-style: dashed;">为了正义</p>
		<p style="border-style: solid;">为了正义</p>
		<p style="border-style: double;">为了正义</p>
		<p style="border-style: groove;">为了正义</p>
		<p style="border-style: ridge;">为了正义</p>