您的位置：首页 > Web前端 > CSS

CSS学习（四）——边框与边界

2016-04-05 14:29 981 查看

边框

属性名称设定值 说明
border-stylenone不显示边线（默认值）
 dotted点线
 dashed虚线
 solid实线
 double双线
border-width长度border-width:0.2cm 0.3cm 0.4cm 0.5cm 
 像素 
border-color十六进制border-color:上 右 下 左线的颜色
 英文border-color:red(四边均为红色)
  border-color:red green(上下为红色，左右为绿色)
  border-color:red green blue(上为红色、左右为绿色、下为蓝色)
  border-color:red green blue yellow(上右下左分别为红绿蓝黄)
简化写法：border:式样 长度 颜色;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边框与边界</title>
<style type="text/css">
img{
width:200px;
/*更改图片的尺寸*/
border-width:10px;
border-color:black;
border-style:double;}
</style>
</head>
<body>
<img src="image.jpg" />
</body>
4000
;
</html>


边界

padding属性：

属性名称设定值说明
padding-bottom像素/百分比元件下端与边界的空隙
padding-left像素/百分比元件左端与边界的空隙
padding-right像素/百分比元件右端与边界的空隙
padding-top像素/百分比元件上端与边界的空隙
margin属性：

属性名称设定值说明
margin-bottomauto自动调整空隙
 像素/百分比设置下端空隙
margin-leftauto 
 像素/百分比 
margin-rightauto 
 像素/百分比 
margin-topauto 
 像素/百分比 
padding与margin的区别：padding是设置内部元件与本身边界的距离，而margin是设置本身与外部边界的距离。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边框与边界</title>
<style type="text/css">
td{font-size:20px;font-family:幼圆;padding-top:20px;}
table{margin-top:50px;}
</style>
</head>
<body>
<table bgcolor="pink" border="1" width="300" height="200" cellspacing="0" cellpadding="0">
<tr><td valign="top">CSS边框与边界</td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航