16 ， CSS 边框与边界

时间：2023-06-22 08:07:49

1.CSS 中边框的使用

2.CSS 中边界的使用

16.1 CSS 中边框的使用

属性名称 属性值 说明

border-color 十六进制 可依序设置上，右，下，左线颜色

英文名称 border-color:red(四边均为红色)

三原色 border-color:red green

(上下为红色，左右为绿色)

border-color:red green blue

(上为红色、左右为绿色、下为蓝色)

border-color:red green blue yellow

(上右下左分别为红绿蓝黄)

border-style none 不显示边线

dotted 点线

dashed 虚线

solid 实线

double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;

border-width:1 2 3 4;

简化方案：border:形态 长度 颜色

例如 border:1px solid black;

16.2 CSS 中边界的使用

padding 属性介绍

属性名称 属性值 说明

padding-bottom 长度/百分比 元件下端边线的空隙

padding-left 长度/百分比 元件左端边线的空隙

padding-right 长度/百分比 元件右端边线的空隙

padding-top 长度/百分比 元件上端边线的空隙

简易写法：padding:10px

padding:2px 4px

padding:2px 6px 10px

padding:1px 2px 3px 4px

margin 系列属性介绍

属性名称 属性值 说明

margin-bottom auto 自动调整空隙

长度/百分比 设置下端空隙

margin-left auto 自动调整空隙

长度/百分比 设置左端空隙

margin-right auto 自动调整空隙

长度/百分比 设置右端空隙

margin-top auto 自动调整空隙

长度/百分比 设置上端空隙

简化方案：margin:2px 4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

常用网页顶格设置：margin:0;

CSS 1CSS 中边框的使用

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

		border-width: 6px;

		border-color:red green blue yellow;

		border-style: solid;/*必须要填，不填默认为不显示边线*/

	}

	</style>

</head>

<body>

<img src="data:images/pic7.jpg">

<P><pre>

CSS 中边框的使用

属性名称 属性值 说明

border-color 十六进制 可依序设置上，右，下，左线颜色

			英文名称 border-color:red(四边均为红色)

			三原色 border-color:red green

			(上下为红色，左右为绿色)

			border-color:red green blue

			(上为红色、左右为绿色、下为蓝色)

			border-color:red green blue yellow

			(上右下左分别为红绿蓝黄)

border-style none 不显示边线

			dotted 点线

			dashed 虚线

			solid 实线

			double 双线

border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;

					border-width:1 2 3 4;

简化方案：border:形态 长度 颜色

例如 border:1px solid black;

</pre></P>

</body>

</html>

　　CSS 2CSS 中边界的使用

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

		padding-top:20px;

		padding-left:10px;

	}

	table{

		margin-top: 80px;

	}

	</style>

</head>

<body>

<table border="1" width="300" height="200" cellpadding="0" cellspacing="0">

	<tr>

		<td valign="top">padding 属性介绍</td>

	</tr>

</table>

<P><pre>

 CSS 中边界的使用

padding 属性介绍

		属性名称 属性值 说明

		padding-bottom 长度/百分比 元件下端边线的空隙

		padding-left 长度/百分比 元件左端边线的空隙

		padding-right 长度/百分比 元件右端边线的空隙

		padding-top 长度/百分比 元件上端边线的空隙

		简易写法：padding:10px

		padding:2px 4px

		padding:2px 6px 10px

		padding:1px 2px 3px 4px

margin 系列属性介绍

		属性名称 属性值 说明

		margin-bottom auto 自动调整空隙

		长度/百分比 设置下端空隙

		margin-left auto 自动调整空隙

		长度/百分比 设置左端空隙

		margin-right auto 自动调整空隙

		长度/百分比 设置右端空隙

		margin-top auto 自动调整空隙

		长度/百分比 设置上端空隙

		简化方案：margin:2px 4px

		margin:2px 6px 10px

		margin:1px 2px 3px 4px

常用网页顶格设置：margin:0;

</pre></P>

</body>

</html>

　　

相关文章