张波的技术积累

继承性：在CSS中当在某个元素中定义了某个属性值时，其包含的各种元素都会使用这个值，不是所有的CSS属性都会具有继承性，合理的使用CSS的各种继承性，可以更方便的对各种效果进行控制。    New Document .main{ color: red; } 这里是直接定义颜色的部分

1.块元素   块元素一般可以包含其他块元素和内联元素，例如和元素等，当在网页中使用块元素的时候，块元素默认换行显示，在块元素中，可以正常显示所有定义的盒模型属性。2.内联元素   内联元素一般只可以包含其他的内敛元素，例如元素和元素等，当在网页中使用内联元素的时候，内联元素默认同行显示，直到内联元素宽度之和大于容器元素的时候换行显示，在内联元素中，如果定义盒模型的相关属性，部

该属性用来定义元素背景图片的起始位置，在背景图片的背景图片位置属性中，可以使用两种属性值，一种为长度单位，包括长度值和百分比值；另一种为指定值，包括top, center, bottom, left, righ等，其语法结构如下：    background-position: length | percent | top | center | bottom | left | right

背景的综合属性(background)用来同时定义元素背景的各种显示属性，在实际应用CSS的过程中，通常使用背景的综合属性一次性定义所有的背景属性。   background: background-image background-repeat  background-position background-color background-attachment  在背景的综合属性中

元素的边框一般用来分隔页面的各个部分，在CSS中，边框属性可以分为以下几个属性，包括边框样式(border-style)，边框宽度(border-width)，边框颜色(border-color)以及边框综合属性(border)等。   顶部边框样式属性：       border-top-style: none | hidden| dotted | dashed | solid |

元素的边界用来分隔元素和与其相邻的元素。在CSS中，边界属性分为4个单侧边界和1个综合属性，即顶部边界属性(margin-top)，右侧边界属性(margin-right)，底部边界属性(margin-bottom)，左侧边界属性(margin-left)和边界综合属性(margin)。  margin-top用来定义元素顶部边界的显示效果，在顶部边界属性中，可以使用长度值、百分比值和au

元素的定位属性(position)用来定义元素的定位方式，在定位属性中，可以使用4种属性值，分别为static，absolute，fixed和relative，其语法结构如下所示：   position: static | absolute | fixed | relative  其中每个属性值的含义，如下所述：   static: 默认值，元素按照自身默认的方式显示。   a

绝对定位用来确定元素相对于父元素的绝对位置，在页面中，使用绝对定位到元素，会从文档中对立的显示出来，所以使用绝对定位到元素可能会遮盖其他的页面元素。   在使用绝对定位的时候，定位到参照标准是包含定位属性的父元素，如果没有这样的父元素，则元素按照元素的位置确定显示位置。 New Document .main { position

相对定位是按照元素自身所在的位置，使用边偏移属性重新定义元素的显示位置，使用相对定位的元素依然是文档中的元素，元素的显示位置和元素所在文档中其他元素相互关联。   在确定相对定位元素位置的时候，首先要确定元素的原始位置，即元素在文档中的位置，然后根据偏移属性中定义的偏移值，确定元素的最终位置。    New Document .div

使用定位属性定义元素的位置，其优点在于每个元素的显示位置相对独立，方便每个元素的控制，但是其缺点也是明显的，因为每个元素独立控制，所以很难预测元素之间的相互影响，同时也可能发生元素重叠的情况，导致部分内容无法正常显示。   1.定位属性的优越性     使用定位属性，结合边偏移属性，可以将元素放置在任何需要的位置，这样做的好处在于，无需考虑元素本身的显示方式和页面代码中所处的位置，直接

在网页中使用浮动属性，可以更改块元素的默认显示方式，将原本换行显示的块元素同行显示，通过使用浮动元素和盒模型中的各种属性，可以对各种页面元素进行布局。 1. 元素的浮动属性float     用来定义块元素的浮动方式，在浮动属性中，可以使用4种属性值，分别为static，absolute，fixed和relative，       float: none | left | right

如果在一个页面中同时使用几个定位元素，就可能发生定位元素重叠的情况，默认的情况下，后添加的元素会覆盖先添加 的元素，通过使用层叠定位属性(z-index)，可以调整各个元素的显示顺序。  1. 层叠定位属性z-index      用来定义定位元素的显示顺序，在层叠定位属性中，属性值使用auto值和没有单位的数字，如：z-index: auto | number CSS

1. 在CSS中，可以使用剪切属性对元素内容的可视化区域进行控制，剪切区域所使用的属性时clip属性，用来裁剪元素的可视化区域，内容的剪切属性可以使用2种属性值，一种为auto值，另一种为区域值，语法结构：    clip: auto | rect(number, number, number, number) 其中，rect中定义的4个属性值是以元素左上角为中心，按照上、右、下、左的

在CSS中可以通过相应的属性控制元素的显示方式，例如，可以将原本以内嵌方式显示的元素以块元素的方式显示，更改元素显示方式使用的是显示方式属性display,通过使用显示方式属性，可以方便的更改元素默认的显示方式，制作出特殊的显示效果，例如导航的图片转换效果等。   1. 显示方式属性display      它用来更改元素默认的显示方式，在显示方式属性中，可以使用的属性很多，如：

元素的可视性，是指元素是否可见，在CSS中，可以通过可视性(visibility)，控制元素的可视性，使用可视属性，只能完全显示或者隐藏相应元素，无法显示部分元素内容。  1.可视属性visibility       用来定义元素及其内容是否可见，如：         visibility: visible | collapse | hidden         其中各属性值的含义

在一个元素中，有时候会发生内容超出定义大小的情况，在CSS中，可以使用溢出属性(overflow)对溢出的内容定义显示方式，例如隐藏或者显示滚动条等，使用溢出属性可以方便的控制溢出内容的显示，并能够保证元素的大小不被破坏。   1.溢出属性(overflow)         用来定义元素溢出部分的显示方式，如：          overflow: visible | auto

red--红yellow--黄blue--篮silver--银teal--深青white--白navy--深蓝olive--橄榄purple--紫gray--灰green--绿lime--浅绿maroon--褐aqua--水绿black--黑fuchsia--紫红

相对长度单位是网页中常用的长度单位，其中包括em、ex和ps   em：定义文字时font-size属性定义的值的单位，例如，在font-size属性中，定义文字大小为12pt，那么此时1em就是12pt的长度。   ex：定义文字时字母x的高度，因为不同的字体中x的高度是不同的，所以单位ex的实际大小也不同。   px(像素)：将显示器分成非常细小的方格，那么每个方格就是一个px，p

1.区分大小写   在XHTML中，相同字母的大写和小写代表含义是不同的。在XHTML中规定，页面中所有的元素和属性，都要使用小写字母表示。2. 正确嵌套所有元素   在XHTML中，所有的元素都要按照出现的顺序正确嵌套，外部的元素要完全包含内部的元素。   XHTML中还有一些会严格强制执行的嵌套限制，包含以下几点：     元素中不能包含其他的元素     元素中不能包

1：使用display属性实现的效果 display属性控制的图片隐藏与显示 function showImage() { var image = document.getElementById('successImg'); image.style.display = 'block'; } function hideImage() { var image = d

1： 经常被忽略的(X)HTML元素元素名称元素含义               address标记一段地址dl表明一个定义列表(通常用于表示术语/定义对,也可以用来表示其他的名/值对)dt表明定义列表中的术语部分dd表明定义术语列表中的术

1：有序列表、无序列表与定义列表 测试 无序列表 奔驰 通用 丰田 有序列表:NBA得分榜 贾巴尔 卡尔-马龙 迈克尔-乔丹 定义列表:Web相关术语 CSS

代码示例：BODY {FONT-SIZE: 12px;FONT-FAMILY: "宋体", arial}.menu {CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px}.menu LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; CURSOR: pointe

这些选择符总体可以分为以下几类：   （1） 为某个特定的元素名定义样式，这样，网页中所有的该元素都可以应用该样式。    （2）为某个特定的class属性名定义样式，这样，网页中所有的class属性值为该属性名的元素都可以应用该样式    （3）为某个特定的元素定义样式，该元素使用id属性来标示，样式也同样是使用id属性值来定义。    （4）为某些特定用途定义的使用以上3类无法

基本的选择符包括通用选择符、类型选择符、属性选择符、ID选择符和伪类选择符等       （1）类型选择符           类型就是指HTML语言定义的各个元素，每一种元素名就是一个类型选择符名，通过为每一种元素名定义样式，HTML文档中的该元素都会应用该样式。           如 p {color: #FF0000;}      （2）通用选择符          通

Box类型对应的元素blockHtml,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1H2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre 下面是HTML5新增的元素：Article,aside

1：  background属性是其他背景属性的快捷方式，其属性值由多个值组成，值之间用空格隔开  background-image  background-position   background-size   background-repeat  background-attachment  box{1,2} background-color  2:div {back

1：serif(带衬线字体，如大写I顶部和底部的横线)2：sans-serif(不带衬线字体，英文前缀是sans即是非的意思)3：cursive草书字体4:fantasy(奇异字体)5：monospace(等宽字体)

Web标准分为三个方面，即结构标准语言（包括XHTML和XML），表现标准语言（包括CSS）和行为标准(包括对象模型、ECMAScript)，其具体内容如下所示： 1.结构标准语言    1.1 XML：The Extensible Markup Language，可扩展标记语言，具有强大的扩展性，可以用于网络数据的转换和描述，XML具有简洁有效、易学易用、开放的国际化标准，高效可

使用CSS布局的页面，其结构和表现可以对立控制，通过修改CSS文件中定义的样式，可以统一修改站点中所有页面中相同的样式，同时由于页面中剥离了修饰内容，减少了大量的冗余代码，使代码更加简洁清晰。由于CSS布局清晰的结构、简洁的代码、高效的浏览速度，使得CSS布局的页面对网站浏览者和拥有者都有极大的好处，具体表现在以下两个方面：   1. 对网站浏览者的好处       页面更加简洁，

1：   http://nikkibrion.com/        如上图所示，该站点采用纵向3栏的布局方式，同时在页面的顶部和底部采用渐变的背景图片，实现在不同的分辨率下，都能够显示100%的宽度。在实际制作页面的时候，经常使用重复的背景图片以适应宽度变化的方法。

1.最大宽度属性max-width   在CSS中，最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值，其语法结构如下所示：    max-width: auto |  length  | percent;注意：在IE

该属性用来定义背景图片是否随浏览器滑块的拖动而滚动，在背景图片滚动属性中，可以使用两个属性值，分别为scroll和fixed，     background-attachment: scroll | fixed;     *scroll:   背景图片随滑块的变化而滚动。     *fixed: 背景图片固定不动。         New Document

元素的补白部分用来分隔内容部分和边框部分，在CSS中，补白属性包括4个单侧补白属性和1个综合属性：padding, padding-left,padding-right, padding-top, padding-bottom   padding-top：用来定义元素顶部边框和内容之间的距离。   padding-right：用来定义元素右侧边框和内容之间的距离。   paddin

1：上边偏移属性   用来定义元素顶部偏移位置的大小。top: auto | length | percent   CSS属性实例 div{ top: 100px; position: absolute; border: 2px solid #333333; background: #666666; widt

在网页中，使用浮动元素的时候，会影响后面相邻的固定元素，由于不同的浏览器对浮动属性的解释存在差异，所以需要对某些元素的浮动属性进行清除，清除浮动属性时，使用的属性是清除浮动属性(clear). 1. 清除浮动属性(clear)    用来清除相邻元素的浮动属性，在清除浮动属性clear时中，可以使用4种属性值，分别为none, left, right和both，     clear