margin和border-style的用法

一、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> 

效果图如下：

好看了一点点，不断学习中！

其他参考链接：http://mail.126.com/js6/main.jsp?sid=MBpguCsRxDqVAkJPjdRRGzKMegwVpEtb#module=mbox.ListModule%7C%7B%22fid%22%3A1%2C%22order%22%3A%22date%22%2C%22desc%22%3Atrue%7D 

文字缩进：

<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>