`
qinxike
  • 浏览: 23151 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

层叠样式表CSS2规范之八 包含框模型

 
阅读更多

8 包含框模型

http://www.seodugu.com/css2/box.html

主目录:http://www.dimlau.com/very/css/cover.html#minitoc

目录

CSS包含框模型描述了文档树中元素产生的长方形包含框，它们根据可视化格式模型来布局。页面框是一类特殊的框，它的描述见页面介质一章。

8.1 框的尺寸

每一个框都有一个内容区（如文本，图形等等）以及可选的环绕在周围的边白，边框以及边距区域；每个区域的尺寸由下面讨论的属性规定。下面这张图展示了这些区域如何相互关联，以及用来引用边距，边框和边白等部分的术语：

Image illustrating the relationship between content, padding, borders, and margins.[D]

边距，边框和边白可以细分为左右顶底四部分（例如，在图形中，"LM"代表左边距，"RP"代表右边白，"TB"代表顶边框，等等）。

四个区域（内容，边白，边框和边距）的每一个边界称为一个“边”，因此，每一个框有四条边：

内容边或内边
内容边包围元素的经渲染的内容。
边白边
边白边围绕框的边白。如果边白宽度为0，则边白边和内容边重合。框的边白边定义了有框生成的包含块的边。
边框边
边框边围绕框的边框。如果边框宽度为0，边框边和边白边重合。
边距边或外边
边距边围绕框的边距。如果边距宽度为0，边距边和边框边重合。

每一个边可以细分为左右顶底四类。

框的内容区尺寸——内容宽度和内容高度——取决于若干个因素：产生框的元素是否设置了'width'或'height'属性，框是否包含文本或其它框，框是否是一个表格等等。框的宽度和高度讨论，参见可视化格式模型的细节一章。

框的宽度由左右边距、左右边框、左右边白和内容的宽度相加得到。高度由顶底边距、顶底边框、顶底边白和内容的高度相加得到。

框的不同区域的背景样式是这样决定的：

  • 内容区：产生该区域的元素的'background'属性。
  • 边白区：产生该区域的元素的'background'属性。
  • 边框区：产生该区域的元素的边框属性。
  • 边距区：边距总是透明的。

8.2 边距，边白和边框的示例

这个例子展示了边距，边白和边框是如何相互作用的。样本HTML文档如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is longer
           to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

结果是一个文档树，带有（在其它关系中）一个UL元素，它有两个LI子元素。

下面的第一张图显示了本例的呈现结果。第二张图显示了UL元素及其子元素LI元素的边距、边白和边框之间的关系。

Image illustrating how parent and child margins, borders, and padding relate.[D]

注意：

  • 每一个LI元素的框的内容宽度的计算是从上而下的；每一个LI框的包含块由UL元素生成。
  • 每一个LI框的高度由它的内容高度给出，还要加上顶底边白，边框和边距。注意LI框间垂直边距的重合。
  • LI框的右边白宽度设置为0（'padding'属性）。在第二个演示中效果明显。
  • LI框的边距是透明的——边距总是透明的——因此UL边白和内容区域的背景色（绿色）就透了出来。
  • 第二个LI元素规定了一个虚线边框（'border-style'属性）。

8.3 边距属性：'margin-top'，'margin-right'，'margin-bottom'，'margin-left'以及'margin'

边距属性设置了一个框的边距区的宽度。'margin'缩写属性设置所有四边的边距，而其它的边距属性只设置它们代表的那一边的边距。

本节定义的属性引用<margin-width>值的类型，可以是下面值之一：

<length>
指定一个固定的宽度。
<percentage>
百分比的计算基于生成的框的包含块的宽度。对于'margin-top'和'margin-bottom'是如此，除非是在页面上下文中（在那里，百分比相对于页面框的高度）。
auto
其表现细节请参见宽度和边距的计算一章。

边距属性允许有负值，不过可能有与实现相关的限制。

'margin-top'，'margin-right'，'margin-bottom'，'margin-left'
值： <margin-width> | inherit
初始值： 0
适用于： 所有元素
可否继承： 否
百分比： 相对于包含块的宽度
媒介： 图形

这些属性设置框的顶，右，底，左边距。

例子：

H1 { margin-top: 2em }
'margin'
值： <margin-width>{1,4} | inherit
初始值： 对于缩写属性未定义
适用于： 所有元素
可否继承： 否
百分比： 相对于包含块的宽度
媒介： 图形

'margin'是在样式表的同一处设置'margin-top'，'margin-right'，'margin-bottom'以及'margin-left'的缩写属性。

如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。

例子：

BODY { margin: 2em }         /* 所有的边距都设置为2em */
BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

上例中最后一个规则等同于如下的例子： 

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* 从相对边（右边）拷贝而来 */
}

8.3.1 边距重合

在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。

CSS2中，水平边距永远不会重合。

垂直边距可能在特定的框之间重合：

  • 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
  • 在一个浮动框和其它框之间的垂直边距不重合。
  • 绝对和相对定位的框的边距不重合。

请参见边距，边白和边框的示例一章，以了解边距重合的例子。

8.4 边白属性： 'padding-top'，'padding-right'，'padding-bottom'，'padding-left'及'padding'

边白属性规定了一个框的边白区的宽度。'padding'缩写属性设置所有四边的边白，而其它的边白属性只设置它们代表的那一边的边白。

本节所定义的属性引用<padding-width>值类型，可以取下列值：

<length>
指定一个确定宽度。
<percentage>
百分比的计算基于生成的框的包含块的宽度，即使是对于'padding-top'和'padding-bottom'也是如此。

和边距属性不同，边白值不可以是负数。和边距属性相似，边白的百分比值也基于生成的框的包含块的宽度。

'padding-top'，'padding-right'，'padding-bottom'，'padding-left'
值： <padding-width> | inherit
初始值： 0
适用于： 所有元素
可否继承： 否
百分比： 相对于包含块的宽度
媒介： 图形

这些属性设置一个框的顶，右，底，左的边白。

例子：

BLOCKQUOTE { padding-top: 0.3em }
'padding'
值： <padding-width>{1,4} | inherit
初始值： 对于缩写属性未定义
适用于： 所有元素
可否继承： 否
百分比： 相对于包含块的宽度
媒介： 图形

'padding'属性是在样式表中的同一处设置'padding-top'，'padding-right'，'padding-bottom'及'padding-left'的缩写属性。

如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。

边白区域的表面颜色或图形由'background'属性确定：

例子：

H1 { 
  background: white; 
  padding: 1em 2em;
}

上例中指定垂直边白（'padding-top'和'padding-bottom'）为'1em'而水平边白（'padding-right'和'padding-left'）为'2em'。'em'单位是相对于元素的字体尺寸的单位：'1em'等于使用的字体的尺寸。

8.5 边框属性

边框属性设置框的边框区的宽度，颜色和样式。这些属性使用于所有的元素。

注意。对于HTML而言，用户端对于某些元素（如按钮，菜单等）边框的渲染和其它“一般”元素可能有所不同。

8.5.1 边框宽度：'border-top-width'，'border-right-width'，'border-bottom-width'，'border-left-width'及'border-width'

边框宽度设置边框区的宽度。本节中定义的属性引用<border-width>值类型，可以取如下值：

thin
一个窄的边框。
medium
一个中等的边框。
thick
一个厚边框。
<length>
边框的厚度是显式值。显式的边框宽度不能为负数。

前三个值的解释取决于用户端。不过必须遵循如下关系：

'thin' <='medium' <= 'thick'.

另外，在一个文档中，这些宽度必须保持一致。

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
值： <border-width> | inherit
初始值： medium
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

这些属性设置框的顶底左右边框的宽度。

'border-width'
值： <border-width>{1,4} | inherit
初始值： 见个别属性
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

该属性是在样式表的同一处设置'border-top-width'，'border-right-width'，'border-bottom-width'及'border-left-width'的缩写属性。

如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。

例子：

下例中，注释行标出了结果的顶，右，底，左边框的宽度： 

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 边框颜色： 'border-top-color'，'border-right-color'，'border-bottom-color'，'border-left-color'及'border-color'

边框颜色属性指定了框的边框的颜色。

'border-top-color'，'border-right-color'，'border-bottom-color'，'border-left-color'
值： <color> | inherit
初始值： 'color'属性的值
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形
'border-color'
值： <color>{1,4} | transparent | inherit
初始值： 见个别属性
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

'border-color'属性设置四个边框的颜色。它的值的含义如下：

<color>
指定一个颜色值。
transparent
边框是透明的（尽管它还有宽度）。

'border-color'属性可以有一个到四个值，这些值设置不同的边，方法和'border-width'相同。

如果没有用边框属性指定一个元素的边框颜色，用户端必须用该元素的'color'属性来作为边框颜色的计算值。

例子：

下例中，边框是黑色实线。 

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 边框样式：'border-top-style'，'border-right-style'，'border-bottom-style'，'border-left-style'及'border-style'

边框样式指定框的边框的线型（实线，双线，点线等）。本节中定义的属性引用<border-style>值类型，取值为：

none
没有边框。该值迫使'border-width'的计算值为0。 to be '0'.
hidden
和'none'相似，除非在表格元素中解决边框冲突时。
dotted
边框是一系列的点。
dashed
边框是一系列的短线条的段。
solid
边框是一条单一的线。
double
边框有两条实线。两条线宽和其中的空白的宽度之和等于'border-width'的值。
groove
边框看上去好象是雕刻在画布之内。
ridge
和'grove'相反：边框看上去好象是从画布中凸出来。
inset
该边框使整个框看上去好象是嵌在画布中。
outset
和'inset'相反：该边框使整个框看上去好象是从画布中凸出来。

所有的边框画在框的背景之上。'groove'，'ridge'，'inset'和'outset'类型的边框的颜色取决于元素的'color'属性。

和CSS一致的用户端可能将'dotted'，'dashed'，'double'，'groove'，'ridge'，'inset'及'outset'为'solid'。

'border-top-style'，'border-right-style'，'border-bottom-style'，'border-left-style'
值： <border-style> | inherit
初始值： none
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形
'border-style'
值： <border-style>{1,4} | inherit
初始值： 参见各个别属性
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

'border-style'属性设置四边的样式。它可以有一个到四个值，分别设置不同的边，方法同'border-width'。

例子：

#xy34 { border-style: solid dotted }

上例中，水平边框是'solid'而垂直边框是'dotted'。

由于边框样式的初始值是'none'，因此，除非设置了边框样式，没有任何边框可见。

8.5.4 边框缩写属性：'border-top'，'border-bottom'，'border-right'，'border-left'及'border'

'border-top'，'border-right'，'border-bottom'，'border-left'
值： [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
初始值： 见各个别属性
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

这是一个设置框的顶底左右边框的宽度，样式和颜色的缩写属性。

例子：

H1 { border-bottom: thick solid red }

上面这一规则将设置H1元素底边框的宽度，样式和颜色。省略掉的值将设置为它们各自的初始值。由于下面这一规则并没有指定边框颜色，边框的颜色将由'color'属性指定： 

H1 { border-bottom: thick solid }
'border'
值： [ <'border-width'> || <'border-style'> || <color> ] | inherit
初始值： 见各个别属性
适用于： 所有元素
可否继承： 否
百分比： N/A
媒介： 图形

'border'属性是设置框的四个边框为相同的宽度，颜色和样式的缩写属性。和缩写属性'margin'和'padding'不同，'border'属性不可以对四边设置不同的值。要达到这一目的，必须使用另外一个或多个边框属性。

例子：

例如，下面的第一条规则等同于跟随其后的四个规则： 

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

由于在某种程度上，属性具有覆盖的特性，因此指定规则的顺序很重要。

例子：

考虑这样一个例子： 

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

在上例中，左边框的颜色是黑色，而其它边框的颜色是红色。这是因为'border-left'设置了宽度，样式和颜色。由于'border-left'属性并没有给出颜色值，它将从'color'属性中获得值，并与'color'属性设置在'border-left'之后这一事实无关。

分享到：
| CSS基础教程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3(上)CSS3是CSS（层叠样式表）技术的升级版本.md

    CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了 CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...

    CSS（层叠样式表）笔记.txt

    CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它赋予网页以美观的外观和结构。通过将HTML文档与CSS样式分离，开发人员可以更好地管理、修改和维护网页的外观。以下是关于CSS笔记的详细描述： 样式规则： ...

    WEB前端CSS层叠样式表思维导图（Xmind）

    本人网页制作课程所用的思维导图，包含了所有web前端技术的概念和知识点，比较适合学生、初学者建立一个初步的思维模型，另外本人还有html标语言的思维导图，欢迎大家下载查看。

    CSS常用属性一览表

    包含常用的css属性，层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还...

    精通CSS高级Web标准解决方案-包含源码(高清PDF中文版)

    本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后...

    css3教程.MP4

    CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。 CSS3的改变有很多，增加了...

    CSS和CSS3思维导图（xmind版）

    CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS工作组发布推荐...

    CSS3基本样式带习题答案

    CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

    css权威指南（第三版）

    本书为你展示了如何遵循CSS最新规范（CSS2和CSS2.1）将层叠样式表的方方面面应用于实践。, 通过本书提供的诸多示例，你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观，以及如何得到HTML力不能及的...

    Web前端CSS视频教程课堂笔记

    层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言...

    Html样式表

    介绍了HTML&CSS;应用，其中描述CSS层叠样式表中的DIV是一种XHTML所支持的所有标签，DIV盒模型详解及DIV+CSS设计思路布局.

    demo css源码

    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言...

    使用CSS脉动星球效果

    使用CSS脉动星球效果，CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态...

    html+css+js网页设计

    样式化页面布局： 使用 CSS 来设计页面的布局，包括定位、盒模型、布局方式等。 样式表达能力： 使用 CSS 选择器和属性来为页面元素应用样式，包括颜色、字体、大小、间距等。 响应式设计： 使用媒体查询和其他技术...

    看完不迷糊的 CSS 盒子模型介绍

    CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档...

    完整详细CSS 面试知识点总结合集

    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言...

Magicbox
Global site tag (gtag.js) - Google Analytics