网页制作中DIVCSS技术分析.docVIP

网页制作中DIVCSS技术分析 　　摘要：随着计算机和互联网快的速发展，学会网页制作已经成为人们生活和工作中不可缺少的重要技能。对于建设网站来说，静态网页制作是其中的一个重要组成部分，制作网页已经成为一个基本的技能。文章分析了网页制作中的DIV+CSS技术。 　　关键词：网页制作；CSS样式表；DIV 　　CSS功能之一是HTML文件功能的补充及扩展，CSS功能之二是显示页面元素。CSS实际上就是HTML中标签property独立出来的内容。本文使用它对网页内容进行结构控制。 　　1黑盒 　　HTML中的所有元素，不论其是模块级元素，还是行集元素，在CSS看来都是一个黑盒，这个就是黑盒模型。 　　这个黑盒没有空间上的意义，可以认为它是二维上的物体，也可以把这个“黑盒”理解成有高度的黑盒，这样的话，需要将下面“层”理解成有一定高度的层。 　　1.1黑盒内部组成情况 　　黑盒所占的宽度是由“内容、内外边距、外border”组成，CSS中通过设置宽度和高度来制定黑盒的大小。 　　1.2border 　　如果给border制定多个规则，那么规则之间很容易起冲突。 　　1.3内边距 　　如果一个黑盒有背景图像，那么背景覆盖的范围是“padding+内容”组成的范围。 　　1.4外边距 　　正文位置比较特殊，bgcolor会伸长到边缘位置。 　　2黑盒的漂浮和位置 　　CSS黑盒模型的每个property都包含4个部分：up，down，left，right。这4个位置可同时或者是分开设置。而border必须区分颜色和大小，我们又可以理解为生活中所见黑盒的厚度以及这个黑盒是用什么颜色材料做成的，边界就是该黑盒与其他东西要保留多大距离。 　　2.1黑盒之间的关系 　　（1）简单版本。这个版本的规则不涉及到元素的排列。 　　（2）模块级元素。它的显示形式是一个模块。 　　（3）一行。在其他元素的基础上存在个值域。 　　2.2黑盒在简单版本中的定位 　　行内元素之间的距离。 　　为第1个元素的右边距加上第二元素的左边距的长度。 　　模块级元素之间的距离。 　　上边距或下边距之中的最大者。 　　2.3浮动和定位 　　一个模块级元素的值域与里面的浮动内容无关，注意：2个模块级元素中，第1个模块级元素浮动时，后面的模块级元素的内容会环绕它，但若是第2个模块级元素浮动时，第1个元素是没有任何变化的，即不会环绕第2个浮动的模块级元素的。多模块情况类似。 　　2.4边距的应用 　　当边距的值加上子模块的高度大于模块的高度值时，浏览器会随之变大，使之能够让子元素的下边距有足够的距离以及父元素的下内边距。 　　而FF就不会变了，它能够让父元素的高度和它一样，而这时父元素范围就比子元素小。 　　3模块级元素和行集元素 　　模块级元素在标准文档流中是单独的占一行的，而行集元素在标准文档流中占的是行的一部分，但是当它们完全脱离标准文档流的时候，就不再具有该特性。 　　模块级元素和行集元素之间是可以相互改变的，通过display property，当property值为block时，就可以转换为模块级元素，当property值为inline时，就可以转换为行集（内联）元素。 　　4层的概念 　　层的作用非常简单，通常情况下，可以通过鼠标制作一个层，能够将它放在网页随意的地方，在层里面可以输入文本，插入图片或者是其他内容。层就像平常用的一张纸或者一个容器，能够在里面放置想要放置的内容，并且多个层可以互相堆叠上来，形成平面到空间的拓展延伸。 　　5图像和文本 　　众所周知，要想随随便便地在网页中任意放置图片和文本是一件非常麻烦的事情，大多数情况下，很多人喜欢用表格来限定范围，但是这样做的效果并不怎么好，因为随着用户环境的变化，最后得出的效果也随之改变。必须注意以下几个要点。 　　5.1 text的取值范围 　　lem的含义是CSS里面的相对长度单位，它的默认值是16px。表示的长度是其父元素中字母m的标准宽度，lex则表示小写字母X的高度，这两者形态相近，但是含义却不同，要注意。 　　5.2行高（height） 　　（1）行高（height）的定义是2行文本之间的距离，如果有下划线的话，那么下划线就作为距离的起始位置来测算。（2）行高（height）实际上可用没有单位的数字来表示。 　　5.3字母大小写转换 　　可以用来指定字母的大小写，不过，基本是在英文的环境下进行的。 　　5.4文本装饰效果 　　文字修饰属性规定添加到文本的修饰。 　　5.5首段缩进和text对齐 　　（1）段落水平对齐：text-align。 　　（2）段落首行缩进：如果是中文情况下的网页，单位设置为2个