最近在学习JavaScript,在做到个要控制控件样式的例子时,突然有了把常用样式汇总一下的想法,于是乎就写了以下内容,以下是以div为例来汇总的,希望对大家有些帮助。
一、常用属性:
1、Height:设置DIV的高度。
2、Width:设置DIV的宽度。
例:
![](https://i-blog.csdnimg.cn/blog_migrate/84ca015f254f964c82c8cbda0d4ca154.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9d7d3dcd3128e2adb0315a18d77f0a31.gif)
<div style="width:200px;height:200px;background-color:Black;">
</div>
3、margin:用于设置DIV的外延边距,也就是到父容器的距离。
例:
![](https://i-blog.csdnimg.cn/blog_migrate/b77fad3382cbb113b7299c8986458bfb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8518218790f89af3ee018af1bec57975.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/135d1284f2ad9a3b20c0299af2182c94.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f6e03dd27fbca7b075a79a3a48469989.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4c2e6ed4954f405b7907413f6db3285b.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/270b32a7440ff9e845d5c0ced1b8d633.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/48ab58d9b1b16a79a40d5dd7f8322f6f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/e9e902faba115fa6b54284cc6f88ce8e.gif)
说明:margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离,用到的属性如下:
4、margin-left:到父容器左边框的距离。
5、margin-right:到父容器右边框的距离。
6、margin-top: 到父容器上边框的距离。
7、margin-bottom:到父容器下边框的距离。
例:
用于设置DIV的内边距。
![](https://i-blog.csdnimg.cn/blog_migrate/1599ac60b240428b6ea7eb896ff242dc.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a0346053ee2a73ca46d965c83a18e4f2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8b39f49de21799674ce03bda68feffca.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d105521f0e9551b157a9bed330d5a91c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8ad66057a1d34d87d098994daf0231d2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/63d03290cbaacea502a7de97b17510c9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6bbcce5a9661dacd4efef6d9560a026e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/86f425d2fcc91e0fba1e783e6e754238.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/266a220604e0c0705e799df618127f5c.gif)
8、padding:
例:
![](https://i-blog.csdnimg.cn/blog_migrate/55b4b0203cde56431069f138aa6a9aa4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/927bc621ba072b1e3cd514ffe68a6302.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/838652548986f2bf9d0ec9f015923826.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f4ee87522107cdc63fc35ba319f467fa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/96415bac91ee388a2247bb2a5d3e5c53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3a49915da8d3f5e53b04d763d969fbfa.gif)
说明:padding的格式和margin的格式一样,可以对照学习。可以看黑色DIV与白色DIV的边距来体会此属性的效果。这是还需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中),比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。也可以用以下四个属性来分别设置DIV的内边距:
9、padding-left:左内边距。
10、padding-right: 右内边距。
11、padding-top; 上内边距。
12、padding-bottom: 下内边距。
例:
![](https://i-blog.csdnimg.cn/blog_migrate/06584b35ca6741226e171ed432364387.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/fc9c946b7743f761043a18e31d417b70.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/11f78611dde834d88156807ba5beed19.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/093a4fb6754bccaf383cb3f7e97b91fd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/845250b7b92a09942eb27068a1bca6a0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/c015a09d74d0737de1f68c59b3ae4fb5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/dfb25b6e682b7d116134e2c77b0f9fe6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1b34760dac4969f13d257c8be55080c6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/526e1669471e6a89addfdbe41be1d524.gif)
13、position:设置DIV的定位方式。
例:
![](https://i-blog.csdnimg.cn/blog_migrate/0e12a7d1cca095a8a834b67ff9db7be0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7b6fd346b945cf19c5f395bb10a6715a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/5428b9674921482de67cc8bc7b317e38.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4ac5489bc14be857a7340e44fe086a3c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f4116b2366a593222703ad2b847b06d8.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0313f92cbc1d010135008cb546a15800.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/e4cd53d32f14daacbf1fe64ee2926645.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/c0ef5b8bba48da285cfdf94e1252f2d2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/304a5d87ba15189bc65212511e80c304.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f732be751217cfaec90068557278b6c5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/2828ef0d641cf65652940d09d3c63389.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/07795f1f55b4139505fd896f0f571cdc.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/15bafcdca83360c00bdc8646a698ce23.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/89b302dff5db817eb7eeeb7ec6cdbfb5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/c52eecd6d04e4bd7498eb8ef38cc1780.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/316569469540583f42f536f9be0a6d77.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d39d45c5393ae6427c02c702e60d779a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6eeb5efa355f9834403a0d0303a3d1f5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8e8dff748fd0293dee2334b687171f7e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/32a550621945f0fac21106bf8a06c2f9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/41df7a36f10ef3ce71619dc0295454bb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/2006f03d9023c9caed8eb1638d34d2e8.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0933d15648a5f31c518b7b1255b9e388.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f9765d472b35737c31501180288e9d6.gif)
说明: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:设置对象相对于文档层次中最近一个定位对象的左边界的位置。
15、top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。
16、right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。
17、bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。
18、z-index:设置DIV的层叠顺序。
例:
Code
<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>