盒子模型——入门初级教程

云喵喵是淼淼

已于 2022-04-29 21:56:05 修改

阅读量645

点赞数 1

分类专栏： HTML学习笔记 css学习笔记文章标签： html5 css

于 2022-04-22 17:18:39 首次发布

本文链接：https://blog.csdn.net/weixin_48610566/article/details/124232356

版权

这一篇主要对盒子模型进行一个总论式的罗列，帮助每一位读者从大角度对盒子模型有一个概括式的了解，适合初学者简历基础认知，以方便对后期学习建立完整视角。下一篇会展开每一条细则的学习及实践，帮助学习者建立更系统化的认知。

文章目录

一、盒子模型是什么
二、设置盒子模型的语法讲解
三、应用实例
- 1. 代码编写
- 2. 运行情况

一、盒子模型是什么

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

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

二、设置盒子模型的语法讲解

1. 边框boder

1.1 边框样式border-style

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值
效果实现

1.2 边框宽度border-width

可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

 border-style:solid;
 border-width:medium;

1.3 边框颜色border-color

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

 border-style:solid;
 border-color:red;

1.4边框——单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

2.轮廓outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。
Outline所在位置

3.外边距margin

margin、padding与border非常相似，语法也可互相类推。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
位置图解

4.填充padding

padding是内容与内边距之间的距离。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

5.元素宽度计算

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

三、应用实例

1. 代码编写

<!DOCTYPE html>
<html</

最低0.47元/天解锁文章