揭秘CSS(第 1 版)
4.1 概述
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

在盒模型中,把页面上的任何一个元素都看做一个盒子,每个盒子由内容(content)、内边距(padding)、边框(border)、外边距(margin)这 4 个区域组成。内边距、边框、外边距是可选的,并且,都被分解为上、右、下、左 4 个部分。

一个盒子中,各个区域之间的关系,以及描述内边距、边框、外边距的属性和所涉及到的相关术语见图 4‑1:

盒模型示意图
图4-1 盒模型示意图

从上图可以清楚看到,内容区域处于中央,围绕着内容区域的是内边距区域、边框区域和外边距区域,并把每个区域的边缘被称作边界。

一个元素共有 4 个区域,每个区域都各有上、右、下、左 4 条边界:

  • 内容区域的外边缘称作内容边界(content edge)或内边界(inner edge)。把 4 条内容边界所形成的区域称作 content-box;
  • 内边距区域的外边缘称作内边距边界(padding edge)。如果 padding 的宽度为 0,则内边距边界与内容边界相同。把 4 条内边距边界所形成的区域称作 padding-box;
  • 边框区域的外边缘称作边框边界(border edge)。如果 border 的宽度为 0,则边框边界与内边距边界相同。把 4 条边框边界所形成的区域称作 border-box;
  • 外边距区域的外边缘称作外边距边界(margin edge)或外边界(outer edge)。如果 margin 的宽度为 0,则外边距边界与边框边界相同。把 4 条外边距边界所形成的区域称作 margin-box。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验