div 行内样式style常用属性

ＣooL．泪猪 · 发表于 2017-5-24 18:43:02

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？会员注册

x


	一、常用属性： 1、Height:设置DIV的高度。; G0 F. t$ G, j s 2、Width:设置DIV的宽度。例： $ Z( D% ]; u! `4 A0 x- h6 a/ p <div style="width:200px;height:200px;background-color:Black;"></div> 复制代码 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。例：点击查看效果：4 Q4 y6 x" v) i. H! ~! H <div style="background-color:Black;width:300px;height:300px;">+ Q l+ G7 t0 S <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">; [8 I% E; H1 D </div> 4 l! @5 e' L* @ </div> 复制代码说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 7 i/ A" s b( f2 V5、margin-right:到父容器右边框的距离。 / l# N! [, J- o6 O& W% m) i0 z$ D6、margin-top: 到父容器上边框的距离。 1 z0 a# \|5 S& L7、margin-bottom:到父容器下边框的距离。在标准的浏览器中，box模型首先确定的是content的宽度和高度，而margin和padding不会影响content的宽度和高度——如果增加magin和padding尺寸后，content尺寸不变而总的box尺寸会增大。6 J+ p# X+ h" T/ I 7 W4 y$ O' ]- f5 f 在IE中却相反,增加margin和padding的尺寸，则会减小content的尺寸，而box尺寸不变。微软遵循的逻辑是现实世界的框架不变，填充变大，则里面的图片越小。2 K0 R7 O# s3 _0 U& q8 \|. V+ I, ] * z L# M, d, \: m margin叠加：) _) p; }! z' y/ q: u9 d7 u; v 这是一个难点(行内框、浮动框、绝对定位框margin不会叠加), 简单的描述概念就是：两个垂直的margin相遇，则会合并成一个margin，这个margin的高度是前两个高度值大的。 (1)、元素的顶边界与前面元素的底边界发生叠加登录/注册后可看大图 r2007428155636.jpg (12.9 KB, 下载次数: 38) 下载附件保存到相册 2017-5-24 18:42 上传 (2)、当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图！注意这里水平的margin没有叠加 5 N# b. C5 ~6 e' T8 { 登录/注册后可看大图 r2007428155659.jpg (9.7 KB, 下载次数: 31) 下载附件保存到相册 2017-5-24 18:42 上传 + d0 U' l) Z. [9 ^" K2 ~$ x# V : c$ ^, m1 ~) B6 \2 _4 ~/ G! l (3)、如果这个边界碰到另一个元素的边界，它还会发生叠加，见图： 9 S) c" {2 T' y3 Q+ ~6 N5 j; Q! @* v. ] 登录/注册后可看大图 u2007428155825.jpg (7.86 KB, 下载次数: 28) 下载附件保存到相册 2017-5-24 18:42 上传 8、padding:用于设置DIV的内边距。例：点击查看效果： 6 V0 \: o' s0 V1 X5 C5 f# e( u <div style="padding:5px 10px 20px 30px;background-color:Black;width:300px;height:300px;"> 5 K- i( t, p: e <div style="width:200px; height:200px;background-color:White;"></div> 0 m: w9 \|3 A3 o; k+ ~ </div> 复制代码 , ~0 Q" k" A% n, N说明：padding的格式和margin的格式一样，可以对照学习。可以看黑色DIV与白色DIV的边距来体会此属性的效果。这是还需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中)，比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。也可以用以下四个属性来分别设置DIV的内边距： , Z" Q6 W, R! C/ P0 {1 H2 L& U" m4 A' R S1 U: ]7 A. I ^ 9、padding-left:左内边距。 , a( l5 S6 I$ R8 F0 G+ \+ R10、padding-right: 右内边距。4 \4 @1 e% b, b. e8 E$ H; ]7 y 11、padding-top; 上内边距。 . v$ \+ N; h. L" o8 c( \& y3 Y12、padding-bottom: 下内边距。 u& }2 T( W" _0 @. a3 T8 O t <div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;"> , e* O( p; A7 q$ c& G <div style="width:140px; height:140px;background-color:White;">" o4 ^! y# n7 R. k0 } </div> - Z9 t( v3 X9 L, B; E </div> 复制代码 $ D3 T1 w, c1 E$ z# I, w# I# t' Y 13、position:设置DIV的定位方式。例：点击看效果。 ( g+ q% q! H" i <html>$ ^7 a& z9 K+ v# O8 f4 z0 c5 m9 e <head>2 ^* C' n, B! o# S* C <meta charset="gbk">9 l: A3 t ~" v4 r* p <title>div样式2</title>9 r; T3 T$ {& X4 p* Y; r, ]& D </head> ! b% O0 e+ W4 O6 F3 o! e <body> 4 Y L i; d) x6 u- U O; b- k# \| <div style="width:200px; height:200px;background-color:Black;"> " _) W3 w4 C8 j4 U: K <div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;"></div> & u' O6 v9 X( o) D" A' Q# W# C& h <div style="position:absolute; top:60px;left:60px; background-color:Silver;width:100px;height:100px;"></div>5 R% G: h- I& x <div style="position:fixed; top:210px;left:210px; background-color:Navy;width:100px;height:100px;"></div> 7 U/ ^. q+ `% ?2 s x </div>9 Z; @4 }0 D" j& f: E/ v9 t ( N$ o V8 g2 L, C <div style="position:absolute; top:50px;left:50px; background-color:Blue;width:100px;height:100px;"></div>& M8 K1 F: C; B( D <div style="position:fixed; top:200px;left:200px; background-color:Navy;width:100px;height:100px;"> </div>. ]+ {% N N0 X; i# F <div style="position:static; top:200px;left:100px; background-color:Yellow;width:100px;height:100px;"></div>. N& C5 A4 s: \| </body>+ C3 j+ V1 M. m </html> 复制代码 2 h$ a/ T1 a+ L1 ~5 `* o! j 说明：position的属性中有static、fixed、relative、 absolute四个属性。常用relative和absolute。若指定为static时，DIV遵循HTML规则；若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移，但是此时不可使用层；若指定为absolute时，可以用top、 left、right、bottom对DIV进行绝对定位；若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果 (期待高手指点原因)； 14、left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。 # d2 {* k2 \+ S15、top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。 + Q$ A- y8 w0 ?, A/ L16、right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。 5 s' W3 Z$ a4 U) G17、bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。4 F% B$ \|( D% V% k1 \|" u2 I 18、z-index:设置DIV的层叠顺序。例：点击看效果。 . o+ g& J' V( p: [. B" t9 G) n <html><head><meta charset="gbk">, _' f, q4 V+ W, I; n+ K <title>div样式</title> 7 g+ T, Y8 b" ^$ g5 w+ u </head> % V& `+ g* }( f7 m. {# E: d- D# Y <body>2 }, p+ R6 _* C/ i9 I; T/ j+ u- L <div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">7 s: K# F/ W. c& i </div> ( F9 O' T1 y; e( p2 [% ?* Q# n <div style="position:absolute; top:60px;left:60px; width:100px; height:100px;background-color:Blue;z-index:1;"> / ?- u8 F6 C% r </div>3 ] }2 T# b. k <div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">9 D: K7 I9 g& F5 Q+ T </div> {+ P5 O [( a </body> 3 i2 C/ H( d+ L+ [, A0 x1 w </html> / ^. n/ c8 k; M. }& }, f8 Q 复制代码 , @* E. {0 E( r0 `5 A7 ` 说明：上例效果中如果不设z-index属性蓝色DIV应该在中间，而现在的效果蓝色在最上面了。还要说明的是用z-index属性时，position必需要指定为absolute才行。 19、font:指定DIV中文本的样式，其后可跟文本的多个样式。例： % V# Y+ f4 J7 U0 Z4 Z <div style=" font:bold 14px 宋体;background-color:Yellow"> ( k+ f7 u% R+ n7 u 明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒． # R1 s- ?1 y4 A& E 起舞弄清影，何似在人间？ # m, a2 A. g' x7 S! ^7 i1 P 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。( n/ a: r6 L' {' Y6 C2 e- {6 _ </div> 复制代码 7 g; `3 S- i/ @& G) Z+ O5 p 5 r3 k$ x; n M! ^+ f 说明：font后可以跟文本样式的多个属性，如字体粗细、字体大小、何种字体等等。还可以用以下几个属性分别加以设置： 20、font-family:设置要用的字体名称； ' `9 A6 H" q. T% E5 a" @0 Y21、font-weight:指定文本的粗细,其值有bold bolder lighter等。( ^1 J) r8 q. q- P5 n, w0 b; m 22、font-size:指定文本的大小。7 L5 @! T: b9 {, ^' _8 U 23、font-style:指定文本样式，其值有italic normal oblique等。 6 F/ Y. i$ k9 ~0 W- }% h24、color:指定文本颜色。 " p+ o4 A; c+ u7 O$ P25、text-align:指定文本水平对齐方式，其值有center(居中) left right justify。 ; I" E& R8 f& r) c' {# v5 e4 \26、text-decorator:用于文本的修饰。其值有none underline overline line-through和blink的组合。 $ a* y t8 V" Y# t0 Y (在IE中无闪烁效果，FF中有效果。期待高手指点，) {) ~+ Z* O/ E. E( v' b m; d 27、text-indent:设置文本的缩进。 + A5 H7 V* }- M5 \|28、text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none。 29、overflow:内容溢出控制，其值有:8 c* h1 }. i. `! L, z scroll(始终显示滚动条)、visible(不显示滚动条，但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。 30、direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左)。- a6 e4 J1 ~9 a" U) d 31、line-height:指定文本的行高。 ' `( u. \$ i2 h( ?8 ]32、Word-spacing:字间距。例：" \5 ?. G( v f5 {+ h8 b, j, Y 9 p1 N: y6 c9 o# A: ~5 v8 d+ ` C+ v <html> 7 _' G) f8 s8 O* B2 f) D% O. g3 @1 { <head> , z+ Y+ D* \ T <meta charset="gbk">2 h$ p# \ k6 Q0 n+ K( P$ i8 i; L( I5 N <title>div样式</title>2 ?, D4 \1 P5 f/ j( \| </head> * U V( B! z# D7 S2 I7 i <body>* X# ^% a0 e( y% _7 S. X' g8 g <div style="font:16px 宋体;width:600px;height:200px; word-spacing:5px; line-height:20px;direction:rtl; overflow:auto;background-color:Yellow"> 5 Q$ m1 [' I0 W8 n2 Q# E! S 月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。<br/>' j. O/ i; j3 F( D 月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。<br/> 9 k- n2 n; o5 b# a" I0 w X6 T 月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。<br/> 4 Q# W; Y2 F2 x! p& I 月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。8 G( I6 P2 b: X0 `" @5 Z </div> </body>' v0 c% Z5 t0 M V( }" e </html>. S/ Z# c$ X7 O2 @4 p* r% V! E 复制代码 0 i7 e+ @) C$ g 1 ]8 h3 M: }7 e% a8 y 33、border:设置DIV的边框样式。例：点击看效果。 . \|/ z7 \|. p u0 C/ I5 D, k7 F2 L <div style="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;"></div> 复制代码 8 p9 c4 d8 p9 w+ ~8 l' k 说明：border后跟边框的样式、宽度、颜色等属性。还可以用以下属性分别设置。 34、border-width:设置边框的宽度。 ( `' Y& W: B/ i$ V c3 y t35、border-color：设置边框的颜色。 1 b. G6 W* A! o: Q7 g: g! Q36、border-style:设置边框的样式。" \2 M6 b+ e4 b" c1 R) e9 t# c ) R. A+ g' R0 f8 \7 ]例：点击看效果。 ( K0 H' y) @$ m) ` O <html><head><meta charset="gbk"> ! h. \|2 V5 ^' L1 W" W. J( T <title>div样式</title>+ D) k Q$ S& H% m </head> D% i+ k: ] Y, g9 N <body> : [6 O) v6 j: s4 ?3 m8 D$ g & O. P/ V6 e1 T6 ] <label style="font-size:14px;">选择样式：</label> - U+ B) j1 R" N; ~8 B# P$ p <select id="bstyle" % d% `# a% S! p( W2 o0 ]2 ^0 H onchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;">5 }7 s1 D' Z0 w4 Q/ V6 q <option selected="selected">none</option> / u4 @6 o+ x$ \8 @( ^ <option>dashed</option>0 F7 @! D( g2 g4 Y5 ?% J <option>dotted</option> ( ?5 Y6 J2 L3 N( j* H <option>groove</option>! ~# A% a- x9 F% x <option>hidden</option>3 F4 O% W E+ A. _+ Q <option>inset</option>4 y$ l' A) Y) _ <option>outset</option> 4 Y) m" Z1 J0 J, k( `5 g. T5 T <option>ridge</option> " F# p7 S: q& d <option>double</option> 4 W' p; j8 Q- z' [' A1 q <option>solid</option>$ ]' u0 K2 ?- g; `: \|) _8 U. w" d </select>4 z ~1 E; C: K; b" O <div id="tdd" style="border-style:none; border-width:5px; border-color:Black; # t" \|/ ]- r: z5 V6 M8 O, ? width:100px;height:100px;background-color:Yellow;">( R7 s8 a1 M0 b2 @( _ </div> </body>( f- i9 G0 a( W( E% \|3 D8 x5 ]9 Q </html> 复制代码 % w* }1 n8 ^5 @: O1 h! p 说明：border是对四个边框同时进行设置。也可以单独对某一边或几个边进行设置，此时用以下属性： 6 ~7 g$ d" t7 E9 ]! }% x* [border-top:设置上边框样式。9 }8 T: i7 b+ U8 O- o" G 37、border-bottom:设置下边框样式。1 m( ` O1 K4 s' a# X 38、border-left:设置左边框样式。 o9 g8 c/ Y1 X39、border-right:设置右边框样式。说明：某一边框的某一样式也可单独设置，以上边框为例可以用：border-top-style、border-top-width、border-top-color来分别设置，由于使用各border相同，所以不在举例说明。 40、display:设置显示属性。其值有block、none。9 b' ~% g; ^- D/ o- ~6 G 41、float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none。4 O7 K/ r# }; r5 E+ \1 w2 n 50、background:设置DIV的背景样式。例： ], _4 J9 k G& }+ o3 c <div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll;overflow:auto">% i6 y# R G i& W4 ^8 k' Z <div style="width:2px;height:1000px;"></div>- P5 X0 z" i0 z2 K; t: o# E0 S2 F </div> - g0 D& g+ Y& ]8 r f2 J 复制代码 % \|9 c f2 d1 J$ _9 P说明：background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。 51、background-color:设置背景颜色。$ Z) x7 J- R. j# r$ E 52、background-attachment:背景图像的附加方式，其值有scroll、fixed。3 b" m! H8 N# y5 Z' X 53、background-image:指定使有的背景图片。 j3 B5 N+ r W7 ~: d6 c54、background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)。% T4 s1 A' L: S& \+ h! K 55、background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标指定具体的位置。例： 5 d7 n n' t/ ~$ Q' e, M% C 3 C, ?/ N7 ^6 \, A <div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;"> " O- i% a/ I8 J6 ? </div> 复制代码二、一些特殊效果： 1、cursor:设置DIV上光标的样式。6 _4 q) W' g# T3 p9 H$ `, S; U' T 2、clip:设置剪辑矩形。 ' v( n% n5 u1 E- d* S, a8 g( h例： : B4 Y7 z5 G7 R. L <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> 8 \+ W6 {$ R. ?8 F0 z! q 复制代码 $ W" b! D$ ]7 F, @* P 说明：clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。 3、filter:滤镜效果。例: ( n0 \; m$ \0 @/ P, S2 L, q' Y0 h4 @& h2 i2 B5 O0 U <div style="width:450px;height:200px;background-color:Blue;"> ; {/ y8 w2 `2 e& N8 S5 U <div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;float:left; / b* l* Q. P! ?' }+ Q0 @" ^; L0 u6 X width:200px;height:200px;">% H/ m$ s5 D! Z' l! l </div>1 P4 e8 E' m5 M/ T* E0 w <div style="background-color:Yellow; width:200px;height:200px;float:left;"></div> & u: ^+ V$ F0 Q* E. j- g </div> 复制代码 5 `4 I& g( {) @1 {- j* r4 M$ A" w 说明：设置透明度：opacity：value (FF专用,value的取值为0至1之间的小数)，filter:alpha(opacity=value)(IE专用，value取值：0至100)。如果要有JavaScript改变DIV的透明度可用下面的方法： - _$ `; _! c) D+ [FF中：document.getElementById('tdiv').style.opacity='0.9'; 4 y2 d+ Q$ u( A" f" \|IE中：document.getElementById('tdiv').style.filter='alpha(opacity=90)'; ; ~! k1 n! b. p* N* B# A

ＣooL．泪猪说：

ＣooL．泪猪 · 发表于 2017-5-27 23:13:20


	沙发

ＣooL．泪猪说：

div 行内样式style常用属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

发表回复

浏览过的版块

社区QQ达人

超级无敌新人奖

优秀成员

最佳成员奖

原创者勋章

沙发王勋章

每日签到奖

推广之星奖

宣传大使

极度诱惑勋章

视觉潮人奖

先锋奖

六星奖

音乐天才奖

空间认证奖

YY认证勋章

在线时间王勋章

红人勋章

爱心勋章

社区活动奖

幸福恋人奖(男)

酷Q帅哥奖

精英会员审核团队标志

最具人气奖

水瓶座

分享到：

个人中心