CSS学习(四)——边框与边界

边框

属性名称 设定值 说明
border-style none 不显示边线(默认值)
  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>
</html>


边界

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

margin属性:
属性名称 设定值 说明
margin-bottom auto 自动调整空隙
  像素/百分比 设置下端空隙
margin-left auto  
  像素/百分比  
margin-right auto  
  像素/百分比  
margin-top auto  
  像素/百分比  

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>



你可能感兴趣的:(html,css)