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

最新推荐文章于 2023-01-10 14:16:23 发布

交易程序猿

最新推荐文章于 2023-01-10 14:16:23 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/codemonkeysama/article/details/51064556

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

边框

属性名称	设定值	说明
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>

交易程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（四）——边框与边界

边框属性名称设定值说明border-stylenone不显示边线（默认值） dotted点线 dashed虚线 solid实线 double双线border-width长度border-width:0.2cm 0.3cm 0.4cm 0.5cm
复制链接

扫一扫