上一节介绍了HTML和CSS的基本概念和语法特点，在本节内容开始之前，我们先来总结下上一节的重点。
1、HTML元素是指以开始标签起始，以结束标签终止的所有内容（包括标签本身）。如:div这里是元素的内容/div，p这里是元素的内容/p，span这里是元素的内容/span，这些都是HTML元素。
2、HTML元素的内容是指开始标签与结束标签之间的内容（不包括标签）。
3、某些HTML元素具有空内容（没有内容），称为空元素，空元素是在开始标签中关闭的。如：br/、img/、input/等。
4、大多数HTML标签可以拥有属性，属性总是在HTML元素的开始标签中规定，属性总是以名称/值对的形式出现。
5、大多数HTML元素可以嵌套（可以包含其他HTML元素），HTML文档就是由嵌套的HTML元素构成的。
6、HTML元素用来存放内容，而CSS用来控制HTML元素如何显示，HTML元素的高矮胖瘦等都由CSS样式来控制。
7、插入CSS样式的方法有三种：外部样式表，内部样式表，内联样式。网店装修一般只能使用内联样式。
8、CSS内联样式的写在HTML元素的style属性内，定义CSS属性的写法为：属性名+冒号+属性值，如定义多个CSS属性，各个属性间用分号隔开。如：divstyle=width:px;height:50px;color:#ff;/div
9、CSS具有继承性和优先级。
以上就是上一节的重点，那么接下来就开始讲解HTML的结构及CSS的盒子模型。
HTML的结构
HTML的结构是一种树形结构，即元素之间存在着“一对多”的树形关系(如图2-1所示)。
HTML文档由html元素开始(根元素)，它包含两个子元素，子元素里可以再包含子元素，以此类推，就形成了一个像树一样的结构。
图2-1
图2-2
以图2-1的图示做比喻，html元素就像是树干（根部），树干上长了两条树枝（head和body）。head这条树枝上又长出两条树枝（meta和title），body这条树枝上也长出了三条树枝（一个div和两个p），这个div又长出了一个p和一个div，可以一直这么长下去。
HTML的层级关系
HTML元素间具有层级关系；不同层元素之间的关系就是上下层（上下级）的关系，就像是祖先与后代的关系，是包含与被包含的关系；同层元素间的关系就是平行（平级）的关系，就像是兄弟关系或者堂兄弟关系。
就是说，相对某个元素而言，包含它的元素就是它的父元素，被它包含的元素就是它的子元素。所有在它上层（上级）的元素都是它的祖先元素，所有在它下层（下级）的元素都是它的子孙元素。
html元素只能有两个子元素，一个是head元素（头部），另一个是body元素（主体）或者frameset元素（框架集）。注意，这里用了“或者”这个词，因为body元素和frameset元素不能同时存在。我们常见的就是body元素。frameset不常用，而在网店装修中根本用不到，所以本篇不作讨论。
HTML的基本结构：
htmlheadtitle我的第一个HTML文档（网页）/title/headbody文档的内容.../body/html
解释：
html元素定义了整个HTML文档，html元素有两个子元素head（头部）和body（主体）。head元素定义文档的头部，它是所有头部元素的容器。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。title元素定义文档的标题，它是head部分中唯一必需的元素。body元素定义文档的主体，body元素中的内容输出到浏览器内容区域。
图2-3
如图2-3所示，he浏览器窗口的标题栏是网页的标题，显示在浏览器窗口的选项卡上或者标题栏中。body中的内容显示在浏览器的内容区。
需要注意的是，一个HTML文档必须且只能有一个根元素（html元素），html元素只能有两个子元素，在排除frameset元素的情况下（以下所作的比喻及说明均以排除frameset为前提，请知悉。），html元素必须包含且只能包含head和body这个两个子元素，如上面的图例所示。也就是说，html这条树干上必须且只能长出head和body这两条树枝，html这条树干上不能长出第三条树枝。当然，你要是硬要在树干上插上一些其他的树枝，浏览器也不会报错。不过浏览器在渲染页面时，会把树干上这些多余的树枝拔下来，再把这些拔下来的树枝视情况插到head或者body这两条树枝上去。同样，如果缺少了html、head、body这个三个元素，浏览器渲染页面时也会把它们加上去。注意，浏览器不是去改变了源文件，只是运行时改变。就好像你拿着书朗读文章，你发现书上有错别字，朗读出来的时候就把它纠正了，但是书上的错别字却不会因此而改变。
我们来试一下是不是这样。首先建立一个HTML文件（后缀名为.html的文本文件），打开后随便写上点内容，比如我写上“这是一个测试文档！”,如图2-4所示。保存后双击这个HTML文件在浏览器中打开。我们可以看到浏览器内容区里显示的就是刚才写的那句话“这是一个测试文档！”。好，现在我们来看看在浏览器中运行时的文档到底是啥样。在这个页面上打开网页调试工具：点击鼠标右键，在弹出的右键菜单里找到“查看元素”并打开，火狐浏览器叫“查看元素”，谷歌浏览器叫“审查元素”，IE浏览器叫“检查元素”。看到了么？如图2-5所示，可以看到，浏览器给运行时文档加上了最基本的HTML结构。
图2-4
图2-5
HTML的结构到这里就讲完了，主要就是要理解树形结构和层级关系，这个应该不难而事实上，网店装修中并不需要制作整个页面，需要制作的仅仅是body元素中的一部分而已我们制作的内容是放入到网店的自定义模块中的，其实这个自定义模块就是body元素的某个子孙元素，它作为一个容器去容纳用户的自定义内容。所以，就网店装修而言，实际上完全不用管什么html、head、body，因为这些都是已经写好了的，不需要你写，你也无法更改。你只要写好自己的模块内容，然后放到自定义模块中，就可以了。CSS的盒子模型盒子模型在CSS网页布局中是个重要的概念，基于盒子模型的布局模式彻底颠覆了传统的表格布局模式，使在Web2.0时代网页布局的理念发生了革命性的改变。如何将盒子模型在页面中合理的定位是布局的关键，也一直被认为是一个难点，在没有深入理解清楚各种定位的原理就轻易的尝试布局，往往会得到一个杂乱页面。因此在进行CSS布局之前，充分的理解盒子模型的概念与各种定位规则的原理就显得十分重要。盒子模型的概念盒子模型的思想是将任何HTML标签都可以看作是一个矩形的盒子，这些HTML标签如同盒子一般容纳网页上的各种元素，如：文字、图片、文本框等。盒子占据一定的页面空间，一个盒子模型由content（内容区）、padding（内边距）、border（边框）、margin（外边距）这4个部分组成。盒子模型如图2-6所示：
图2-6
从图2-6可见，黄色区域为盒子的内容区，它的宽度即width，高度即height。内容区容纳各种元素，如：文字、图片、文本框等，当然也包括其他的盒子。
盒子的边框即border；盒子的边框到到盒子的内容区的距离即padding（内边距）；盒子的边框外还有margin（外边距），就是盒子的边框到其他盒子的距离。
默认情况下，盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子。
padding、border、margin按照顺时针分为上、右、下、左4个方向（top、right、bottom、left），4个方向可以统一设置，也可以分别设置。
以设置padding（内边距）为例，单独设置上内边距为10像数：padding-top:10px;；同时设置4个方向的内边距都为10像数：padding:10px;；设置上下内边距为10像数左右内边距为20像数：padding:10px20px;；同时设置4个方向的内边距分别为上边距5像数、右边距10像数、下边距15像数、左边距20像数（按照上右下左的顺时针顺序）：padding:5px10px15px20px;。
margin（外边距）设置方法同padding一样。
border（边框）的设置与padding和margin有所不同，border除了有宽度外，还有样式和颜色，分别为border-width、border-style、border-color。border-width（边框宽度）设置方法同padding和margin是一样的。border-style设置边框样式，比如设置边框为实线：border-style:solid;；设置边框为虚线：border-style:dashed;。border-style的默认值是none（无边框），不受任何指定的border-width值影响（就是说，border-style为none时，不管border-width设置什么值，都将是无边框的）；border-color就是边框颜色，如border-color:#ff;,即设置边框颜色为红色。
盒子模型中，边框是实的，我们可以看到实实在在的边框，而内边距和外边距是虚的，我们只能看到它们对元素的影响。
盒子大小的计算
一个盒子模型在页面上的所占的实际宽度是由margin-left+border-left+padding-left+width+padding-right+border-right+margin-right而成(左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距)，高度的计算方法同宽度一样。可以通过调整它们来控制盒子的大小，在默认样式下，margin、border、padding不可见，盒子只显示其所容纳的content部分。可以通过修改CSS样式重新定义盒子的margin、border、padding样式，从而实现各种各样的排版效果。
盒子模型的类型
CSS把盒子模型分为两种基本形态：块状元素和内联元素（或称为块级元素和行级元素）。块状元素可以通过width和height定义高度和宽度，每个块状元素后面隐藏附带换行符，使块状元素始终独占一行。内联元素没有高度和宽度，定义它的width和height属性无效，它显示的大小只能根据所包含的内容来确定，内联元素后面不附带换行符，它允许其他内联元素与其位于同一行。
现在我们把上面讲的HTML的树形结构和盒子模型结合起来想象一下，你脑中浮现出来的是什么？是不是就是盒子里面装盒子再装盒子再装盒子……，这样是不是形象起来了？如图2-7所示。
图2-7
提示：我们把HTML元素看作一个盒子，只是从某种角度上它看上去像个盒子，但并不完全等同于现实生活中的盒子。比如，它可以边框为零（无边框），它可以小盒里面装大盒，它可以装在盒子A中却并不显示在盒子A中，这些都是无法用现实生活中的盒子来理解的。说这些的目的就想告诉你，你可以用现实生活中的盒子来帮助你对CSS的盒子模型产生初步的理解，但不要被它禁锢住了你的思想。
CSS盒子模型的定位
盒子有三种定位形式：标准流下的定位；浮动属性下的定位；定位属性下的定位。
除非设置浮动属性或者定位属性，否则所有盒子都是在标准流中定位。顾明思义，标准流中盒子的位置是由元素在HTML文档中的位置决定的。
标准流下的定位
在CSS的布局理论中，文档流是盒子模型定位的基础，也是HTML中默认的网页布局模式，在一般状态下，网页中元素的布局都是以此为默认的显示方式，在页面中，块状元素自上而下按顺序动态分布，内联元素在每行中按从左到右的顺序排放，要改变其在网页中的位置，只能修改网页结构中元素的先后排列顺序和分布位置来实现。同时标准文档流中每个元素都不是一成不变的：当在一个元素前面插入一个新的元素时，这个元素本身及其后面的元素的位置会自然向后流动推移。
margin和padding
margin与padding分别表示盒子模型的外边距与内边距，这两个边距按照顺时针分为上、右、下、左4个方向，这4个方向可以分别定义样式，也可以统一定义样式。
在增加margin、padding的像素值后，盒子模型所包含的内容会因为边距的增加而被挤压发生位移，由此我们可通过适当调整margin、paddin来控制盒子模型在页面的定位。
使用margin、padding精确地控制盒子的位置，必须对三种基本的位置排列关系有深入的了解，首先分析两个盒子水平并排的情况，如图2-8所示：
图2-8
当两个盒子相邻的时候，它们之间的距离为左侧盒子的margin-right加上右侧盒子的margin-left。
而当两个盒子垂直排列时（如图2-9所示），情况就会变得有一些不同，两个盒子之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者。
图2-9
除了上面提到的水平排列和垂直排列这两种关系外，还有一种位置关系在CSS排版中也是常见和重要的，这就是父子关系。当一个盒子包含在另一个盒子中间时，便形成了典型的父子关系。其中子块作为父块的content，它们之间的距离是父块的padding与子块的margin的和，如图2-10所示：
图2-10
以上就是CSS中三种基本的位置排列关系，使用margin、padding进行定位的思想就是通过盒子之间边距的调整和累加而得到新的位置，当前盒子的位置取决于它与周围盒子的边距，简单地说就是依靠增加边距把盒子往外/里挤。按照这种模式定位的盒子模型遵循文档流的特点，盒子彼此之间的定位是种相互依存的关系。这种定位方法的优点是简单、快捷，但缺点也是显而易见的，当新增，删除或修改页面布局中某个盒子时，当前盒子周围的盒子位置会发生改变，从而影响整个页面的布局结构。
浮动属性（float）下的定位
float即是浮动定位，float主要的2个值，为left和right。其中left表示盒子向左浮动，原本位于下方的文档流向浮动元素的右边，right表示盒子向右浮动，原本位于下方的文档流向浮动元素的左边。
定位属性（position）下的定位
在CSS页面排版中，绝对定位（absolute）和相对定位（relative）是被广泛运用的定位概念，这两个概念是由定位属性position衍生出来的。
position从字面理解就是指定位置，即盒子相对于父级元素的位置和相对于它自身应该在的位置。
position不能单独设置，必须还要配合top、right、bottom、left这4个属性（以下简称TRBL），分别表示的是盒子的各个边界离父级元素的距离，或各个边界离原来位置的距离。position自身一共有4个值，分别为static、fixed、absolute、relative。其中static为默认值，它表示盒子保持在原本在的位置上，即该值没有任何移动效果。除此之外的其它三个值都能给盒子模型产生不同的定位，实现丰富的排版效果。
float定位和position定位在之后讲解CSS属性时再进行展开，本节不做深入介绍。
好了，本节内容就到这里，下节开始将介绍网店装修常用的HTML元素和常用的CSS属性。
回复“M”查看所有文章目录
哪家治疗白癜风的医院好哪家治疗白癜风权威