013 盒子模型

時間 2019-12-10

標籤盒子模型欄目 CSS 简体版

原文原文鏈接

一：邊框css

1.borderhtml

　　屬性：spa

　　border-width：邊框的粗細code

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

　　border-colorblog

2.案例input

 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.連寫it

　　沒有順序要求的。io

　　通常是粗細，style，顏色class

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.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。