第三集该文是本栏的 《CSS 内部结构设计手册》 自学讲义的第三部份，虽然前段时间都在预备Nomeny的事，因此都没顾得上对 《CSS 内部结构设计手册》 展开许多归纳，没看以后第三部份不然也能从这儿传输往后。
第三章 功能定位元素
3.1 认知盒数学模型
只不过 HTML 网页中每一原素只不过都是两个「箱子」，预设情况下那些箱子的前面板不由此可见，大背景也是透明化的，因此他们无法间接的看见网页中箱子的内部结构，但他们能借助于许多 Web Developer 鼠标悬停能方便快捷地表明箱子的前面板和大背景，让他们能很简单的看见那些箱子的内部结构。
每一箱子都有四组特性：
两个箱子有三条边，因此那些特性也各有五个特性，依次是上(top)、右(right)、下(bottom)和左(left)。
虽然这四组特性共计 12 个特性值，但他们也能对它展开缩写，这儿以 margin 为例：
缩写后的标识符如下表所示:
缩写的次序是上 -> 右 -> 下 -> 左，逆时针的路径。相较的边的值完全相同，则能省去，标识符如下表所示:
前面板(border)有五个相关特性：
CSS 推荐标准并没明确规定 border-width 的几个文本值的确切长度，因此实际长度会因浏览器而异。
border-radius 不影响箱子的功能定位。吉洛姆距是箱子文本区与箱子前面板间的距。在没增设吉洛姆距的情况下，文本紧挨着前面板
增设吉洛姆距后，文本区与前面板有一定的距(padding 的大小)
与吉洛姆距和前面板相比，外面距就要显得复杂的多了，首先是外面距叠加，垂直路径上的外面距会叠加，例如有三个段落应用了如下表所示规则：
虽然第三段的下边距与第三段的上边距交界处，你可能会觉得它两个箱子前面板间的外面距只和是 80px，但实际上是 50px，像这样上下外面距相遇时，它会相互重叠，直到两个外面距碰到另两个箱子的前面板。就上面例子而言，第三段较宽的上外面距会碰到第三段的边框，也就是说较宽的外面距决定两个箱子间的距。
在增设段落文本外面距时应该注意，为了避免因增大字号导致段落间外面距不变引起的整体不协调的问题，在增设段落的上下外面距是应该使用 em 单位，这样当字体大小调整时，段落的上下外面距也会根据字体的大小来调整距，这样网页的整体布局就会比较协调一致，而左右外面距则能用 px 绝对单位，确保左右外面距不会因字体大小的调整而发生改变，比如能这么增设：
这样段落垂直距就会始终保持字体高度的四分之三的高度，水平外面距不会因字体的调整而发生改变了。
3.2 箱子有多大
作者在本章介绍了块级原素和行内原素的不同行为。
作者在这一节中专门提到了两个 「没长度」的概念：没显式地增设原素的 width 特性。如果不增设块级原素的 width 特性，那么这个特性的预设值就是 auto ，结果就是会让原素的长度扩展到与父原素同宽。
盒数学模型结论一：没增设长度的原素始终会扩展到填满其父原素的长度为止，添加水平外面距、水平前面板和水平吉洛姆距都会导致文本长度的减少，减少量等于水平外面距、水平前面板和水平吉洛姆距的和。
盒数学模型结论二：为设定了长度的箱子添加外面距、前面板和吉洛姆距，会导致箱子扩展的更宽，实际上，箱子的 width 特性设定的只是箱子文本区的长度，而不是箱子要占据的( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )水平长度。
因此一定要记住的是，给设定了 width 的原素添加外面距、前面板和吉洛姆距所展示的行为与预设的 auto 状态下的行为会有截然不同的表现。
但与布局相关的原素大部份都同时增设了 margin、 border、 padding 和 width，这就导致了在布局时的各种计算保证总长度( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )保持不变，这样不仅麻烦，有的时候还比较容易出错，为了解决这一问题， CSS3 新增了两个 box-sizing 特性，通过它能将增设了 width 的原素也设定成具有预设的 auto 状态下的行为。这样就省去了许多计算 width 的时间，同时也不会出错，而且它的浏览器支持情况也是一片大好（ 除了 IE 6 和 IE 7 不支持，其他个别老版本的浏览器需要添加浏览器私有前缀才支持 ）。
能这样使用这个特性：
3.3 浮动与清除
浮动和清除是网页布局的一大利剑，依次是 float 和 clear，浮动能让原来上下堆叠的块级原素变成左右并列，能实现文字绕图片排列效果。浮动的原素会脱离常规的文档流，原来紧跟其后的原素会在空间允许的情况下向上提升到与浮动原素平起平坐。如果浮动原素后面有两个段落，而你只想让第三段与浮动原素并列（就算旁边还能放下第三段，也不想让它上来），就能使用 clear 特性清除浮动。
浮动原素脱离了文档流，因此他们看不到包含它的父原素了，这种情况有时候并不是他们想要的，因此作者在本章介绍了如何围住浮动原素的三种方法。
方法一：为父原素添加 overflow: hidden; 强制它包围浮动原素。
这种方法在某些情况下也不适用，比如通过浮动增设的水平排列的菜单，对其父原素增设 overflow: hidden; 后，虽然父原素围住了它，但如果菜单有下拉选项不然，当鼠标移动到上面的时候下拉菜单并不会表明，因为增设了 overflow: hidden;，因此超出父原素范围的文本都被隐藏掉了。
方法二：同时浮动父原素
父原素增设浮动后，不管其子原素是否是浮动，父原素都会紧紧地包围住它的子原素，因此需要用 width: 100%; 再让父原素的长度与浏览器容器同宽。同样，虽然父原素围住了它，但这样会导致网页中出现大量的浮动原素，而浮动原素有往往不好控制，并不利于网页的布局。
方法三：添加非浮动的清除原素
第三种强制父原素包含其浮动的子原素的方式就是给父原素的最后添加两个非浮动的子原素，然后清除该子原素，因此父原素一定会包含这个子原素以及前面的浮动原素：
虽然这个方法能解决上面提到的两种方法中的问题，但它还不是最好的方法，因为它会在文档中添加无意义的标签，这违反了标签语义化的规则，对搜索引擎并不友好。因此如果你要清楚浮动但既不想浮动父原素又不想对父原素增设 overflow: hidden; 也不想增加无意义的标签不然，能使用伪原素来清除浮动：
然后在父原素中添加 clearfix 类，因为搜索引擎并不会抓取伪原素，因此这种方法并没增加无意义的标签，这儿应该注意的是，CSS3 标准是用两个冒号来区别伪原素和伪类，而 CSS2.1 中不管是伪原素还是伪类都是用单个冒号表示，然而 IE8 并不支持双冒号的伪原素，因此问题就来了，如果你要遵循 CSS3 的标准使用双冒号不然就不兼容 IE8 了，如果使用但冒号不然又不符合 CSS3 标准规范，当然现在大多数还是使用但冒号的，选择哪种还是看个人的选择。
3.4 功能定位
CSS 布局的核心是 position 特性，对原素应用这个特性能相较于它在常规文档流中的位置重新功能定位，position 特性有 4 个值： static、 relative、 absolute 和 fixed。
静态功能定位下的块级原素会在预设文档流中上下堆叠，想要突破 static 功能定位提供的这种按次序布局原素的方式，就必须对原素的 position 特性的值改为其他三个值。
所谓的相较功能定位就是相较于原素原来的位置（static 状态下的位置）展开功能定位，也就是说在不增设 top、 right、 bottom 或 left 不然，和它在预设(static)情况下的表现是完全相同的，但如果对它增设了 top、 right、 bottom 或 left 不然，就会相较与它预设的位置展开功能定位。相较功能定位的原素能遮住静态(static)功能定位的原素。能给 top 和 left 特性设定负值，把原素向上和向左移动。
绝对功能定位跟静态功能定位和相较功能定位是绝对不一样的，静态功能定位和相较功能定位并不会脱离文档流，会占居原来的位置，而绝对功能定位会把原素彻底从文档流中拿出来，然后再相较于其他原素（这儿的其他原素指的是功能定位上下文，预设是 body 原素）功能定位。
绝对功能定位的两个重要的概念就是功能定位上下文，把原素的 position 特性设定为 relative、 absolute 或 fixed 后，继而能使用 top、 right、 bottom 和 left 特性，相较于「另两个原素」移动该原素的位置。这儿的「另两个原素」就是该原素的功能定位上下文。
绝对功能定位的预设功能定位上下文是 body，这是因为 body 是标记中所有原素的唯一的祖先原素，而实际上，绝对功能定位原素的任何祖先原素都能成为该绝对功能定位原素的功能定位上下文，只要把相应的祖先原素的 position 特性的值设定为 relative 即可。
从完全脱离文档流的角度说，固定功能定位与绝对功能定位类似。但不同之处在于，固定功能定位的功能定位上下文是视口（浏览器窗口），因此它不会随网页的滚动而移动。最常见的情况是用它来创建不随网页滚动而移动的导航原素。
3.5 表明特性
display 属性的值很多，但常用的除了前面提到的控制块级原素、行内原素和行内块级原素的 block、 inline 和 inline-block 以外，还有两个比较常用的就是 none，把原素的 display 属性的值设定为 none 后，该原素及所包含在其中的原素，都不会在网页中表明。他们原先战局的所有空间都会被「回收」，就好像相关原素根本不存在一样。
与此类似的特性还有 visibility，这个特性常用的两个值是 visible(预设值) 和 hidden，把原素的 visibility 特性的值设定成 hidden ，原素会被隐藏，但它还会占据网页中原来的空间位置。
本栏觉得有点类似功能定位中 absolute 和 relative 的感觉，就是 absolute 功能定位的原素的原来的位置会被「回收」（脱离文档流），就好像原素根本不存在一样（指的是原来占据的位置不存在一样），relative 功能定位的原素还会占据网页中原来的空间位置。
3.6 大背景
大背景支持为原素添加大背景色调也大背景图片。
CSS 规定以下与大背景相关特性：
用于控制大背景位置的 background-position 特性，是所有大背景特性中最复杂的。background-position 有 5 个关键字值： top、 right、 bottom、 left 或 center，那些关键字值任意两个组合起来都能作为该特性的值。比如 top right 表示把图片放在原素的右上角位置，center center 表示把图片放在原素的中心位置。除了那些关键字值以外还能用百分比、px 和 em 等单位。
要是只增设两个值，则将其用来设定水平位置，而垂直位置会被设为 center。
在使用关键字和百分比的情况下，情况有点特殊，设定的值会同时应用于原素和图片，也就是说，如果设定了 80% 20%，则图片水平 80% 的位置与原素 33% 的位置对齐，垂直方向也一样。
其他单位数值就不一样了，如果用像素单位来设功能定位置：
那么图片的左上角会被放在距原素左边 80px 上边 20px 的地方。
background-size 是 CSS3 新增的特性，但却的到了浏览器很好的支持，这个特性用来控制大背景图片的尺寸，能给它设定的值及含义如下表所示：
background-attachment 特性控制滚动原素内的大背景图片是否随原素滚动而移动，这个特性预设是 scroll，即大背景图片随原素移动，如果把它的值改为 fixed，那么大背景图片不会随原素滚动而移动。
声明中少些了哪个特性（比如没写 no-repeat），就会使用相应特性的预设值（repeat）。
CSS3 新增的许多大背景特性：
background-size、 background-clip 和 background-origin 的浏览器支持情况还是挺不错的。
CSS3 还能给原素大背景条件多个大背景图片：
在 CSS 中，他们把每张图片的声明都单独放在了一行，以逗号分隔，以便看清他们的位置、重复的设定值等等。要注意的是，标识符中先列出的图片表明在上方，或者说更接近前景，还有就是对每张大背景图增设重复或者位置的时候，也要用逗号一一对应隔开。
渐变就是在一定长度内两种或多种色调间自然过度。渐变分两种，一种是线性渐变，一种是径向渐变。线性渐变是从原素的一端延伸到另一端，径向渐变则是从原素的一点向四周发散，下面来看两个简单的线性渐变例子：
上面展示了三种简单的渐变效果，预设情况下渐变路径是从上到下的如图一，例 2 起点关键字 left 意思是渐变路径从左到右，例 3 中的 45deg （顺时钟旋转 45 度）相当于把起点从预设的中上设定到了又上。
渐变点就是渐变路径上的点，能在那些点上设定色调和不透明化度。能添加任意多个渐变点：
例 1，如果不是使用百分比或其他值声明渐变点的位置，三种色调会均匀分布于整个渐变。
例 2，演示了起点和终点不是 0% 和 100% 时的情形。此时，在第两个渐变点(20%)以后，是第两个渐变点声明的实色，而在该点之后，则是从该色调到下一个渐变点色调的过度。同样，在最后两个渐变点(80%)之后，该渐变点的色调会以实色扩展到原素结束。
例 3，简单展示了完全相同色调在几个渐变点间变来变去的效果。
例 4，展示了在同两个渐变点声明两种不同色调，能实现一种突变的效果。
在创建径向渐变的时候，能使用参数指定形状、位置、尺寸、色调和不透明化度：
例 1，展示了预设的渐变形状，即渐变效果会填充原素，这儿是矩形，如果原素是正方形，那渐变就是圆形：
例 2，设定了关键字 circle，于是渐变形状变得均匀，并在原素前段时间的边达到终点，形成了圆形渐变。而长边剩下的区域则填充了终点的色调。
例 3，位置参数 50px 30px 把渐变的圆心放到了靠近左上角的位置。
归纳
本章的文本不少，都是许多很重要的概念，比如盒数学模型、功能定位原素、浮动与清除浮动和原素大背景特性。
到目前为止，也对 《CSS 内部结构设计手册》 的重点知识展开了归纳，当然可能有些地方归纳的不够好，如有不对的地方欢迎指出和讨论。
