DIV常见特性大全自身梳理

1、特性目录

拷贝编码
编码以下:

color : #999999 文本色调
font-family : 宋体 文本字型
font-size : 10pt 文本尺寸
font-style:itelic 文本斜体育
font-variant:small-caps 小字体样式
letter-spacing : 1pt 文本间隔
line-height : 200% 设置行高
font-weight:bold 文本粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除联接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文本*右对齐
text-align:left 文本*左对齐
text-align:center 文本置中对齐
这些是1些简易的文本实际效果,能够运用到css的网页页面中。 
情况
background-color:black 情况色调
background-image : url(image/bg.gif) 情况照片
background-attachment : fixed 固定不动情况
background-repeat : repeat 反复排序-网页页面预设
background-repeat : no-repeat 不反复排序
background-repeat : repeat-x 在x轴反复排序
background-repeat : repeat-y 在y轴反复排序
background-position : 90% 90% 情况照片x与y轴的部位  
连接
A 全部超联接
A:link 超联接文本文件格式
A:visited 访问过的联接文本文件格式
A:active 按下联接的文件格式
A:hover 电脑鼠标挪到联接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 4边框
虚线
<TEXTAREA STYLE="border:1px dashed pink">
实线
<TEXTAREA STYLE="border:1px solid pink">
设定div的高宽比与文本的行高1样便可以了,即 line-height 和 height 的标值是1样的便可以了,最终给div1个 over-flow: hidden ,让超过的一部分掩藏.

2、常见特性

拷贝编码
编码以下:

1、Height:设定DIV的高宽比;Width:设定DIV的宽度。
2、margin:用于设定DIV的外珲春距,也便是到父器皿的间距。margin:后边跟有4个间距各自为到父器皿的上-右-下-左侧的间距;margin: [top][right][bottom][left]
能够各自设定:margin-left:到父器皿左侧框的间距;margin-right:到父器皿右侧框的间距;margin-top: 到父器皿上边框的间距;margin-bottom:到父器皿下边框的间距。
3、padding:用于设定DIV的内边距(内如子元素与DIV界限的间距)。padding:后边跟有4个间距各自为到父器皿的上-右-下-左侧的间距;margin: [top][right][bottom][left]:必须留意的是padding设定的间距不包含在自身的width和height内(在IE7和FF中),例如1个DIV的width设定了100px,而padding-left设定了50px,那末这个DIV在网页页面上显示信息的将是150px宽。
4、border:设定DIV的边框款式;display:设定显示信息特性。其值有block、none;float:设定DIV在网页页面上的流向,其值有left(靠左显示信息)、right(靠右显示信息)、none;
background:设定DIV的情况款式;background后可立即跟情况的色调、情况照片、平铺方法等款式。还可以用下列特性各自设定。
background-color:设定情况色调;background-attachment:情况图象的额外方法,其值有scroll、fixed; background-image:特定使有的情况照片;background-repeat:情况图像的平铺方法。其值有no-repeat(不平铺)、repeat(两个方位平铺)、repeat-x(水平方位平铺)、repeat-y(竖直方位平铺); background-position:在DIV中精准定位情况部位。其值有top bottom left right的不一样组成。还可以以用座标特定实际的部位。
5、position:设定DIV的精准定位方法。position的特性中有static、fixed、relative、absolute4个特性。常见relative和absolute。若特定为static时,DIV遵照HTML标准;若特定为relative时,能够用top、left、right、bottom来设定DIV在网页页面中的偏位(相对本身的偏位),可是此时不能应用层;若特定为absolute时,能够用top、left、right、bottom对DIV开展肯定精准定位(对自身近期的父级元素);若特定为fixed时,在IE7与FF中DIV的部位相对屏屏固定不动不会改变,IE6中沒有实际效果(不知道为何)。
6、font:特定DIV汉语本的款式,其后可跟文字的好几个款式。font-family:设定要用的字体样式名字;font-weight:特定文字的粗细,其值有bold bolder lighter等;font-size:特定文字的尺寸;font-style:特定文字款式,其值有italic normal oblique等;color:特定文字色调;text-align:特定文字水平对齐方法,其值有center(垂直居中) left right justify;text-decorator:用于文字的装饰;其值有none underline overline line-through和blink的组成;text-indent:设定文字的缩进;text-transform:设定文字的字母尺寸写。其值有lowercase uppercase capitalize(首字母大写) none;direction:內容的流向。其值有ltr(从左至右)、rtl(从右至左);line-height:特定文字的行高;Word-spacing:字间隔。
7、overflow:內容外溢操纵,其值有scroll(自始至终显示信息翻转条)、visible(无法显示翻转条,但超过一部分可见)、auto(內容超过时显示信息翻转条)、hidden(超过时掩藏內容)。

3、1些独特实际效果:

1、z-index:设定DIV的堆叠次序。用z-index特性时,position必须要特定为absolute才行。

2、cursor:设定DIV上光标的款式。

3、clip:设定剪辑矩形框。clip:rect(top right bottom left);设定左右上下的间距,但此时要把position特定为absolute。

4、opacity 全透明度 filter:alpha(opacity=value) eg:filter:alpha(opacity=50);opacity:0.5;

4、精准定位和操纵

肯定精准定位和相对性精准定位 (position)

肯定精准定位:

精准定位特性将是网虫们开启幸福快乐之门的钥匙:

H4 { position: absolute; left: 100px; top: 43px }

这项CSS标准让访问器将<H4>的起止部位精准地定在间距访问器左侧100象素,间距其顶部43象素的部位。留意这里唯1设定了的是左侧和顶部,也就说,文本将从左到右,从上到免费下载入访问对话框。

左侧和顶下属性很直观,左侧(left)设置要素距访问器对话框左侧的间距,顶部(top)设置间距访问器对话框顶部的间距。设置这些间距时,你可使用所学过的各种各样度企业或占比值。应用占比值时,占比值的是相对母体要素的规格。

你能够精准定位甚么呢?任何物品!段落、单词、GIF和JPEG图像、QUICKTIME电影这些。

相对性精准定位:

肯定精准定位使你能精准地精准定位要素在网页页面的单独部位,而不考虑到网页页面其它要素的精准定位设定。相对性精准定位指你所精准定位的要素的部位相对在文档中所分派的部位。例:

I { position: relative; left: 40px; top: 10px }

相对性精准定位的重要在于精准定位了的要素的部位是相对它一般应在的部位开展精准定位。相对性精准定位模块出現在一般的静态数据精准定位模块的行间,精准定位时沒有把自身和静态数据精准定位模块彻底分开。假如你终止应用相对性精准定位,则文本的显示信息部位将修复一切正常。应用相对性精准定位时要当心,不然非常容易将网页页面弄得十分乱。

除相对性精准定位和肯定精准定位,你还能够应用static(静止不动)主要参数值。Static 是 position 特点的缺省值。它的应用方式同一般HTML中的精准定位方式,不可以额外独特的精准定位设定。也便是说,除边距特点,或根据应用 float 特点来波动模块可危害模块的精准定位外,其它均不能以。

精准定位模块的操纵 (width、height、visiblility)

除操纵精准定位模块的左上角部位,你还能够操纵模块的宽度和高宽比,及模块在网页页面的可视性性。

宽度:精准定位了的要素在网页页面上显示信息时依然会从左到右1直显示信息。运用宽度特性便可以设置标识符向右流动性的限定,即设置要素的宽度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

访问器接到这项标准时,它将文本依照标准要求的实际效果显示信息,还将段落的最洪水平规格限定在150象素。

宽度特性只可用于肯定精准定位的要素。你可使用大家学过的任何1种长度企业,或应用占比值设置宽度,占比值指相对母体要素的占比。IE 4中,这项特性还能用于图像。你能够根据宽度设定人为因素地拉宽或缩小图像。

高宽比:基础理论上讲,高宽比应当和宽度的设定相近,只但是是在竖直方位上:

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“基础理论上讲”,由于一些访问器不适用高宽比特性。

可视性性:运用CSS,你能够掩藏要素,使其在网页页面上看看不到。这条特性针对精准定位了的和待定位的要素都可用。

H4 { visibility: hidden }

选项:

visible 使要素能够被看见

hidden 使要素被掩藏

inherit 指它将承继母体要素的可视性性设定。

值 inherit 为缺省值。这使模块承继父模块的可见性。因此,假如某1段是掩藏的,则它包括的任何行间模块也都被掩藏。这1承继性可被确立特定的可见性替代。比如,段内的 EM 模块被特定为可见,这时候假如该段被掩藏,则段内的全部其它內容都将消退,而惟有 EM 模块中的文字是可见的。

当1个要素被掩藏后,它依然要占有访问器对话框中的原来室内空间。因此,假如你将文本包围着在1幅被掩藏的图像周边,那末,其显示信息实际效果将是文本包围着着1块空白地区。此新闻

这条特性在撰写語言和应用动态性HTML时很有效,例如你可使某段落或图像只在电脑鼠标滑落伍才显示信息。

模块层级 (z-index)

特点 z-index 用于层叠显示屏上的模块。缺省状况下,模块层叠的次序为它们出現在HTML标识的次序——也便是说,后出現模块层叠在早出現模块的上面。Z-index 特点具体上界定同属(sibling)模块的层叠次序和模块相对性父模块的层叠。依照标准草案,具备正 z-index 值的模块群都层叠在父模块之上,它们自身的层叠次序则按其赋值的尺寸来决策(值大的模块在顶层)。一样,具备负 z-index 值的模块群都层叠在父模块之下,它们自身的层叠次序也按赋值的尺寸来定(值大的模块在顶层,比如值为 ⑴ 的模块在值为 ⑵ 的模块的上面)。

该主要参数值应用纯整数金额。z-index用于肯定精准定位或相对性精准定位了的要素。你还可以给图像设置z-index。(针对Communicator,最好是将 <IMG>标识包在<SPAN>或 <DIV>标识内,随后将z-index运用到<SPAN>或 <DIV>。)

剪辑肯定精准定位模块 (clip)

肯定精准定位模块能够被剪辑——也即剪辑显示信息给客户的地区,只显示信息模块的1一部分而把其余一部分作全透明解决。针对传统式的根据文字和图象的互联网网页页面,这其实不是1个很有效的特点。但如果规定多新闻媒体网页页面,这是很有效的。如 Netscape Communivator 4 和 Internet Explorer 4 都适用多新闻媒体网页页面,它们根据文本文档的脚本制作插口动态性地调剂模块周边的剪辑区,从而实线文字“划入”和图象渐显等显示信息特点。

在CSS中,剪辑根据 clip 特点来操纵,这1特点只能用于肯定精准定位模块,其缺省值为 auto,按模块的外边沿来剪辑模块(具体上等于沒有剪辑)。此外,可根据以下表述式设定剪辑框:

clip : rect(top,right.bottom,left) ;

在其中 top、right、bottom 和 left 各自是矩形框剪辑框的上边、右侧、下边和左侧相对被剪辑模块左上角的部位。Top、right、bottom 和 left 的值能够为随意肯定或相对性长度值(但不可以为百分比值),或是重要字 auto。赋值为 auto 代表着剪辑地区的各边放好之后,被剪辑模块中的任何內容都不容易超过这个地区。

操纵模块外溢 (overflow)

固定不动肯定或相对性精准定位模块的 width 和 height,极可能会由于特定的地区不可以考虑模块具体內容的必须,而导致模块內容外溢。这时候可以使用 overflow 来特定访问器怎样解决外溢:值 none(缺省值)容许访问器显示信息外溢的內容,因而模块可外溢特定的地区。而值 clip 规定访问器在模块底部和右侧剪辑模块內容,这样,超过特定地区的模块內容将无法显示。值 scroll 也一样规定访问器在模块底部和右侧剪辑模块內容(同 clip),但是,访问器应当(假如将会的话)为模块出示翻转条以应用户能根据翻转来访问被剪辑的內容