《CSS权威指南》读书笔记3

第七章 基本视觉格式化

---

1.基本框

1.框模型

外边距通常为透明的，从中可以看到父元素的背景。
内边距不能为负值，但是外边距可以。

---

2.包含块

*行内元素的摆放方式不直接依赖包含块。
正常流：从左向右 从上到下
想要一个元素不在正常流中，唯一的方法是使之成为浮动（float）或者定位元素（position:absolute）

---

2.块级元素

完整框模型

---

1.水平格式化

正常流中块级元素框的水平部总和就等于父元素底端width

水平属性

只有width与外边距可以使用auto，边框宽度和内边距不可以

使用auto

如果设置width，margin-left，margin-right中的某个值为auto，而余下的两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。
如果所有这三个属性都设置为非auto的某个值，则格式化属性过分受限，或者，此时总会把margin-right强制为auto（因为使用的语言从左向右读）。

不只一个auto

如果margin-left与margin-right均为auto，那么它们会设置为相同的长度，使元素在父元素中居中。
*text-align只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能使这个元素居中。
设置元素大小的另一种方法是将某个外边距以及width设置为auto，设置为auto的外边距会变为0，然后width会设置为所需的值，使元素完全填充其包含块。
若这三个属性都设置为auto，两个外边距都会变为0，而width会尽可能宽。

负外边距

*注意：”元素的7项水平属性的总和”不能比其包含块更宽。

百分数

替换元素

如果一个替换元素的外大后天不同于其固定宽度，那么height值也会成比例变化，除非height自己也显式设置一个特定值。反过来也一样。

---

2.垂直格式化

假设指定高度大于显示内容所需的高度，这种情况下，多余的高度会产生一盒视觉效果，好像有额外的内边距。
假设指定高度小于显示内容所需的高度，可能会有一个滚动条，具体行为将取决于overflow属性的值。

垂直属性

类似于水平格式化
将一个元素的上，下外边距设置为auto，它们都会重置为0，使元素框没有外边距。

百分数高度

<div style="height:6em;">
 <p style="height:50%;">half as tall</p>
</div>

*由于将上，下外边距设置为auto时，实际的高度为0，因此，将元素垂直居中的唯一方法就是把上，下外边距都设置为25%。

auto高度

合并垂直外边距

合并行为只应用于外边距

负外边距

浏览器会取两个外边距绝对值的最大值。
如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

3.列表项

list-style-position：inside
list-style-position：outside

---

3.行内元素

如em和a标志，这两个都为非替换元素
图像也为行内元素，不过图像为替换元素。
*本节介绍的行为均不适合表元素。有新的属性和行为处理表与表内容

---

1.行布局

最后一种情况，即text-align的值为justify，各行必须与段落的内容区宽度相同，要调整各行中字母和字之间的间隔。因此，文本两端对齐是word-spacing的值可能被覆盖（如果letter-spacing为一个长度值，这个值则不能被覆盖）

---

2.基本术语和概念

*行内框在行中根据其vertical-align属性值垂直对齐。

构造一个行框：

---

3.行内格式化

line-height实际上只影响行内元素和其他行内内容，而不影响块级元素。
也可以为块级元素设置line-height，但这个值只是应用到块级元素的内联内容是才有视觉影响。

---

4.行内非替换元素

建立框

另一个例子：

垂直对齐

管理line-height

改变一个行内元素的line-height可能导致文本行相互重叠，接下来提供几种方法：
一种方法是对font-size有改变的元素结合使用em单位（line-height是相对于元素本身的font-size设置 ）

另一种方法是增加段落的line-height，这会影响整个元素中的每一行

基线与行高

缩放行高

设置line-height的最好方法是使用一个原始数字值，因为这个数会成为缩放因子，而且该因子为一个继承值而非计算值。
1.5即为font-size的1.5倍，缩放因子1.5在元素间逐层递传。
还有一种解决方案，即使line-height与font-size相等，这意味着会用所需的绝对最小大小来包含元素的内容区。

增加框属性

内，外边距和边框都可应用于行内非替换元素，行内元素的这些方面不会影响行框的高度。
行内元素的边框边界由font-size而非line-height控制。
或者，可以为行内元素指定内边距，这会把边框从文本本身拉开。

span{border:1px solid black;padding:4px;}

至于外边距，它们不影响行框的高度，但是可能影响两端，如图

另一种情况:

---

5.行内替换元素

然而行内替换元素还是有一个line-height值，因为垂直对齐时，vertical-align的百分数值要相对于元素的line-height来计算。

增加框属性

设置正外边距使替换元素的行内框更高；负外边距会减少替换元素行内框的大小。
负的上外边距会把图像上面的一行往下拉，例如：

img.two{margin-top:-10px;}

替换元素和基线

默认，行内替换元素位于基线上，如果向替换元素增加下内边距、外边距和边框，内容区会上移。
替换元素没有自己的基线，所以最好将其行内框的底端与基线对齐，即将下外边距边界与基线对齐。如图：

---

不过，这种基线对齐会有一个后果：如果表单元格中含有一个图像，这个图像要让表单元格足够高，从而能把包含该图像的行框包含在内。例如：

td{font-size:12px;}
<td><img src="space.img"   height="1"  width="10"></td>

表单元格是12像素高，图像位于单元格的基线上，那么图像下面可能有3像素的空间，上面有8像素的空间。
*这种行为并不仅限与表单元格中的图像，只要一个行内替换元素是块级元素或表单元格元素唯一的后代，都忽悠这种行为。例如，div中的一个图像也会放在基线上。
最常用的解决方法是使间隔图像成为块级元素，如：

td{font-size:12px;}
img.block{diaplay:block;}
<td><img src="soace.img"  height="1"  width="10"  class="block"></td>

另一个修正方法为，将包含图像的表单元格的font-size和line-height都设置为1px，这会使行框的高度只能放下1像素的图像。

---

4.改变元素显示

1.改变角色

想把链接布局为垂直边栏

<div id="navigation">
<a href="index.html">widgetco home</a><a href="products.html">products</a><a href="services.html">services</a><a href="fun.html">widgety fun</a><a href="support.html">support</a><a href="about.html" id="current">about us</a><a href="contact.html">contact</a>

可以让它们均为块级元素，如下：
div#navigation a{diaplay:block;}

同理，也可以让元素作为行内元素（inline）。
不过，这些改变的是元素的显示角色，而非其本质。
*行内元素可能是一个块元素的后代，但是反过来不行。

---

2.行内块元素

div{margin:1em 0;border:1px solid;}
p{border:1px dotted;}
div#one p{display:block;width:6em;text-align:center;}
div#two p{display:inline;width:6em;text-align:center;}
div#three p{display:inline-block;width:6em;text-align:center;}

注意：第二个div中，行内段落格式化为正常的行内内容，这说明width和text-align被忽略了（它们不能应用于行内元素）。不过对于第3个div元素，作为行内块元素的段落有这两个属性。

如果行内块元素的width为定义或声明为auto，元素框的宽度会改变，刚好包含该内容。行内框也会这样，不过行内框可能会跨多个文本行，而行内块元素不能。

例如：

div#three p{diaplay:inline-block;height:2em;}

---

3.run-in元素

run-in可以使某些块级元素成为下一个元素的行内部分，这种功能对于某些标题效果很有用，这在打印排版中很常见，即标题作为文本段落的一部分存在。
CSS中，改变元素的display值，并使下一个元素框作为块级元素框，就可以让元素成为run-in元素。
* 是 框 而不是 元素本身。设置为display：block的strong元素会生成一个块级框，设置为display：inline的段落会生成一个行内框。

例如：

*即使run-in框格式化为另一个元素中的行内框，它们仍然从文档中的父元素继承属性，而不是说它们放到哪个元素中就从哪个元素继承属性。
*只有当run-in框后面是一个块级框时run-in才起作用，如果不是这样，run-in框本身将成为块级框。例如：

<h3 style="display:run-in;">prices</h3>
<table>
<tr>apple</tr>
<tr>orange</tr>
</table>

*run-in若应用到一个自然的行内元素，这个元素极有可能生成一个块级框。例如：以下标记中的em元素将成为块级元素，因为它后面没有跟一个块级框。

<p>
this is a <em>really</em>odd thing to do,<strong> but</strong> you could do it.
</p>

---

4.计算值