div style常见特性详细介绍及应用示例

2021-03-09 23:28 jianzhan
1、常见特性:
1、Height:设定DIV的高宽比。
2、Width:设定DIV的宽度。
例:

拷贝编码
编码以下:

<div style="width:200px;height:200px;background-color:Black;">
</div>

3、margin:用于设定DIV的外珲春距,也便是到父器皿的间距。
例:

拷贝编码
编码以下:

<div style="background-color:Black;width:500px;height:500px;">
<div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
</div>
</div>

表明:margin:后边跟有4个间距各自为到父器皿的上-右-下-左侧的间距;能够看事例中的白色DIV到黑色DIV的边间距实际效果。还能够各自设定这4个边的间距,用到的特性以下:
4、margin-left:到父器皿左侧框的间距。
5、margin-right:到父器皿右侧框的间距。
6、margin-top: 到父器皿上边框的间距。
7、margin-bottom:到父器皿下边框的间距。
例:

拷贝编码
编码以下:

<div style="width:500px;height:500px;background-color:Black;">
<div style="margin-left:50px; margin-top:50px; width:200px; height:200px;
background- color:White;">
</div>
</div>

8、padding:用于设定DIV的内边距。
例:

拷贝编码
编码以下:

<div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;">
<div style="width:200px; height:200px;background-color:White;"></div>
</div>

表明:padding的文件格式和margin的文件格式1样,能够对比学习培训。能够看黑色DIV与白色DIV的边距来感受此特性的实际效果。这是还必须留意的是padding设定的间距不包含在自身的width和height内(在IE7和FF中),例如1个DIV的width设定了100px,而padding-left设定了50px,那末这个DIV在网页页面上显示信息的将是150px宽。还可以用下列4个特性来各自设定DIV的内边距:
9、padding-left:左内边距。
10、padding-right: 右内边距。
11、padding-top; 上内边距。
12、padding-bottom: 下内边距。
例:

拷贝编码
编码以下:

<div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;">
<div style="width:140px; height:140px;background-color:White;">
</div>
</div>

13、position:设定DIV的精准定位方法。
例:

拷贝编码
编码以下:

<div style="width:200px; height:200px;background-color:Black;">
<div style="position:relative; top:10px;left:10px; width:140px; height:140px;
background-color:White;">
</div>
<div style="position:absolute; top:60px;left:60px; background-color:Silver;
width:100px;height:100px;">
</div>
<div style="position:fixed; top:210px;left:210px; background-color:Navy;
width:100px;height:100px;">
</div>
</div>
<div style="position:absolute; top:50px;left:50px; background-color:Blue;
width:100px;height:100px;">
</div>
<div style="position:fixed; top:200px;left:200px; background-color:Navy;
width:100px;height:100px;">
</div>
<div style="position:static; top:200px;left:100px; background-color:Yellow;
width:100px;height:100px;">
</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中沒有实际效果(希望大神指导缘故);
14、left:设定目标相对文本文档层级中近期1个精准定位目标的左侧界的部位。
15、top:设定目标相对文本文档层级中近期1个精准定位目标的上界限的部位。
16、right:设定目标相对文本文档层级中近期1个精准定位目标的右侧界的部位。
17、bottom:设定目标相对文本文档层级中近期1个精准定位目标的下界限的部位。
18、z-index:设定DIV的堆叠次序。
例:

拷贝编码
编码以下:

<div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">
</div>
<div style="position:absolute; top:60px;left:60px; width:100px; height:100px;
background-color:Blue;z-index:1;">
</div>
<div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">
</div>

表明:上例实际效果中假如不设z-index特性蓝色DIV应当在正中间,而如今的实际效果蓝色在最上面了。还要表明的是用z-index特性时,position必须要特定为absolute才行。
19、font:特定DIV汉语本的款式,其后可跟文字的好几个款式。
例:
<div style=" font:bold 14px 宋体;background-color:Yellow">
明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。
</div>
表明:font后能够跟文字款式的好几个特性,如字体样式粗细、字体样式尺寸、何种字体样式这些。还能够用下列几个特性各自加以设定:
20、font-family:设定要用的字体样式名字;
21、font-weight:特定文字的粗细,其值有bold bolder lighter等。
22、font-size:特定文字的尺寸。
23、font-style:特定文字款式,其值有italic normal oblique等。
24、color:特定文字色调。
25、text-align:特定文字水平对齐方法,其值有center(垂直居中) left right justify。
26、text-decorator:用于文字的装饰。其值有none underline overline line-through和blink的组成。
(在IE中无闪动实际效果,FF中合理果。希望大神指导,)
27、text-indent:设定文字的缩进。
28、text-transform:设定文字的字母尺寸写。其值有lowercase uppercase capitalize(首字母大写) none。
例:

拷贝编码
编码以下:

<div style="text-align:left; text-decoration:line-through blink; text-indent:30px;
text-transform:capitalize;color:Blue; font:bold italic 14px 宋体; background-color:Yellow">
明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。
abcdefghijklmnopqRSTUVWXYZ
</div>

29、overflow:內容外溢操纵,其值有scroll(自始至终显示信息翻转条)、visible(无法显示翻转条,但超过一部分可见)、
auto(內容超过时显示信息翻转条)、hidden(超过时掩藏內容)。
30、direction:內容的流向。其值有ltr(从左至右)、rtl(从右至左)。
31、line-height:特定文字的行高。
32、Word-spacing:字间隔。
例:

拷贝编码
编码以下:

<div style="font:16px 宋体;width:600px;height:200px; word-spacing:5px; line-height:20px;
direction:rtl; overflow:auto;background-color:Yellow">
明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。

明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。

明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。

明月几时有?把酒问青天。不知道天空宫阙、今夕是何年?我欲乘风归去,唯恐琼楼玉宇,高处不敌寒.起舞搞清影,何似在世间?  转朱阁,低绮户,照无眠。不可有恨、何事长向别时圆?人有生离死别,月有阴晴圆缺,此事古难全。希望人长期,千里共蝉娟。
</div>

33、border:设定DIV的边框款式。
例:

拷贝编码
编码以下:

<div style="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;">
</div>

表明:border后跟边框的款式、宽度、色调等特性。还能够用下列特性各自设定。
34、border-width:设定边框的宽度。
35、border-color:设定边框的色调。
36、border-style:设定边框的款式。
例:

拷贝编码
编码以下:

<label style="font-size:14px;">挑选款式:</label>
<select id="bstyle" onchange="document.getElementById('tdd').style.
borderStyle=this.options[this.selectedIndex].text;">
<option selected="selected">none</option>
<option>dashed</option>
<option>dotted</option>
<option>groove</option>
<option>hidden</option>
<option>inset</option>
<option>outset</option>
<option>ridge</option>
<option>double</option>
<option>solid</option>
</select>
<div id="tdd" style="border-style:none; border-width:5px; border-color:Black; width:100px;height:100px;background-color:Yellow;">
</div>

表明:border是对4个边框另外开展设定。还可以独立对某1边或几个边开展设定,此时用下列特性:
border-top:设定上边框款式。
37、border-bottom:设定下边框款式。
38、border-left:设定左侧框款式。
39、border-right:设定右侧框款式。
表明:某1边框的某1款式也可独立设定,以上边框为例能够用:border-top-style、border-top-width、border-top-color来各自设定,因为应用各border同样,因此不在举例表明。
40、display:设定显示信息特性。其值有block、none。
41、float:设定DIV在网页页面上的流向,其值有left(靠左显示信息)、right(靠右显示信息)、none。
50、background:设定DIV的情况款式。
例:

拷贝编码
编码以下:

<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll;
overflow:auto">
<div style="width:2px;height:1000px;"></div>
</div>

表明:background后可立即跟情况的色调、情况照片、平铺方法等款式。还可以用下列特性各自设定。
51、background-color:设定情况色调。
52、background-attachment:情况图象的额外方法,其值有scroll、fixed。
53、background-image:特定使有的情况照片。
54、background-repeat:情况图像的平铺方法。其值有no-repeat(不平铺)、repeat(两个方位平铺)、
repeat-x(水平方位平铺)、repeat-y(竖直方位平铺)。
55、background-position:在DIV中精准定位情况部位。其值有top bottom left right的不一样组成。还可以以用座标
特定实际的部位。
例:

拷贝编码
编码以下:

1 <div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;">
2
3 </div>
4

2、1些独特实际效果:
1、cursor:设定DIV上光标的款式。
2、clip:设定剪辑矩形框。
例:

拷贝编码
编码以下:

<div style="font:16px 宋体;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute">
div款式测式how areyou.
</div>

表明:clip:rect(top right bottom left);设定左右上下的间距,但此时要把position特定为absolute。看以上实际效果。
3、filter:滤镜实际效果。
例:

拷贝编码
编码以下:

<div style="width:450px;height:200px;background-color:Blue;">
<div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;
float:left; width:200px;height:200px;" >
</div>
<div style="background-color:Yellow; width:200px;height:200px;float:left;">
</div>
</div>

表明:设定全透明度:opacity:value (FF专用,value的赋值为0至1之间的小数),filter:alpha(opacity=value)(IE专用,value赋值:0至100)。
假如要有JavaScript更改DIV的全透明度能用下面的方式:
FF中:document.getElementById('tdiv').style.opacity='0.9';
IE中:document.getElementById('tdiv').style.filter='alpha(opacity=90)';
* 下列是滤镜综合性的事例,将下列编码拷贝到1个网页页面文档中便可看到其实际效果,因此就不必加以表明了。
例:

拷贝编码
编码以下:

<style type="text/css">
#paneldiv div
{
background-Color:yellow;
height:200px;
width:200px;
}
</style>
<div id="paneldiv" style="width:230px;height:2300px;
background-color:Blue;">
<div style="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;">
alpha实际效果:

</div>
<div style="filter:blur(add=1,direction=100,strength=5);">
blur实际效果:

add为1意味着字有黑影,0意味着字所有模糊不清。
abcdefghijklmnopqrstuvwxyz
</div>
<div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';">
chroma实际效果:

原为黄色,点击变为鲜红色变为全透明,双击鼠标变为黑色。
</div>
<div style="filter:FlipH;">
fliph实际效果:

ABCDEFGH

IJKLMNOP

此特性在设定宽高后合理
</div>
<div style="filter:FlipV;">
flipv实际效果:

ABCDEFGH

IJKLMNOP

此特性在设定宽高后合理
</div>
<div style="filter:gray;">
gray实际效果:

abcdefghijklmn
</div>
<div style="filter:invert; text-transform:uppercase;color:Red;">
invert实际效果:

情况色变为相反色调,如黑变为白。
</div>
<div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">
wave实际效果:

Add:1般为1,或0。(0表明左右波浪纹)
   Freq:形变值。(特定是多少个波浪纹)
   LightStrength:形变百分比。(形变后的黑影。)
   Phase:角度形变百分比。(弯折的角度) Strength:形变强度。(标值越大,DIV形变就越大。)
</div>
<div style="filter:Xray">
xray实际效果:

sfasdfasdfasdfsadf
</div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">
progid:dximagetransform.microsoft.gradient实际效果:

endendendendendendendendendend
</div>
</div>
<div style="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;">
dropshadow实际效果:

此实际效果仅有在不设定情况色时合理,这时候Color特定的将变成情况色。此时背上的字将是清楚的。positive为0时color将变成情况色,为1时color只是文字投射的色调。
</div>
<div style="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;">
glow实际效果:

strength的光的强度0-⑴00;此时不可以设DIV的情况色。
</div>
<div style="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; ">
mask实际效果:

沒有显著实际效果,不可以设情况色。
</div>
<div style="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;">
shadow实际效果:

abcdefghijklmn
</div>
<div style="filter:Xray;width:100px;height:100px;
background-color:red;">
xray实际效果:

sfasdfasdfasdfsadf
</div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;">
渐变色实际效果。
endendendendendendendendendend
</div>
<div style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;">
lsksalsslalalalalalalal
</div>
<div style="filter:alpha(opacity=100, finishOpacity=0,style=2);
width:100px; height:100px;background-color:Yellow;">
</div>