一、margin
在用HTML进行页面布局时,常常需要设置页边空白,会用到margin的属性:
用来指定页边距,按照顺时针方向:上- 右 -下- 左的顺序进行设置。
margin:top right bottom left;
top right bottom left四个值之间用空格分隔。等同于:
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;
如果设置margin:属性值时,有省略情况出现,则遵守下面的规范:
1.如果没有left值,则使用right代替;
2.如果没有bottom值,则使用top代替;
3.如果没有right值,则使用top值代替。
根据上面的规则,我们可以有三种省略方式:
1)margin有三个值,margin: top right bottom;
其中缺少了left,根据上面的规则,left的值用right的值来代替。
例如:margin:15px 10px 5px; 等效于margin:15px 10px 5px10px;
2)margin有两个值,margin: top right;
缺少了bottom和left,根据规则,bottom=top,left=right。
例如:margin: 10px 20px; 就等效于margin:10px 5px 10px 5px
3) margin只有一个值,margin: top;
省略了3个,right=top,bottom=top,left=right=top,即上下左右的值相等。
例如margin:5px; 即等效于margin:5px 5px 5px 5px;
以下语句是画了一条直线,宽度是600px,高度是2px,距离顶部16px,配置背景色是:rgb(28,66,105)
<div style="margin: 16px 0px 0px; padding: 0px; width: 600px; height: 2px; overflow: hidden;
background-color: rgb(28, 66, 105);" unselectable="on"> </div>
二、border-style
border-style可用于设置元素的所有边框样式,也可以单独的设置某一边框的样式。
border-style的用法和margin相同:配置顺序按照顺时针方向,上- 右 -下 - 左。
语句用法:border-style:top right bottom left
下面是几个例子:
例1: border-style:solid double dashed dotted;
解析: 参数top是上边框: solid(实线)
参数right是右边框: double(双线)
参数bottom是下边框:dashed(虚线)
参数left表示左边框: dotted(点状线)
设置后的显示效果如下图:
例2:border-style:dotted solid dashed;
解析:上边框是:dotted(点状线)
右边框是:solid(实线)
下边框是:dashed(虚线)
左边框是:left=right=solid(实线)
显示效果如下图:
例3:border-style:solid 设置四个边框都是实线型
其他的用法和margin类似,四边相同的效果显示图如下:
1)实线
2)虚线
3)点状线
4)双线
可设的值:none(hidden):定义无边框。
groove:定义3D凹槽边框,取决于border-color的值。
ridge:定义3D垄状边框,效果同样取决于border-color的值。
inset:定义3D inset 边框。
outset:定义3D outset边框。
试了一下效果不是很明显。
也可以分别设置:border-top-style: dashed
border-right-style: dotted
border-bottom-style:solid
border-left-style: double
<div unselectable="on" style="border-style:groove none;border-color:#2fcb58;border-width:2px;margin:16px 0px 0px;padding:0px;width:1080px;height:7px;overflow:hidden;background-color:#10a6f8;"> </div>
效果图如下:
好看了一点点,不断学习中!
文字缩进:
<style type="text/css"unselectable="on">
.cs5{ text-indent:20px}
#em a:link,#em a:visited{font-family:Segoe UI;font-size:18pt;color:#FFFFFF;text-decoration:none;}
#em a:hover{color:#0000FF;text-decoration:underline;}
</style>
<div class="cs5 "id="em" unselectable="on">
<a href="/sites/pld/ddresl/Lists/DDRESL%20People/AllItems.aspx?InitialTabId=Ribbon.ListItem&VisibilityContext=WSSTabPersistence#InplviewHashc7c8994b-1c6f-4c7e-b211-b9b36ec3a90a=" unselectable="on"><p>Member Information</p></a>
</div>
嵌入文件:
<object width="820" height="274">
<param name="folder" value=" http://eip.spreadtrum.com/sites/pld/ddresl/Documents/VP/Recent Slides Show">
<embed src=" http://eip.spreadtrum.com/sites/pld/ddresl/Documents/VP/Recent Slides Show" width="820" height="274">
</embed>