CSS学习笔记（四）

七、CSS核心知识

7.1 CSS框模型

CSS框模型（Box Model）规定了元素框处理元素内容、内边距、边距和外边距的方式。

由上面的图可以看出：元素框的最内部分是实际的内容，直接包围内容的是内边距。在CSS中，内边距呈现了元素的背景，其边缘是边框，而边框以外是外边距。外边距默认是透明的，因此不会遮挡其后的任何元素。一个元素的 宽度 是指内容框的宽度，而 高度 是指内容框的高度。下面解释两个重要的概念：

元素框：CSS假定每个元素都会生成一个或者多个矩形框，称为元素框。各个元素框中心有一个内容区域（contentarea）。这个内容区周围有可选的内边距、边框和外边距，因为，它们的宽度可以设置为0，即将这些项从元素框去除。
包含块：每个元素都相对于其包含块摆放。包含块简单的说就是一个参考框，作用是为它里面包含的元素提供一个参考。元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

对于某个元素来说，其真正所占的区域其实是由好几个矩形框组成，有：元素的内容框、补白形成的框、元素的边框以及边距形成的框。如下所示：

7.1.1 水平格式化和垂直格式化

水平属性——水平格式化的“7大属性”是：margin-left、border-left、padding-left、width、padding-right、border-right 和 margin-right。

说明：
在水平属性中，只有3个属性可以设置为 auto：元素的 width 、左边距、右边距。其余的属性必须设置为特定的值，或者默认的宽度为0。
垂直属性——垂直格式化的“7大属性”是：margin-top、border-top、padding-top、height、padding-bottom、border-bottom 和 margin-bottom。

说明：
在水平属性中，只有3个属性可以设置为 auto：元素的 height 、上边距、下边距。其余的属性必须设置为特定的值，或者默认的宽度为0。

7.1.2 内边距、边框、外边距

1. 内边距

CSS中的内边距是指元素边框与元素内容之间的空白区域，而这片区域由属性 padding 来控制。padding 属性接受长度值或百分比值，但不允许使用负值。

设置内边距的几种例子：
1、 h1 {padding: 10px;} // h1 元素的各边都有 10 像素的内边距
2、 h1 {padding: 10px 0.25em 2ex 20%;}  //按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值
3、 h1 { padding-top: 10px;
         padding-right: 0.25em;
         padding-bottom: 2ex;
         padding-left: 20%;}  //通过四个单独的属性，分别设置上、右、下、左内边距

2. 边框

CSS中的边框是指围绕元素内容和内边距的一条或多条线。在CSS中，可以通过 border 属性来设置元素边框的样式、宽度和颜色。

边框的样式：CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。如果希望显示某种边框，就必须设置边框样式。

border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
在实际的应用中，我们可以为一个边框设置多个样式，也可以为元素框的某一边设置边框样式。例如：
1、 p.aside {border-style: solid dotted dashed double;}
2、 p {border-style: solid; border-left-style: none;}

边框的宽度：可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

border-width: thin | medium | thick | <length> | inherit
在实际的应用中,可以一次性的指定各边边框的宽度，也可以分别设置边框各边的宽度。例如：
1、 p { border-style: solid; border-width: 5px;}
2、 p { border-style: solid;
        border-top-width: 15px;
        border-right-width: 5px;
        border-bottom-width: 15px;
        border-left-width: 5px;}

边框的颜色：使用 border-color 属性，它一次可以接受最多 4 个颜色值。

border-color: [ <color> | transparent ]{1,4} | inherit
同样的，可以一次性的指定各边边框的颜色，也可以分别设置边框各边的颜色。例如：
1、 p { border-style: solid;
        border-color: blue red;}
2、 h1 { border-style: solid;
         border-color: black;
         border-right-color: red;}

3. 外边距

CSS中的外边距是指围绕在元素边框的空白区域。CSS中，外边距使用通过 margin 属性设置。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em 等。

设置外边距的几种例子：
1、 h1 { margin: 10px;} // h1 元素的各边都有 10 像素的外边距
2、 h1 { margin: 10px 0.25em 2ex 20%;}  //按照上、右、下、左的顺序分别设置各边的外边距，各边均可以使用不同的单位或百分比值
3、 h1 { margin: 10px;
         margin-right: 0.25em;
         margin: 2ex;
         margin: 20%;}  //通过四个单独的属性，分别设置上、右、下、左外边距

提示：
Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

4. 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

情形一：
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如下图所示：
情形二：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。如下图所示：
情形三：
外边距甚至可以与自身发生合并，比如，有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，如下图所示：
情形四：
如果这个外边距遇到另一个元素的外边距，它也会发生合并：

注意：
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

5. 值复制

什么是值复制呢？举个例子，有时，我们会输入一些重复的值，比如：

1	p {margin: 0.5em 1em 0.5em 1em;}

通过值复制，不再需要像这样重复的键入这对数字。上面的规则也可以写作这样：

1	p {margin: 0.5em 1em;}

这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

下面的图片提供了更直观的方法来说明这一规则：

7.2 CSS布局

CSS包含3种基本的布局模型，即流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

7.2.1 流动模型（Flow）

流动（Flow）是默认的网页布局模式，网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：

块状元素 都会在所处的包含元素内自上而下按顺序垂直延伸分布，独占一行,在默认状态下，块状元素的宽度都为100%。
内联元素 都会在所处的包含元素内从左到右水平分布显示。

7.2.2 浮动模型（Float）

在 流动模型（Flow） 中，所谓的标准流是指从上到下，从左到右，输出文档内容。所以，在流动模型下，块级元素由于其独占一行的特点，即使在某一行能够同时容下两个块级元素的情况下，两个块级元素还是会自上而下按顺序垂直延伸分布。而 浮动模型（Float），则可以实现在一行放置多个块级元素。

1. 浮动（float）

浮动可以理解为将浮动元素从标准流中删除，即元素将脱离标准文档流，浮动元素将不在页面占用空间，浮动于标准流之上，和标准流不在一个层次。在CSS中，所有元素都可以浮动，可以使用属性 float 实现。

1	float: left \| right \| none \| inherit

关于浮动元素的摆放，有着以下一些特定的规则：

浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。也就是说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框。
浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（或左）边界，除非后出现浮动元素的顶端出现在先出现浮动元素的底端下面。也就是说：除了包含框，浮动的框在向左或向右移动时，碰到另一个浮动框的边框时也会停止移动。
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。也就是说：当某一行无法同时容纳一个向左、一个向右的浮动元素时，其中顺序在后面的那个浮动元素将向下浮动，直到它的顶端在顺序在前的那个浮动元素的底端之下。
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
左（或右）浮动元素的左边（右边）有另外一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。
浮动元素必须尽可能高地放置。
左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动的越远。

注意：
浮动元素会延伸，从而包含其所有后代浮动元素。所以，通过将父元素设置为浮动元素，就可以把浮动元素包含在其父元素内。

如果一个浮动元素与正常流中的内容发生重叠会怎么样呢？在CSS2.1中，针对以上问题，有着以下的规则：

行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。

2. 清除（clear）

针对正常流与浮动流重叠的问题，CSS中，可以使用属性 clear 的设置来禁止浮动元素与某个元素在同一行上。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

1	clear: left \| right \| both \| none \| inherit

7.2.3 层模型（Layer）

所谓的层模型，就是CSS中，可以通过属性 position 来对元素进行精确的定位。层模型有三种形式（CSS的三种定位机制）：

绝对定位（position:absolute）
相对定位（position:relative）
固定定位（position:fixed）

1. 定位

通过定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另外一个元素甚至浏览器窗口本身的位置。通过使用 position 属性，会影响元素框生成的方式。CSS中可以选择 4 种不同类型的定位：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

定位中的一些基本概念：

一、偏移属性

CSS的三种定位机制（relative、absolute 和 fixed）使用4个属性来米搜狐定位元素各边相对于其包含块的偏移，这4个属性称为偏移属性。

1 2	偏移属性（top、right、bottom、left）值: <length> \| <percentage> \| auto \| inherit

二、内容溢出和裁剪

溢出（overflow）：假设在某种情况下，一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用 overflow 属性控制这种情况。
1
overflow: visible | hidden | scroll | auto | inherit
裁剪（clip）：如果一个绝对定位元素的内容溢出其内容框，而且 overflow 设置为要求裁剪该内容，通过使用属性 clip 可以改变裁剪区域的形状。
1
clip: rect(top,right,bottom,left) | auto | inherit
元素可见性（visibility）：通过属性 visibility 可以控制整个元素的可见性。
1
visibility: visible | hidden | collapse | inherit

2. 相对定位

为元素设置层模型中的相对定位，需要设置 position: relative（表示相对定位），它通过偏移属性 left、right、top、bottom 确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。也就是说，如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

说明：

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3. 绝对定位

为元素设置层模型中的绝对定位，需要设置 position: absolute（表示绝对定位），设置为绝对定位的元素框会从文档流完全删除，然后使用偏移属性 left、right、top、bottom 相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。

说明：

对于进行绝对定位的元素来说，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。也就是说，绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

绝对定位的元素的位置相对于 最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于 最初的包含块。而根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

相对定位和绝对定位的 区别：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

补充：
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。CSS中，可以通过设置 z-index 属性（z-index: <integer> | auto | inherit）来控制这些框的堆放次序。例如,分别为 id 是first 和 second 的 p 元素设置 z-index，如下所示:
1
2
p#first {position: absolute; top: 0; left: 0; width :20%; height: 10em; z-index: 8;}
p#second {position: absolute; top: 0; left: 10%; width :30%; height: 5em; z-index: 4;} //由于 first 相对于 second 的 z-index 值较高，则其在 second 之上。

4. 固定定位

固定定位，与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。因此，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment: fixed 属性功能相同。