HTML设计模式学习笔记
本周我主要学习了HTML的设计模式，现将我的学习内容总结如下：
一．盒模型的学习
CSS中有一种基础的设计模型叫做盒模型，它定义了元素是如何被看做盒子来解析的。我主要学习了六种盒模型，分别为内联盒模型（inline box），内联块状盒模型（inline-block box），块状盒模型（block box），表格盒模型（table box），绝对定位盒模型（absolute box）和浮动定位盒模型（floated box）。
盒模型设计模式是CSS中内建的，它定义了如下属性之间的关系：边界、边框、填充和内容。每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；边框有大小和颜色之分，我们可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离，内容为盒子里装的东西，而填充式盒子内空余地方所填充的材料。
1.1内联盒模型
内联盒模型是以内联的排列顺序进行解析的，它们按照水平从左至右的顺序进行排序，当超过它们最近的终端块状祖先的宽度时，便换到了新的一行。width，height和overflow在内联元素上不起作用，因为它们总是与内容的宽度和高度相一致。margin和line-height可以以某种特殊的方式应用到内联元素上。水平外边距改变了内联元素在排列顺序中的位置。一个margin-left的正值会令元素远离它前面的元素，负值则会把它拉近。margin-right的正值会令元素远离它的下一个元素，负值则会把它拉近。margin-top和margin-bottom对内联元素是不起作用的。而border是以某种特殊的方式为内联元素设置边框，水平的边框会改变内联元素在排列中的位置。左边框会令元素靠左，右边框使得下一个元素靠右。而上下边框则会显示于内边距之外，但是没有扩展到行高或改变元素在竖直方向上的位置。该模式的模板可以如下表示：
此设计模式可以应用于任何的内联元素和任何以内联方式显示的元素。
1.2内联块状盒模型
内联块状元素是位于内联排列顺序中的，就像其他的内联盒子一样，只不过它还包含了一些块状元素的属性：外边距、边框、内边距、宽度和高度。内联块状元素是不会与其他行交叉的。内联块状元素会增添行高以让其适应自身的高度、内边距、边框和外边距。width和height设置元素的高度和宽度，你可以扩大或缩小一个替代元素，例如图片，只要把他们的width或者height设置为某一个具体的值就可以了。也可以用width:auto和height:auto令替代元素的尺寸与实际尺寸相符。假设一个display:inline-block的span，设置它们的width和height便可调整大小了。也可以用width:auto和height:auto把内联块状元素包裹住。可用width:100%把内联块状元素拉长，此时它与块状元素是一样的。而margin元素会从上下左右四个方向来改变元素的大小，margin-top和margin-bottom会增加或减少行高，margin-left和margin-right会在水平方向上拉近或扩大元素与它前后元素的距离。border和padding也可以用于扩展内联元素的外围尺寸。
内联盒模型的典型模式如下：
此设计模式可应用于所有的内联元素。
1.3块状盒模型
在块状格式化环境下，块状盒模型是竖直方向从上到下排列的，这是块状元素的正常排列顺利。块状盒模型可以包含其他的块状盒模型，或者它们可终结块状格式化环境，并开始一个包含内联盒模型的内联格式化环境。终端块状元素在其内盒里创建了一个内联格式化环境，但是它的外盒此时一定是处于块状格式化环境下。
块状元素的长度可以与它的父元素一致，也可以小于或大于它的父元素。当它的尺寸大于父元素的时候，它就会溢出来。overflow属性就是用来控制浏览器如何处理溢出的。在块状盒模型中，还是用width和height来设置元素的宽度与高度。其中，width:auto表示它使得元素的宽度与父元素一致，height:auto表示它使得元素的高度包裹住它的所以子元素。margin-left和margin-right会缩进或外延一个被拉伸的块状元素的两侧，它们会调整块状元素已设置的尺寸。margin-top和margin-bottom可以让不同块状元素之间的距离增大或减少，甚至可以让它们重叠。浏览器会抵消相邻块状元素的顶部和底部外边距。用margin-left:auto和margin-right:auto来控制已固定了尺寸的块状元素的水平排列。如果某个块状元素设置了width，margin-left:auto会令块状元素排列在父元素的右侧，margin-right：auto会令块状元素排列在父元素的左侧。而同时设定margin-left:auto和margin-right:auto会令块状元素位于父元素的中间。border和padding也会扩展盒模型的外宽和外高。块状盒模型的模式如下：
此设计模式可用于所有块状元素。
1.4表格盒模型
表格是一个含有很多行单元格的块状盒模型。表格也位于块状元素的排列中，而表格中的单元格则被“行”和“列”来排列。表格有外边距但是没有内边距。单元格有内边距却没有外边距。用width设置表格的宽度，这里的width指边框外围的宽度而不是内边距里面的宽度。用height设置表格的高度，这里的height指边框外围的高度而不是内边距里面的高度。margin的解析方式根据表格是否被设定了尺寸、包裹或者拉伸来决定的。当它被固定了尺寸和包裹时，外边距会移动表格和接下来的元素。负的外边距则会令相邻元素与表格重叠。当表格被拉伸时，外边距会令表格缩进，这会令它的内部尺寸变小并缩小单元格的大小。border会令已定义了尺寸或拉伸的表格的内盒变小。而overflow不能应用于表格，因为表格是不能溢出的，只有表格的单元格能溢出。应把overflow:hidden赋给单元格，以确保当固定了尺寸的单元格溢出时，所有浏览器的行为是一致的。Border-collapse决定了邻近的边框是否合并为一个，table-layout决定了表格是固定大小（fixed）还是依据其内容而变动的（auto）。表格盒模型的模式如下：
此设计模式可以用于所有的表格元素。
1.5绝对定位盒模型
绝对定位元素从正常的元素排列顺序中脱离了，把它置于更高的一层或更低的一层。它是相对于最近的定位祖先来定位或者固定于视窗的某个位置。可以为它设置尺寸、包裹它或者把它拉伸到与父元素一致的大小。任何元素都可以绝对定位。绝对定位盒模型的位置不会影响其他盒模型的位置。
z-index控制定位元素的叠放顺序。负值会把它们放在正常排列层的下面，正值就会把它们置于上面。值越大，它就会位于垂直排列成的越前面。可以把top,left,bottom,right赋值给绝对定位盒模型，当设置了一个值后，left会以绝对定位元素的容器作为基准，根据你设置的正值或负值进行定位。同理，也适用于其他三个属性。用width设置元素的宽度，height设置元素的高度。而margin为正的时候，会令绝对定位的盒模型移向它的容器中心，当它为负的时候，则会远离中心。border和padding会缩小已拉伸的绝对定位盒模型的内盒。绝对定位盒模型的模式如下：
此设计模式可应用于所有的元素上。
1.6浮动盒模型
用float:left或者float:right可让任何元素浮动起来。浮动元素也脱离了正常的元素排列顺序，被置于邻近块状元素的边框和背景之上。这会缩小浮动元素的父元素，当所有子元素都浮动的时候，它便完全消失了。即使浮动元素脱离了原本元素的排列队伍，它会令队伍中邻近的内容朝某个方向缩进。左浮动会令邻近的内容向右缩进，右浮动则会让内容向左缩进。浮动元素是在原本的位置上垂直定位的。而在父元素的内边距里，它是从右或左水平定位的。浮动元素是在原本的位置上垂直方向上一次排列的。当浮动元素不能紧邻它的下一个浮动元素的时候，它会挪动到下方。浮动元素的位置、大小、内边距、边框和外边距都会影响邻近浮动元素和邻近内联内容的位置。width和height用于设置浮动元素的宽度和高度。margin具有独特的浮动功能，正的外边距会令浮动元素远离它原来的位置，让其他浮动元素和内联内容远离它，负的外边距则正好相反。border和padding会增大浮动元素的外盒尺寸。左浮动元素的左边距和左内边距会把它推向右侧，而它的右边距和右内边距会把其他浮动元素与右侧的内联内容更靠右。对于右浮动元素来说，则正好相反。浮动盒模型的模式如下：
此设计模式可应用于所以元素。
二：定位模型的学习
CSS提供了6种用于放置元素的定位模型：静态、绝对、固定、相对、浮动和相对浮动。静态定位模型能够对内联、内联块状、块状和表格盒模型进行定位。绝对和固定定位模型能够对绝对盒模型进行定位。浮动定位模型能够对浮动盒模型进行定位。相对定位模型能够对绝对盒模型外的任何盒模型进行相对定位。相对浮动定位模型能够对浮动盒模型进行相对定位。每一种定位模型都采用同一组基础的属性来对定位进行控制。
2.1静态定位
想让元素按照内联和块状元素的排列顺序，一个接一个排列，可以使用position:static应用到元素上。在块状元素内，一个或多个块状元素或内联元素会竖直向下解析。在内联元素内，文本和对象会一行一行地水平解析。静态元素的起始位置是由前面的静态元素决定。模式如下：
内联静态元素：
块状静态元素：
2.2绝对定位
绝对元素令你能够相对它们的定位最近祖先元素精确控制它们的所在方位。绝对元素是在正常元素排列顺序上的定位层进行解析的，就好像一个独立的盒模型，不像浮动元素，绝对元素是不流动的。可以使用position:absolute把任何元素当作绝对盒模型解析。用width和height来设置它的大小。百分比是相对它的定位最近的盒模型，而不是父元素。可以