CSS 框模型概述
术语翻译
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）
1 CSS 内边距
1.1
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
1.2 单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有下内边距。
</td>
</tr>
</table>
</body>
</html>
2 CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许你规定元素边框的样式、宽度和颜色。
p.dotted {border-style: dotted}
2.1 边框的样式
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
2.2 定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style border-right-style border-bottom-style border-left-style
2.3 定义多种样式
您可以为一个边框定义多个样式，例如： p.aside {border-style: solid dotted dashed double;} 上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
2.3 边框的宽度
您可以通过 border-width 属性为边框指定宽度。
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为（这样写法称为值复制）：
p {border-style: solid; border-width: 15px 5px;} （第一个15表示上下，第二个15表示左右）
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
2.3 边框的颜色
2.3.1设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
值 描述
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。
2.3.2 定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
3 CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
3.1
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。 下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白： h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置一个百分比数值：
p {margin : 10%;}
3.2 单边外边距属性
您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
分享到：
相关推荐
框模型的一个重要特性是，增加内边距、边框和外边距不会改变内容区域的尺寸，但会影响元素整体所占的空间。因此，当设置元素宽度时，实际宽度会包括内容、内边距和边框的总和。 在CSS3中，还引入了新的特性如边框...
学习CSS盒子模型有助于理解元素如何占据空间，以及如何通过调整内容、内边距、边框和外边距来优化布局。实践中，可以通过调整这些属性，实现各种复杂的网页设计效果，比如响应式布局、栅格系统等。配合使用`display`...
盒子模型的总宽度和高度计算方式为：内容宽度/高度 + 左右内边距 + 左右边框宽度 + 左右外边距。在CSS中，可以通过`box-sizing`属性改变元素的盒子模型行为。默认的`content-box`模式下，元素的总尺寸包含内容、内...
CSS盒模型主要分为两种：标准盒模型（W3C Box Model）和IE盒模型（Internet Explorer Box Model）。这两种模型在处理元素宽度和边距时有所不同。 #### W3C盒模型： - 内容区域（Content）：实际的内容，如文字或...
CSS盒子模型，又称盒状模型（Box Model），是指HTML或CSS中的每个元素都可以被看作一个矩形的盒子，这个盒子由四个部分组成：内容区域（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。...
框模型是Web程序开发中的核心概念，它定义了网页元素如何在页面上占据空间，包括元素的内容、内边距、边框和外边距。本章主要围绕这些概念展开，详细讲解了CSS框模型的工作原理和应用。 11.1 概述： 框模型（Box ...
在CSS布局中，盒子模型（Box Model）是一个基础概念，它描述了HTML元素如何占用空间，包括元素的内容区域（content）、内边距（padding）、边框（border）以及外边距（margin）。这个模型对于理解和计算元素的实际...
需要注意的是，这些尺寸通常是指内容区域的尺寸，不包括边框、内边距和外边距。 - **Background-color（背景颜色）** - 设置元素背景颜色，例如：`background-color: #f9f9f9;`。 #### 示例 下面通过具体的代码...
盒模型描述了网页元素如何占用空间，包括元素的内容、内边距、边框和外边距。对于精确控制元素的尺寸和间距，理解盒模型至关重要。 1. **内容（Content）** - 元素的内容区域包含了实际的文本、图像或其他非空白...
在HTML和CSS的世界里，每个元素都被视为一个矩形的“盒子”，它包含内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分。这个模型定义了元素占用空间的方式，对于精确控制网页元素的布局至关重要...
CSS盒模型是网页布局的基础，盒模型的概念是指网页元素和它周围空间所形成的矩形区域，包括内容区域、内边距、边框和外边距四个部分。 二、盒模型的相关属性 盒模型的相关属性包括宽度、高度、内边距、外边距和...
在CSS中，每个元素都被视为一个矩形的“盒子”，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。这个模型帮助我们理解元素占据的空间和相互之间的间距。 1. 内容（Content）：这是盒子的核心...
CSS的Box Model是Web开发中理解布局的关键概念，它定义了元素如何占据空间以及其内容、内边距、边框和外边距的关系。Box Model分为两种：W3C标准模型和IE传统模型。 1. W3C标准Box Model： 在W3C的标准模型中，元素...
在W3C标准盒模型中，元素的总宽度和高度只包括内容区和内边距，而边框和外边距并不计算在内。而在IE盒模型中，元素的总尺寸则包含内容、内边距、边框和外边距。 理解和掌握盒模型对于开发者来说非常重要，因为它...
2. **标准盒模型**（CSS Box Model）：这是现代浏览器遵循的标准，宽度和高度只包含内容区域，不包括边框和内边距。默认情况下，大部分现代浏览器使用这种模型。如果需要将边框和内边距包含在内，可以使用`box-...
盒子模型（Box Model）是Web页面布局的基本框架，每个HTML元素都可以看作是一个矩形的"盒子"，包含内容区、内边距、边框和外边距四个部分。具体结构如下： 1. 内容区（Content）：盒子的核心区域，存放实际的文本或...
内容区包含实际的文本或图像，内边距是内容与边框之间的空间，边框围绕内容和内边距，而外边距则是边框与其他元素之间的空间（如图2所示）。 ### 1.1 盒子的属性值简写形式 为了简化CSS编写，可以使用简写形式来...
盒模型，又称Box Model，是Web浏览器用于计算元素尺寸的一种方式，它将每个HTML元素视为一个矩形盒子，包含边距（Margin）、边框（Border）、填充（Padding）和实际内容（Content）。盒模型对于CSS布局至关重要，...
盒模型定义了元素的总尺寸，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。而行框模型则关注于元素内部行内内容的垂直排列。 对于行内非替换元素，如文本，其高度不由盒模型决定...
1. 盒模型（Box Model）：盒模型是CSS布局的基础，它描述了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。在盒模型中，每个元素都可以看作一个矩形盒子，盒子内的...