利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

时间：2022-05-29 15:36:01 | 来源：网络营销

时间：2022-05-29 15:36:01 来源：网络营销

CSS主要用于对HTML文件功能的补充及扩展，其作用就是对HTML文件中各种排版进行设置，达到对网页中字体、颜色、背景、图片等的控制，使网页能够完全依照设计者的想法来显示。

CSS可以控制网页的显示，HTML标签中的属性也可以控制其显示，为什么还要有CSS呢？其中一个原因就是：以前几乎一个人就可以完成一个网站的设置，非常的简单，现在不是了，一个网站需要很多的人一起工作才可以完成，如果每个人都按照自己的喜好制作网页，那么开发出来的网页的风格就会不一样，那么这些网页很难放在同一个网站中了，CSS可以方便地设置所有网页的风格，然后交由不同部门、不同地方的人制作网页。

CSS就是HTML中标签属性独立出来的东西，当然CSS也有自己特有的东西，将HTML语言中内容显示的部分独立的形成一个整体(CSS)，然后，我们编写网页的时候，使用HTML语言设置网页内容的结构，使用CSS语言设置网页内容的显示，从而达到使网页编程的灵活性和复用性增强的目的。

注意，HTML语言仍具有网页内容显示的功能，但是，我们在具体做网页的时候，通常只用它对网页内容结构控制的功能。

一、盒子模型

HTML中的所有元素，不论其元素是块级元素，还是行集元素，在CSS看来都是一个盒子，这个就是盒子模型。

这里需要说的是，我们最好把这个“盒子”理解成没有高度的盒子，这样有利于我们理解下面层的概念，当然，你也可以把这个“盒子”理解成有高度的盒子，这样的话，我们需要将下面“层”理解成有一定高度的层。

1、盒子内部结构

一个盒子实际所占的宽度是由“内容+内边距+边框+外边距”组成，CSS中通过设置width和height来控件盒子大小。

2、边框

当有多条规则作用于一个边框时，会产生冲突，后面的设置覆盖前面的设置，这对于任何属性是一样的。

3、内边距

当一个盒子设置背景图象后，默认情况下背景覆盖的范围是“padding+内容“组成的范围，并以padding左上角为基准点平铺图像。

4、外边距

body是一个特殊点，它的背景色会延伸到margin部分，而其它盒子的背景色只覆盖“padding+内容”(IE浏览器)或“padding+内容+边框”（FF浏览器）。

二、盒子的浮动和定位

CSS盒子模型的每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

1、盒子之间的关系

（1）、标准流

就是不使用其它的与排列和定位相关的特殊CSS规则时，各种元素的规则。

（2）、块级元素

它们总是以一个块的形式表现出来，并且跟同级兄弟依次竖直排列，左右撑满。

（3）、行内元素

本身不占有独立的区域，仅仅是在其它元素的基上指出了一定的范围。

2、盒子在标准流中的定位

（1）、行内元素之间的距离：为第一个元素的margin-right和第二元素的margin-left之和。

（2）、块级元素之间的距离：是margin-top或margin-bottom之中的最大者。

3、浮动和定位

一个块级元素的范围是由它里面的标准流内容决定的，与里面的浮动内容无关，也即把其中的子元素浮动后，它就不再属于父块，不再属于标准流了（具体可查看亿企邦《清除CSS浮动的方法原理及优缺点评定》的相关介绍）。

注意：两个块级原素中，第一个块级元素浮动时，后面的块级元素的内容会环绕它，但若是第二个块级元素浮动时，第一个元素是没有任何变化的，即不会去环绕第二个浮动的块级元素的！多块情况类似的。

（1）、相对定位结论

使用相对定位的盒子，会相对于它原来的位置，通过偏移指定的距离，到达新位置。

使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响，它的原位置不会被其它块补填。

（2）、绝对定位的结论

使用绝对定位的盒子会以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

绝对定位的盒子从标准流中脱离，这意味着它们对其后的兄弟的定位没有影响，但是其兄弟盒子会填充它原来的位置，就像它不存在一样。

4、margin的使用

当块的高度值小于子块的高度加上margin的值时，此时IE会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。

而FF不会，它会保证父元素的height高度的完全吻合，而这时子元素将超过父元素范围。

5、z-index的使用

z-index属性用于调整定位时重叠块的上下位置，z-index大的页面位于其值小的上方，默认值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

6、display的使用

display的属性改变一个元素是块级（block）还是行内(inline)元素，抑或不显示此元素(none)。

三、块级元素和行集元素

块级元素在标准文档流中是单独的占一行的，而行集元素在标准文档流中占得是行的一部分，但是当他们完全脱离标准文档流的时候，他们就不再具有该特性。

块级元素和行集元素之间是可以相互改变的，通过display属性，当属性值为block时，就可以转换为块级元素，当属性属性值为inline时，就可以转换为行集(内联)元素。

四、层的概念

HTML文档内容的布局和显示不仅仅在一个平面上，而是可以在多个平面上进行布局和显示，各个平面（层）之间的布局有的并没有完全的断离关系，有的就完全脱离了关系，当然，其显示效果我们可以通过z-index属性进行设置，最后，我们从最外的那个层面看到的重叠效果就是最终显示的效果。

五、文字与图像

我们都知道，在网页上利用HTML定位文字和图像是一件“令人心痛”的事情，我们必须使用表格标签和隐式GIF图像，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化（比如文字与图片无法在同一行对齐显示，具体的解决方法可查看亿企邦《如何利用CSS代码使图片和文字在同一行显示且对齐》的相关介绍）。

1、文字大小(font-size)

1em表示的长度是其父元素中字母m的标准宽度，1ex则表示父元素中字母x的标准高度，当父元素变化时，使用这两个单位的子元素的大小会同比例变化。

2、行高(line-height)

（1）、表示两行文字之间基线的距离，也就是每行文字高度，如果加上下划线，下划线就是基线。

（2）、行高的值既可以使用像素等为行高单位，也可以不加任何单位，只写数字，此时行高表示行高与字体大小的比值，如字体大小12px，Line-height：1.5。

实际大小为line-height:1.5*12px=18px;

3、字母大小写转换（text-transform）

text-transform主要用于定义文本的大小写状态，不过，此属性对中文无意义。

具体的语法有：

capitalize: 首字母大写

uppercase: 大写

lowercase: 小写

none: 正常无变化

inherit: 继承

4、文字装饰效果（text-decoration）

text-decoration属性规定添加到文本的修饰，这个属性允许对文本设置某种效果，如加下划线，如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

text-decoration的值有underline，overline，line-height，blink等。

5、文字对齐与首段缩进

（1）、段落水平对齐:text-align

（2）、段首缩进text-indent：对中文网页,设置为”2em”即可。

6、段落的垂直对齐（vertical-align）

在目前浏览器中，只能用表格单元格中的对象竖直方向的对齐设置，而对于一般的块级元素，如div，不起作用。

7、图像样式

（1）、background-position：属性确定背景图像的位置，如果设置两个值，它们分别用于确定水平位置和竖直位置。如果只设置一个值，那么缺省的值为center。

而且它与平铺相关，实际上指定了平铺的起始点，除了使用top,left,bottom,right,center外，还以可相对数值和绝对数值来作为它的属性值，如5%,18px等。

数值表示的是距离左边的距离和距顶边的距离。

（2）、background-attachment:fixed可以固定背景图片，当拉动滚动条时，只有文字移动，而图片不动。

（3）、图像的水平（横向对齐方式）：不能直接设置图片的text-align属性，而是由其父像素的该属性实现的，但是对纵向对齐是可以通过图像的vertical-align属性设置的，这点正好与文字的对齐方式相反的。

六、链接与导航

在利用div+css制作网页的过程中，还有一类的我们经常会用到的，那就是链接与导航。

1、伪类

（1）、伪类的声明顺序

a:link,a:visited{text-decoration:none;}

a:hover{text-decoration:underline;}

亿企邦提醒大家一点：上面的声明顺序不能变，如果变了，将不会效果。

（2）、a:link与a设置的都是相同的，二者通常情况下是没有区别的，但实际工作中，经常作用a,a:visited｛｝;

2、按钮超链接

对于普通超链接和点击过的链接设置相同，并且利用边框的样式模拟按钮效果，而鼠标指针经过时的超链接，相应地改变文字颜色、背景色、位置和边框，从而模拟出“按下去“的特效。

3、高度(width)和宽度(height)属性

FF浏览器不支持a元素的高度(width)和宽度(height)属性！

4、项目符号

（1）、list-style-type：属性设置ull或ol标记符号样式。

（2）、list-style-image：属性设置项目符号显示为图片，但由于浏览器间的差异，一般不使用此属性，而是将list-style-type属性值设置为none，然后设置li标记的background实现。

5、简单菜单导航

虽然把链接设为块级元素，但是只有在鼠标经过文字时（IE6），才能触发鼠标经过效果，而不是鼠标进入矩形区域就可触发。

IE7修改了此错误，解决方法是：在”#navigation li a”中增加一条CSS规则：height:1em;

七、CSS+DIV布局

使用css+div布局网页，就是指通过在网页中插入div标签并定义相应的css规则进行网页布局。

1、固定宽度版式

（1）、第一种方法

body{text-align:center;}
　　#containter{position:relative;margin:1 auto;widht:760px;text-align:left;}

（2）第二种方法

body{margin:0px;}
　　#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}

2、左中右版式

（1）、左右块用绝对定位，并且固定块宽度，而中间块不设置宽度，自动调整宽度，但是必须将它的padding-left和padding-right分别设置为左右块宽度（具体可查看亿企邦《CSS常用代码使用技巧大全》的相关介绍）。

（2）、块的背景色问题：由于左右块背景色没有延伸到页面底端，亿企邦建议的解决方法是：当有页脚时，把一整个块内容块（左、中、右三块）放到一个块中（这里放不放无所谓，主要是好管理），然后将body背景色设置为与右块相同的颜色，再制做一副图片，宽度与left相同，颜色与left背景色相同的块，做#container的背景图片，再设置向下重复即可。

八、文档流

文档流就是文档里的内容连续的读入到程序进程中，然后，经过处理，再连续从程序进程中读出，输出到显示器上，当然，在其读入和读出时都是有一定的顺序的，不是乱来的，这里需要注意，之所以用“流”字，主要是因为数据在读入和读出的传送过程中，和水的流动非常相似，所以，用了这么一个“流”字，改字描述数据的传送过程非常形象，但是该字却没有强调其读入读出的顺序性。

在这里我们不需要太多的关心文档的输入流，应该多了解些文档的输出流，因为程序进程输出各个层的先后顺序的不同，就会导致最终我们看到层的重叠效果的不同。

根据文档流对层的一些控制的不同，我们可以把文档流分为常规流、绝对定位流和浮动流，现在我们可以把这个流当成层的意思。

常规流：最原始的那一层，最初该层包含所有的元素，其它层的元素都是从这个层里面弄走的，当然，弄走人家的东西，你得给人家一个说法；

绝对定位流：该层弄走原始层元素时，给人家说，我弄走的东西就完全是我的了，以后你这关于它的任何东西都不能存在；

浮动流：该层还算厚道，不像绝对定位流那样，说弄走人家东西，就连个毛也不给人家留，浮动流在弄走人家东西的时候，会告诉常规层，你们可以给它留个墓地或者把它原来的家留着，要是留墓地（够它住就行）的话，墓地的位置由我来定，“好处”就是它的真身会在墓地的上方，要是留它原来的家的话，它的真身可以任意的漂流，具体你们留墓地还是流家，会告诉你们的。

九、经验心得

DIV是HTML中的块标记，就是把一些HTML标签作为一个块，CSS可以通过DIV标签，使被操作的对象的颗粒度可以灵活的改变，span标签是行内标签，div可以通过设置达到span的效果，但是，span很难达到div的一些效果（具体可查看亿企邦《如何规范大型网站的HTML代码》的相关介绍）。

1、在项目列表中，当把<li>标记设置了float：left属性时，再为<li>指定宽度，那么当<li>标记超过父标记的宽度时就会自动换行。

2、为了减少差异，一般尽量在布局的块，如<ul>、<li>、<div>、<p>等的属性margin 、padding的值要么根据需要设置为相应的值，要么设置为0；

3、经常用图片来代替块里的标题文字，先把标题文字隐藏，再把代替图片设置为块的背景图片，若是要竖直方向的图片，一般是这样设置。

若是横向的图片，一般可以把包含标题文字隐藏，再设置相应父元素的宽度和高度及外边距和内边距，之后设置父元素的背景图片为代替图片。

例：<h3><span>这是测试</span></h3>

H3 span{display:none;}
　　H3{width:170px;height:60px;margin:0px;padding:0px;}
　　H3{bacground:url(1.jpg) no-repeat;}

4、假如有两个块，第一个设置为浮动后，不论方向，那么第二个块的内容会环绕第一个块，但若是设置二个块浮动后，对第一个块却没任何影响，即第一个块的内容是不会环绕第二个块，保持在原来的位置不变。

亿企邦点评：

行集元素作为盒子被使用的时候，其本质还是在常规流上，但该元素的上方会形成一个突起，这样我们从上方看的时候会出现一些覆盖的现象；块集元素作为盒子被使用的时候，它作用于整体，不会出现什么突起，什么覆盖的现象发生；绝对定位流和浮动流，是在重新定位元素位置（float和position属性设置）的时候出现的。