1.設置邊框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*border:width type color*/
/*% in cm mm px(像素) em(倍數)*/
/*1.四個邊設相同的邊框*/
p {
border: 1px dashed red;
}
/*2.單個邊設邊框
left/right/top/bottom*/
h1 {
border-left: 10px solid blue;
}
/*3.塊元素一般寬度默認事100%，
高度會自適應，內容越多，他越高。當給他固定高度
時可能會導致內容溢出*/
p {
width: 300px;
height: 60px;
/*溢出時的處理方式*/
overflow: auto;
}
</style>
</head>
<body>
<h1>李老師</h1>
<p>
李楊樹，是達內java教學總監。
李楊樹，是達內java教學總監。
李楊樹，是達內java教學總監。
李楊樹，是達內java教學總監。
李楊樹，是達內java教學總監。
李楊樹，是達內java教學總監。
</p>
</body>
</html>
效果圖：
2.box
color:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
border: 1px solid red;
width: 100px;
height: 100px;
}
/*1.四個邊設置相同的邊距*/
#d1 {
padding: 20px;
margin: 30px;
}
/*2.四個邊設置不同的邊距 （上右下左）*/
#d2 {
padding: 10px 20px 30px 40px;
margin: 40px 30px 20px 10px;
}
/*3.單個邊設置邊距
left/right/top/bottom*/
#d3 {
padding-left: 20px;
margin-bottom: 40px;
}
/*4.對邊設置相同的邊距
上下 左右*/
#d4 {
padding: 20px 40px;
margin: 30px 10px;
}
/*5.對邊設置邊距的特例
在設置外邊距時，若左右外邊距值爲auto
則該元素水平居中*/
#d5 {
margin: 20px auto;
}
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
效果圖：
