CSS盒子模型

小阿宁的猫猫

已于 2022-07-12 19:34:12 修改

阅读量179

点赞数 1

分类专栏： # CSS WEB 文章标签： css css3 html 前端 http

于 2022-07-11 21:17:37 首次发布

本文链接：https://blog.csdn.net/dyjkl/article/details/125730523

版权

WEB 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS盒子模型，包括内容、边框、内边距和外边距的概念及应用。边框样式、宽度、颜色的设置方法，以及外边距和内边距的定义和简写属性都有所阐述，并通过代码示例展示了这些属性如何影响元素的布局。此外，还提到了轮廓（outline）作为突出元素的一种方式。

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

1.什么是CSS盒子模型（box model）

(1)就是平时看到的网页,一个单独的版块就是一个盒子

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述

(2)模型属性包括:

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示具体的文本和图像。

(3)元素的宽度和高度：

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

div {
    width: 300px;               宽300
    border: 25px solid green;   边框25,绿色
    padding: 25px;              内边距25
    margin: 25px;               外边距25
}

元素宽度是多少？

=300+50（左右填充）+50（左右边框）+50（左右外边距）
=450px

2.边框（border）与轮廓（outline）

(1)边框样式（border-style）：

none: 默认无边框；
dotted: 点线边框；
dashed: 虚线边框；
solid: 定义实线边框；
double: 定义一个双层边框，边框的宽度均为 border-width的值

(2)边框宽度（border-width）：

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

或者使用 thick（粗）、medium（默认值）和 thin（细）

(3)边框宽度（border-width）：

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

(4)边框颜色（border-color）：

p
{
    border-style:solid;
    border-color:red;
}

CSS可对四个边框单独设置

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

(5)轮廓（outline）

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

p 
{
	border:1px solid red;
	outline:green dotted thick;
}

上述实例使用了属性简写。

3.外边距（margin）

(1)margi属性定义元素周围的空间

(2)定义不同的外边距：

该实例定义了一组上下均为100px，左右为50px的外边距。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

(3)简写属性：

对四个边距分别定义

 margin:25px 50px 75px 100px;

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

margin:25px 50px 75px;

上下为25px，左右为50px

 margin:25px 50px;

四个边距均为25px

margin:25px

4.填充（padding）

(1)定义一组上下为25px，左右为50px的内边距

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

(2)简写属性：

对四个内边距分别定义

padding:25px 50px 75px 100px;

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

padding:25px 50px 75px;

上下为25px，左右为50px

padding:25px 50px;

四个内边距均为25px

padding:25px;

5.演示代码

<!DOCTYPE html>
<html><meta charset="UTF-8">

<head>
	<title> CSS盒子模型 </title>
	<link rel="stylesheet" type="text/css" href="amiao7.css">
</head>

<body>
	<div class="width">元素的具体宽度</div>
	<p class="borderStyle">边框样式</p>
	<p class="borderColor">边框颜色</p>
	<p class="margin">外边距效果</p>
	<p class="padding">内边距效果</p>
</body>

</html>

amiao7.css

/* 设置元素具体宽度 */
.width{
	width:300px;
	border:25px solid rgb(69, 233, 69);
	padding:0px;
	margin:0px;
    }


/* 设置边框样式 */
.borderStyle{
	border-style:solid;      /* 实线边框 */
	border-width:thin;       /* 边框宽度为细 */
    }


/* 设置边框颜色 */
.borderColor{
	border-style:solid;
	border-width:thick;
	border-color:rgb(111, 212, 246);
    }


/* 设置外边距 */
.margin{
	margin:25px 50px;
    }


/* 设置内边距 */
.padding{
	padding:25px 20px 50px;
    }