013 盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

转载最新推荐文章于 2025-07-03 11:04:06 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/juncaoit/p/10897204.html

博客主要介绍了CSS中边框和内边距的设置方法。边框设置涉及border属性，包括粗细、样式、颜色等，可连写且无顺序要求，还能对四边分别设置；内边距使用padding。文中配有案例展示效果。

一：边框

1.border

　　属性：

　　border-width：边框的粗细

　　border-style：主要有none，solid，double，dotted，dashed

　　border-color

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div {
 8             width: 400px;
 9             height: 300px;
10             border-width: 1px;
11             border-style: solid;
12             border-color: red;
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18 </body>
19 </html>

3.连写

　　没有顺序要求的。

　　一般是粗细，style，颜色

4.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div {
 8             width: 400px;
 9             height: 300px;
10             border: 1px solid red;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

5.边框的四边分别设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 400px;
			height: 300px;
			border-top: 1px solid red;
			border-bottom: 1px solid blue;
			border-left: 1px dashed yellow;
			border-right: 1px dotted green;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

6.实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input {
 8             border:0;
 9             border-bottom:1px dashed red;
10         }
11     </style>
12 </head>
13 <body>
14     用户名：<input type="text">
15 </body>
16 </html>

7.效果

二：内边距

1.说明

　　使用padding

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*div {
			width: 200px;
			height: 100px;
			border: 1px solid red;
			padding: 10px;
		}*/
		a {
			height: 35px;
			background-color: #ccc;
			display: inline-block;
			line-height: 35px;
			color: #fff;
			text-decoration: none;
			padding-left: 20px;
			padding-right: 20px;
		}
		a:hover {
			color: red;
		}
	</style>
</head>
<body>
	<!-- <div>人生啊</div> -->
	<a href="#">首页</a>
	<a href="#">移动客户端</a>
</body>
</html>

3.效果

转载于:https://www.cnblogs.com/juncaoit/p/10897204.html