跳转到内容

层叠样式表/盒子模型

来自维基教科书，开放的书籍，开放的世界

块级元素和内联元素 - display 属性

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

CSS 不理解底层文档的语义。特别是它不知道下面的 HTML 片段中的 p 元素应该从新行开始，而 em 元素不应该。

    <p>This paragraph contains an <em>emphasised</em> word.</p><p>This paragraph does not.</p>

display 属性提供此信息。

CSS1 为 display 定义了四个值。CSS2.1 添加了两个更通用的值，以及用于创建表格的多个值。表格值在 显示表格 中进行了描述。

  • block - 这会导致元素从新行开始。
  • inline
  • list-item
  • none
  • inline-block (CSS2.1)
  • run-in (CSS2.1)

这些值将在后面的部分中详细解释。

注意：在 CSS1 中，display 的初始值为 block。在 CSS2.1 中，这将更改为 inline。此属性应为文档中可能出现的所有元素类型显式设置，以确保不同实现之间的一致性。大多数网络浏览器将为 (X)HTML 文档中的元素设置适当的值。（有关建议值，请参阅 CSS 2.1 规范的附录 D）。在 XML 文档中，使用以下规则

* {
  display: block
}

为所有元素类型设置 display 属性。然后使用更具体的规则为单个元素类型设置值。

display 值会影响对元素有效的其他属性集。例如，列表属性仅在 display 为 list-item 时有效。在下面的示例中，列表项上没有出现项目符号，因为 display 已设置为 inline。

CSS 规则

li {
  display:inline;
  list-style-type:circle
}

示例 HTML

    <ul>
      <li>Parsley, </li>
      <li>sage, </li>
      <li>rosemary and </li>
      <li>thyme.</li>
    </ul>

示例渲染

欧芹，鼠尾草，迷迭香和百里香。

block

[编辑 | 编辑源代码]

将 display 设置为 block 的元素从新行开始。它还充当其子元素内容的容器。

inline

[编辑 | 编辑源代码]

将 display 设置为 inline 的元素与其最近的 block 父级元素的包含框内其他内容一起流动。它们不会从新行开始。

width 和 height 属性在非替换内联元素上无效。在 (X)HTML 文档中，替换元素是嵌入式内容，例如图像。

内联元素的对齐方式由 vertical-align 属性控制。此属性的初始值为 baseline。由于 (X)HTML 图像通常是 inline 元素，这意味着图像的底部边缘与文本的基线对齐。如果行上没有文本，网络浏览器仍然必须计算基线所在的位置，并为其留出适当的空间。这在尝试对齐图像时会导致问题。

list-item

[编辑 | 编辑源代码]

list-item 与 block 类似，但它启用了列表属性 list-style-type、list-style-image、list-style-position 和 list-style。

none

[编辑 | 编辑源代码]

当 display 为 none 时，网络浏览器必须表现得好像元素及其所有子元素不存在。这无法通过在子元素上设置 display 属性来覆盖，因为它们不存在以应用属性。网络浏览器不得在显示屏上留下任何空间，也不得打印出或说出任何内容，或以其他方式暗示元素的存在。

使用此值隐藏元素与 CSS2.1 媒体类型 结合使用非常有用。例如，您可以指定导航栏从打印页面中移除，方法是为打印媒体将其 display 值设置为 none。

如果您只想隐藏元素，同时保留可见间隙，请将 CSS2.1 属性 visibility 设置为 hidden。

inline-block

[编辑 | 编辑源代码]

inline-block 元素以与 inline 元素相同的方式流动，但它充当其自身子元素的 block 容器。

run-in

[编辑 | 编辑源代码]

run-in 允许将单个元素合并到紧随其后的 block 元素的开头。只有当 run-in 元素不包含任何 block 元素时，它才会被合并。如果 run-in 元素不能被合并，它会像 block 元素一样起作用。

CSS 规则

h1, h2 {
  display:run-in;
  margin-right:0.5em
}

h1 {
  font-size:120%
}

h2 {
  font-size:100%
}

示例 HTML

    <h1>Main heading</h1>
    <h2>Sub-heading</h2>
    <p>Only the sub-heading is allowed to run into this paragraph.
      The heading can't be merged because only one <code>run-in</code> element is allowed.
    </p>

示例渲染

标题

子标题 只有子标题允许运行到本段。标题不能合并，因为只允许一个 run-in 元素。

与 float 的交互

[编辑 | 编辑源代码]

如果元素的 float 属性设置为除 none 之外的任何值，则该元素的行为就像 display 设置为 block 一样，无论其实际值是什么。

盒子模型

[编辑 | 编辑源代码]

CSS 盒子模型是使用 CSS 布局文档的基础。每个元素的内容都在一个或多个框中呈现。CSS 框由以下部分组成：

  • 内容区域，
  • 被填充包围（可选），
  • 被边框包围（可选），
  • 被边距包围（可选）。

如果框的所有三个可选部分都存在，那么从一个外部边距边缘穿过框到内容，将遇到以下边界

  • 外部边距边缘
  • 外部边框边缘 = 内部边距边缘
  • 外部填充边缘 = 内部边框边缘
  • 内容边缘 = 内部填充边缘

如下面的图表所示。

这是边距。

这是边框。

这是填充。

这是内容区域。

高度和宽度

[编辑 | 编辑源代码]

width 被非替换内联元素、表格列和表格列组忽略。

height 被非替换内联元素、表格行和表格行组忽略。

width 和 height 属性指定内容区域的尺寸（但请参见下面的怪异模式部分）。这是从填充的一侧的内边缘到另一侧的填充的内边缘的距离。这些值可以作为非负 长度 或百分比给出。如果 width 作为百分比给出，则该值基于包含块的宽度。如果 height 作为百分比给出，则该值基于包含块的高度。如果包含块的高度不是绝对值，则百分比可能无法按预期工作。有关详细信息，请参阅 W3C 规范。

通常，在 em 或百分比中给出包含文本的元素的大小。图像和其他替换元素通常以像素 (px) 为单位进行缩放。

CSS 规则

p {
  width:50%;
  height:3em;
  background:#cfc /* Set a background so the size of the content area is obvious. */
}

示例 HTML

    <p>A short paragraph.</p>
    <p>Another short paragraph.</p>

示例渲染

简短的段落。

另一个简短的段落。

注意，文本的左边缘（内容）与背景的左边缘（内容区域）相接。

如果内容区域太小，内容将溢出框（除了 Internet Explorer）。

CSS 规则

p {
  width:8em;
  height:3em;
  background:#cfc /* Set a background so the size is of the content area is obvious. */
}

#para2 {
  color:red /* Make the text of the second paragraph stand out. */
}

示例 HTML

    <p>A paragraph that is far too long for the tiny box it is supposed to fit inside.</p>
    <p id="para2">A short paragraph.</p>

示例渲染（此示例在 Internet Explorer 中不起作用）

一个段落，它太长了，无法容纳在它应该放入的小盒子里。

简短的段落。

CSS2.1 最小和最大宽度和高度

[edit | edit source]

CSS2.1 引入了四个额外的属性 min-width、max-width、min-height 和 max-height。例如，假设您正在创建一个布局，页面上有两列并排。您希望主内容列的宽度为 27em，但不要超过页面宽度的 75%。导航栏应该为 9em 或 25%。适当的规则如下

#content {
  width:27em;
  max-width:75%
}

#navigation {
  width:9em;
  max-width:25%
}

min-width 属性通常与像素长度一起使用，以确保列不会变得太窄，以至于无法容纳其包含的图像。

Internet Explorer 不支持这些 CSS2.1 属性。

Internet Explorer 怪异模式

[edit | edit source]

Internet Explorer 5.0 和 5.5 版本允许非替换内联元素使用 width 和 height。如果 Internet Explorer 6 处于 怪异模式，它也会应用这些属性。在 标准模式 中，它会正确地忽略非替换内联元素上的这些属性。

在怪异模式下，width 和 height 错误地设置了边框外边缘之间的距离，而不是内容区域的边缘。

CSS 3 盒模型

[edit | edit source]

当前 CSS3 草案引入了新属性 box-sizing。此属性采用两个值之一，content-box 或 border-box。

当该值为 content-box 时，使用正常的 CSS1/CSS2.1 盒模型，因此 width 和 height 定义内容区域的大小。

当该值为 border-box 时，width 和 height 属性设置边框外边缘之间的距离，即框的行为类似于怪异模式框。

Mozilla Firefox 不支持 box-sizing，而是使用 -moz-box-sizing 来实现相同目的。

填充

[edit | edit source]

填充是在元素内容与其边框之间插入的空白。元素的背景通过填充可见。填充由四个属性设置

填充可以设置为长度，例如 1em，或百分比，例如 5%。值不能为负。百分比相对于包含块的宽度，即使对于顶部和底部填充也是如此。

CSS 规则

p {  
  padding-top:1em;
  padding-right:2em;
  padding-bottom:3em;
  padding-left:4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

示例 HTML

    <p>This text has padding around it. The orange backgound
      appears behind both the padding and the content.
    </p>

示例渲染

此文本周围有填充。橙色背景出现在填充和内容的后面。

简写属性

[edit | edit source]

W3C 规范 CSS1 CSS2.1

可以使用 padding 简写属性一次设置所有四边的填充。这需要一个由空格分隔的值列表。第一个值是顶部填充。其他值按顺时针方向围绕边框，因此右侧是第二个，底部是第三个，左侧是最后一个。前面的例子可以简化为

p {
  padding:1em 2em 3em 4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

您可以在 padding 的列表中指定少于四个值。如果左侧填充的值缺失，它将设置为等于右侧填充。如果底部填充的值缺失，它将设置为等于顶部填充。如果只给出顶部填充，则所有边框将获得相同的填充。

p {
  padding:1em 2em 3em 4em; /* top = 1em, right = 2em, bottom = 3em, left = 4em */
}

p {
  padding:1em 2em 3em; /* top = 1em, right = 2em, bottom = 3em, left = right = 2em */
}

p {
  padding:1em 2em; /* top = 1em, right = 2em, bottom = top = 1em, left = right = 2em */
}

p {
  padding:1em; /* top = 1em, right = top = 1em, bottom = top = 1em, left = top = 1em */
}

padding 始终设置所有四边的填充。如果只想更改某些边的填充，则必须使用单个属性。

p {
  padding:0.5em
}

p.narrow {
  padding-left:1.5em;
  padding-right:1.5em
}

边距

[edit | edit source]

边距是 CSS 盒模型中最外层，位于边框之外。

允许设置边距宽度的 CSS 属性

简写属性

[edit | edit source]

W3C 规范 CSS1 CSS2.1

盒阴影

[edit | edit source]

盒阴影是 CSS3 的一部分。它创建了一个 阴影，它遵循框的形状。它目前受 WebKit 和 Gecko 支持。盒阴影采用 4 个参数，并支持多个阴影。

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow
  • box-shadow: X-offset Y-offset blur/diffusion color;


此框应在右下方有一个清晰的矩形阴影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}



此框应在右下方有一个清晰的圆形阴影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



此框应在左上方有一个红色的扩散圆形阴影。

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



此框应在右下方有一个红色、绿色和蓝色的扩散圆形阴影。

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



盒尺寸

[edit | edit source]

Box-sizing 是一个 CSS3 属性，用于简化某些布局。Box-sizing 受 WebKit、Gecko 和 Presto 支持。

box-sizing 采用 1 个参数，可以是以下任何一个

  • content-box
    内部的盒子按正常方式排列。
  • border-box
    内部的盒子围绕边框排列。
  • inherit
    继承父级行为。
W3C WebKit Gecko
box-sizing -webkit-box-sizing -moz-box-sizing

CSS 片段

div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* this will set the boxes to flow along the border of the containing box */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}

HTML 片段

<div class="bigbox">
	<div class="littlebox" style="border-color: green;">This should be on the left.</div>
	<div class="littlebox" style="border-color: blue;">This should be on the right.</div>
</div>


这应该在左边。
这应该在右边。

如果您的浏览器支持 box-sizing，这两个盒子应该并排位于此文本上方。

检索自 "https://wikibooks.cn/w/index.php?title=Cascading_Style_Sheets/Box_Model&oldid=3821315"
华夏公益教科书