1. 盒子模型
1.1 盒子概念
頁面當中所有元素都可以看成一個盒子，每個盒子都佔據着定的頁面空間。它可以指的是頁面上的個區域，或者是圖片，導航欄、列表、表格等等段落
1.2 盒子組成
盒子模型首先要有內容 ，也就是盒子裏面裝着的東西，這個內容我們用content來表示 ；
內容佔有一定的頁面空間，我們通常用height它的高度 ，還有width他的寬度來表示，比如說當前的盒子裏面帶有一副圖片 ，那麼這個圖片我們就可以通過height和width屬性來進行它的高度和寬度的一個設定 ；
盒子必定有邊界，這個邊界線有粗有細，我們可以通過border來設定它的大小，border的大小也就是邊界的外邊框與內邊框的距離，圖片在盒子內部佔據一定空間，它可以是並非完全的充滿整個空間，因此這個圖片到盒子內邊框的距離稱爲是內邊距，我們用padding來表示 ；；
盒子與盒子之間的距離我們稱爲外邊距，即盒子外邊框與外邊框之間的距離，我們用margin來表示，當頁面上有多個盒子的時候 ，我們可以通過兩個盒子之間的外邊距 ，來設定兩個盒子之間的一個距離 。
1.3 盒子的實際高度、寬度
一個盒子模型它佔據的頁面空間大小也就是他的實際寬度和高度是由它的內容+內邊距+邊框+外邊距共同組成的
1.4 測試代碼
<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>
<body>
<div id="box">
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</body>
</html>
這裏同過id選擇器設定盒子的樣式，上下左右的屬性值都相同
2. overflow屬性
當內容溢出盒子框時，就需要使用到overflow屬性
2.1 測試代碼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div
{
background-color:#00FFFF;
width:200px;
height:200px;
text-align: justify;
/*overflow: scroll;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div>
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</body>
</html>
3. border屬性
3.1 基本內容
border可以通過子屬性分開設置，也可以統一在一起設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 50px;
height:50px;
margin:5px;
}
.brd1{
border-width:2px;
border-style:solid;
border-color:red;
}
.brd2{
border:2px solid red;
}
.brd3{
border-bottom:1px solid red;
}
.line {
height:1px;
width:500px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div class="brd1"></div>
<div class="brd2"></div>
<div class="brd3"></div>
<div class="line"></div>
</body>
</html>
可以看到brd1和brd2都是相同的效果，brd3設置了底部邊框，line設置了頂部邊框，id樣式覆蓋掉了標籤樣式，因此頂部邊框長度爲500px
3.2 應用——水平分割線製作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.line {
height:1px;
width:500px;
border-top:1px solid gray;
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
