跳转到内容

层叠样式表/盒模型

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

块级元素和内联元素 - 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。此属性应为文档中可能出现的 all 元素类型显式设置，以确保不同实现之间的一致性。大多数网页浏览器将为 (X)HTML 文档中的元素设置适当的值。(有关建议值的说明，请参阅 CSS 2.1 规范的附录 D。)在 XML 文档中，使用以下规则

* {
  display: block
}

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

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 元素。如果 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 最小和最大宽度和高度

[编辑 | 编辑源代码]

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 怪异模式

[编辑 | 编辑源代码]

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

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

CSS 3 盒模型

[编辑 | 编辑源代码]

当前 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 来达到相同目的。

填充

[编辑 | 编辑源代码]

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

填充可以设置为长度，例如 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>

示例渲染

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

简写属性

[编辑 | 编辑源代码]

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
}

边距

[编辑 | 编辑源代码]

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

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

简写属性

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

盒子阴影

[编辑 | 编辑源代码]

盒子阴影是 CSS3 的一部分。它会创建一个 投影，该投影会跟随盒子的形状。目前，它受到 WebKit 和 Gecko 的支持。盒子阴影需要 4 个参数，并支持多个阴影。

CSS3 WebKit Gecko
box-shadow -webkit-box-shadow -moz-box-shadow
  • box-shadow: X 偏移量 Y 偏移量 模糊/扩散 颜色;


此盒子应该在右下方有一个锐利的矩形阴影。

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;
}



盒子大小

[编辑 | 编辑源代码]

盒子大小 是一个 CSS3 属性，用于简化某些布局。盒子大小受到 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"
华夏公益教科书