html 的介紹

html 的介紹
學習目標

能夠知道html的作用

1. 網頁效果圖

2. html的定義
   HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言， 標記：就是標簽, <標簽名稱> </標簽名稱>, 比如: 、

   等，標簽大多數都是成對出現的，

所謂超文本，有兩層含義:

因為網頁中還可以圖片、視頻、音頻等內容(超越文本限制)
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接(超鏈接文本)
3. html的作用
html是用來開發網頁的，它是開發網頁的語言，

4. 小結
   html是開發網頁的語言
   html中的標簽大多數都是成對出現的, 格式: <標簽名></標簽名>

html 的基本結構

html 的基本結構
學習目標

能夠寫出html的基本結構

1. 結構代碼

網頁顯示內容 第一行是檔案宣告, 用來指定頁面所使用的html的版本, 這里宣告的是一個html5的檔案， ...標簽是開發人員在告訴瀏覽器，整個網頁是從這里開始的，到結束,也就是html檔案的開始和結束標簽， ...標簽用于定義檔案的頭部,是負責對網頁進行設定標題、編碼格式以及引入css和js檔案的， ...標簽是撰寫網頁上顯示的內容， 2. 瀏覽網頁檔案 網頁檔案的后綴是.html或者.htm, 一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將檔案渲染成網頁， 

網頁基本結構

3. 小結
   

vscode 的基本使用

vscode 的基本使用
學習目標

能夠安裝和卸載 vscode 的插件
能夠設定 vscode 的顏色主題和字體大小

1. vscode 的基本介紹
   全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟體開發工具，

2. vscode 的安裝
   下載網址: https://code.visualstudio.com/Download
   選擇對應的安裝包進行下載:
   

根據下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件，
3. vscode 的插件安裝
漢化插件安裝

open in browser 插件安裝

注意: 如果在vscode打開的html檔案中右擊沒有出現 open in browser 型別的選項，需要把當前打開的檔案關掉，重新打開這個檔案就好了，
4. vscode 的插件卸載
點擊對應安裝的插件，然后再點擊卸載按鈕即可，

5. vscode 的使用
   打開檔案夾創建檔案
   
   

快速創建html檔案的基本結構

右擊在瀏覽器打開html檔案

6. 設定字體大小
   
   

7. 設定顏色主題
   
   

8. 設定默認瀏覽器[可選]
   可以根據自己的需要設定默認使用的瀏覽器
   

9. 小結
   vscode 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
   通過資源管理器打開檔案夾創建HTML檔案，撰寫 HTML 代碼
   可以根據需要安裝對應的插件
   可以設定字體大小和顏色主題

初始常用的 html 標簽

初始常用的 html 標簽
學習目標

能夠知道單標簽和雙標簽的區別

1. 常用的 html 標簽

<!-- 1、成對出現的標簽：-->

<h1>h1標題</h1>
<div>這是一個div標簽</div>
<p>這個一個段落標簽</p>


<!-- 2、單個出現的標簽： -->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

<!-- 3、帶屬性的標簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網</a>

<!-- 4、標簽的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖片">
    <a href="http://www.baidu.com">百度網</a>
</div>

提示:

標簽不區分大小寫，但是推薦使用小寫，
根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽)
2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽
2.2 單標簽是一個標簽組成，沒有標簽內容， 比如: img標簽
2. 小結
學習 html 語言就是學習標簽的用法，常用的標簽有20多個，
撰寫 html 標簽建議使用小寫
根據書寫形式，html 標簽分為雙標簽和單標簽
單標簽沒有標簽內容，雙標簽可以嵌套其它標簽和承載文本內容

資源路徑

資源路徑
學習目標

能夠知道相對路徑和絕對路徑的區別
當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:

<img src="images/logo.png">

這里的src屬性就是設定圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑，

1. 相對路徑
   從當前操作 html 的檔案所在目錄算起的路徑叫做相對路徑

示例代碼:

<!-- 相對路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對路徑方式2 -->
<img src="images/logo.png">

2. 絕對路徑
   從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源檔案找不到的問題

3. 小結
   相對路徑和絕對路徑是 html 標簽使用資源檔案的兩種方式，一般使用相對路徑，
   相對路徑是從當前操作的 html 檔案所在目錄算起的路徑
   絕對 路徑是從根目錄算起的路徑

串列標簽

串列標簽
學習目標

能夠知道串列標簽的種類

1. 串列標簽的種類
   無序串列標簽(ul標簽)
   有序串列標簽(ol標簽)
2. 無序串列

<!-- ul標簽定義無序串列 -->
<ul>
    <!-- li標簽定義串列專案 -->
    <li>串列標題一</li>
    <li>串列標題二</li>
    <li>串列標題三</li>
</ul>

3. 有序串列

<!-- ol標簽定義有序串列 -->
<ol>
    <!-- li標簽定義串列專案 -->
    <li><a href="#">串列標題一</a></li>
    <li><a href="#">串列標題二</a></li>
    <li><a href="#">串列標題三</a></li>
</ol>

4. 小結
   串列標簽有無序串列標簽(ul標簽)和有序串列標簽(ol標簽)
   串列專案對順序有要求的時候使用ol標簽
   串列專案對順序無要求的時候使用ul標簽

表格標簽

表格標簽
學習目標

能夠知道表格的邊線合并

1. 表格的結構
   表格是由行和列組成，好比一個excel檔案

2. 表格標簽

<table>標簽：表示一個表格

<tr>標簽：表示表格中的一行

<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

示例代碼:

<table>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>18</td> 
    </tr>
</table>

表格邊線合并:

border-collapse 設定表格的邊線合并，如：border-collapse:collapse;

表單標簽

表單標簽
學習目標

能夠知道表單中常用的表單元素標簽

1. 表單的介紹
   表單用于搜集不同型別的用戶輸入(用戶輸入的資料)，然后可以把用戶資料提交到web服務器 ，

2. 表單相關標簽的使用

標簽 表示表單標簽，定義整體的表單區域

標簽 表示表單元素的文字標注標簽，定義文字標注

標簽 表示表單元素的用戶輸入標簽，定義不同型別的用戶輸入資料方式

type屬性
type=“text” 定義單行文本輸入框
type=“password” 定義密碼輸入框
type=“radio” 定義單選框
type=“checkbox” 定義復選框
type=“file” 定義上傳檔案
type=“submit” 定義提交按鈕
type=“reset” 定義重置按鈕
type=“button” 定義一個普通按鈕
標簽 表示表單元素的多行文本輸入框標簽 定義多行文本輸入框

標簽 表示表單元素的下拉串列標簽 定義下拉串列

標簽 與標簽配合，定義下拉串列中的選項 示例代碼:

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密碼：</label><input type="password">
    </p>
    <p>
        <label>性別：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>廣州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小結
   表單標簽是標簽
   常用的表單元素標簽有: 、、 、 等標簽

表單提交

表單提交
學習目標

能夠知道表單的提交方式
能夠知道表單中action屬性的作用

1. 表單屬性設定

標簽 表示表單標簽，定義整體的表單區域

action屬性 設定表單資料提交地址
method屬性 設定表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫
2. 表單元素屬性設定
name屬性 設定表單元素的名稱，該名稱是提交資料時的引數名
value屬性 設定表單元素的值，該值是提交資料時引數名所對應的值
3. 示例代碼

<form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密碼：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性別：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

小結
表單標簽的作用就是可以把用戶輸入資料一起提交到web服務器，
表單屬性設定
action: 是設定表單資料提交地址
method: 是表單提交方式，提交方式有GET和POST
表單元素屬性設定
name: 表單元素的名稱，用于作為提交表單資料時的引數名
value: 表單元素的值，用于作為提交表單資料時引數名所對應的值

css的介紹

css 的介紹
學習目標

能夠知道css的作用

1. css 的定義
   css(Cascading Style Sheet)層疊樣式表，它是用來美化頁面的一種語言，

沒有使用css的效果圖

使用css的效果圖

2. css 的作用
   美化界面, 比如: 設定標簽文字大小、顏色、字體加粗等樣式，
   控制頁面布局, 比如: 設定浮動、定位等樣式，
3. css 的基本語法
   選擇器{

樣式規則

}

樣式規則：

屬性名1：屬性值1;

屬性名2：屬性值2;

屬性名3：屬性值3;

…

選擇器:是用來選擇標簽的，選出來以后給標簽加樣式，

代碼示例:

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

說明

css 是由兩個主要的部分構成：選擇器和一潭訓多條樣式規則，注意:樣式規則需要放到大括號里面，

4. 小結
   css 是層疊樣式表，它是用來美化網頁和控制頁面布局的，
   定義 css 的語法格式是: 選擇器{樣式規則}

css的引入方式

css 的引入方式
學習目標

能夠知道 css 的引入三種方式
css的三種引入方式

行內式
內嵌式（內部樣式）
外鏈式

1. 行內式
   直接在標簽的 style 屬性中添加 css 樣式

示例代碼:

<div style="width:100px; height:100px; background:red ">hello</div>

優點：方便、直觀， 缺點：缺乏可重用性，

2. 內嵌式（內部樣式）
   在標簽內加入

示例代碼:

<head>
   <style type="text/css">
      h3{
         color:red;
      }
   </style>
</head>

優點：在同一個頁面內部便于復用和維護， 缺點：在多個頁面之間的可重用性不夠高，

3. 外鏈式
   將css代碼寫在一個單獨的.css檔案中，在標簽中使用標簽直接引入該檔案到頁面中，

示例代碼:

<link rel="stylesheet" type="text/css" href="css/main.css">

優點：使得css樣式與html頁面分離，便于整個頁面系統的規劃和維護，可重用性高， 缺點：css代碼由于分離到單獨的css檔案，容易出現css代碼過于集中，若維護不當則極容易造成混亂，

4. css引入方式選擇
   行內式幾乎不用
   內嵌式在學習css樣式的階段使用
   外鏈式在公司開發的階段使用，可以對 css 樣式和 html 頁面分別進行開發，
5. 小結
   css 的引入有三種方式, 分別是行內式、內嵌式、外鏈式，
   外鏈式是在公司開發的時候會使用，最能體現 div+css 的標簽內容與顯示樣式分離的思想， 也最易改版維護，代碼看起來也是最美觀的一種，

css選擇器

css 選擇器
學習目標

能夠說出 css 選擇器的種類

1. css 選擇器的定義
   css 選擇器是用來選擇標簽的，選出來以后給標簽加樣式，

2. css 選擇器的種類
   標簽選擇器
   類選擇器
   層級選擇器(后代選擇器)
   id選擇器
   組選擇器
   偽類選擇器

3. 標簽選擇器
   根據標簽來選擇標簽，以標簽開頭，此種選擇器影響范圍大，一般用來做一些通用設定，

示例代碼

<style type="text/css">
    p{
        color: red;
    }
</style>

<div>hello</div>
<p>hello</p>

4. 類選擇器
   根據類名來選擇標簽，以 . 開頭, 一個類選擇器可應用于多個標簽上，一個標簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可復用，是css中應用最多的一種選擇器，

示例代碼

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>

<div class="blue">這是一個div</div>
<h3 class="blue big box">這是一個標題</h3>
<p class="blue box">這是一個段落</p>

5. 層級選擇器(后代選擇器)
   根據層級關系選擇后代標簽，以選擇器1 選擇器2開頭，主要應用在標簽嵌套的結構中，減少命名，

示例代碼

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意點: 這個層級關系不一定是父子關系，也有可能是祖孫關系，只要有后代關系都適用于這個層級選擇器

6. id選擇器
   根據id選擇標簽，以#開頭, 元素的id名稱不能重復，所以id選擇器只能對應于頁面上一個元素，不能復用，id名一般給程式使用，所以不推薦使用id作為選擇器，

示例代碼

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">這是一個段落標簽</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
<p>這是第二個段落標簽</p> <!-- 無法應用以上樣式，每個標簽只能有唯一的id名 -->
<p>這是第三個段落標簽</p> <!-- 無法應用以上樣式，每個標簽只能有唯一的id名  -->

注意點: 雖然給其它標簽設定id=“box”也可以設定樣式，但是不推薦這樣做，因為id是唯一的，以后js通過id只能獲取一個唯一的標簽物件，

7. 組選擇器
   根據組合的選擇器選擇不同的標簽，以 , 分割開, 如果有公共的樣式設定，可以使用組選擇器，

示例代碼

```html
<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}

</style>

<div class="box1">這是第一個div</div>
<div class="box2">這是第二個div</div>
<div class="box3">這是第三個div</div>

8. 偽類選擇器
用于向選擇器添加特殊的效果, 以 : 分割開, 當用戶和網站互動的時候改變顯示效果可以使用偽類選擇器

示例代碼

```html
<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">這是第一個div</div>

9. 小結
   css 選擇器就是用來選擇標簽設定樣式的
   常用的 css 選擇器有六種，分別是:
   標簽選擇器
   類選擇器
   層級選擇器(后代選擇器)
   id選擇器
   組選擇器
   偽類選擇器

css屬性

css 屬性
學習目標

能夠知道常用的樣式屬性
我們知道 css 作用是美化 HTML 網頁和控制頁面布局的,接下來我們來學習一下經常使用一些樣式屬性，

1. 布局常用樣式屬性
   width 設定元素(標簽)的寬度，如：width:100px;
   height 設定元素(標簽)的高度，如：height:200px;
   background 設定元素背景色或者背景圖片，如：background:gold; 設定元素的背景色, background: url(images/logo.png); 設定元素的背景圖片，
   border 設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1像素寬的黑色實線
   以上也可以拆分成四個邊的寫法，分別設定四個邊的：
   border-top 設定頂邊邊框，如：border-top:10px solid red;
   border-left 設定左邊邊框，如：border-left:10px solid blue;
   border-right 設定右邊邊框，如：border-right:10px solid green;
   border-bottom 設定底邊邊框，如：border-bottom:10px solid pink;
   padding 設定元素包含的內容和元素邊框的距離，也叫內邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:padding-top、padding-left、padding-right、padding-bottom，
   margin 設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:margin-top、margin-left、margin-right、margin-bottom，
   float 設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;
2. 文本常用樣式屬性
   color 設定文字的顏色，如： color:red;
   font-size 設定文字的大小，如：font-size:12px;
   font-family 設定文字的字體，如：font-family:‘微軟雅黑’;為了避免中文字不兼容，一般寫成：font-family:‘Microsoft Yahei’;
   font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
   line-height 設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px
   text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
   text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中
   text-indent 設定文字首行縮進，如：text-indent:24px; 設定文字首行縮進24px
3. 布局常用樣式屬性示例代碼

<style>

    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }

    .box2{
        /* 這里是注釋內容 */
        /* 設定寬度 */
        width: 100px;
        /* 設定高度 */
        height: 100px;
        /* 設定背景色 */
        background: red;
        /* 設定四邊邊框 */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /* 設定內邊距， 內容到邊框的距離，如果設定四邊是上右下左 */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /* 設定外邊距，設定元素邊框到外界元素邊框的距離 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left;
    }

    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        float: left;
    }

</style>

<div class="box1">
    <div class="box2">
        padding 設定元素包含的內容和元素邊框的距離
    </div>
    <div class="box3">
    </div>
</div>

4. 文本常用樣式屬性示例

<style>
    p{
       /* 設定字體大小  瀏覽器默認是 16px */
       font-size:20px;
       /* 設定字體 */
       font-family: "Microsoft YaHei"; 
       /* 設定字體加粗 */
       font-weight: bold;
       /* 設定字體顏色 */
       color: red;
       /* 增加掉下劃線 */
       text-decoration: underline;
       /* 設定行高  */
       line-height: 100px;
       /* 設定背景色 */
       background: green;
       /* 設定文字居中 */
       /* text-align: center; */
       text-indent: 40px;
    }

    a{
        /* 去掉下劃線 */
        text-decoration: none;
    }
</style>

<a href="#">連接標簽</a>
<p>
    你好，世界!
</p>

5. 小結
   設定不同的樣式屬性會呈現不同網頁的顯示效果
   樣式屬性的表現形式是: 屬性名:屬性值;

css元素溢位

css 元素溢位
學習目標

能夠說出元素溢位的解決辦法

1. 什么是 css 元素溢位
   當子元素(標簽)的尺寸超過父元素(標簽)的尺寸時，此時需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來完成，

overflow的設定項：

visible 默認值, 顯示子標簽溢位部分，
hidden 隱藏子標簽溢位部分，
auto 如果子標簽溢位，則可以滾動查看其余的內容，
2. 示例代碼

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父級上設定子元素溢位的部分如何顯示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

3. 小結
   overflow樣式屬性是設定子標簽溢位的顯示方式
   常用使用overflow:hidden;來解決元素溢位

css顯示特性

css 顯示特性
學習目標

能夠說出標簽隱藏設定

1. display 屬性的使用
   display 屬性是用來設定元素的型別及隱藏的，常用的屬性有：

none 元素隱藏且不占位置
inline 元素以行內元素顯示
block 元素以塊元素顯示
2. 示例代碼

<style>
    .box{
        /* 將塊元素轉化為行內元素 */
        display:inline;
    } 

    .link01{
        /* 將行內元素轉化為塊元素 */
        display:block;
        background: red;

    }

    .con{
        width:200px;
        height:200px;
        background:gold;

        /* 將元素隱藏 */
        display:none;
    }

</style>

<div class="con"></div>
<div class="box">這是第一個div</div>
<div class="box">這是第二個div</div>
<a href="#" class="link01">這是第一個鏈接</a>
<a href="#" class="link01">這是第二個鏈接</a>

說明:

行內元素不能設定寬高， 塊元素或者行內塊元素可以設定寬高，

3. 小結
   通常隱藏元素使用 display:none

盒子模型

盒子模型
學習目標

能夠知道盒子模型中的各個屬性

1. 盒子模型的介紹
   所謂的盒子模型就是把HTML頁面的元素看作一個矩形盒子，矩形盒子是由內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)四部分組成，

盒子模型示意圖如下：

2. 盒子模型相關樣式屬性
   盒子的內容寬度(width)，注意：不是盒子的寬度
   盒子的內容高度(height)，注意：不是盒子的高度
   盒子的邊框(border)
   盒子內的內容和邊框之間的間距(padding)
   盒子與盒子之間的間距(margin)
   設定寬高：

設定盒子的寬高，此寬高是指盒子內容的寬高，不是盒子整體寬高

width:200px; /* 設定盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(難點) /
height:200px; / 設定盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(難點) */
設定邊框:

設定一邊的邊框，比如頂部邊框，可以按如下設定：

border-top:10px solid red;
說明:

其中10px表示線框的粗細；solid表示線性；red表示邊框的顏色

設定其它三個邊的方法和上面一樣，把上面的’top’換成’left’就是設定左邊，換成’right’就是設定右邊，換成’bottom’就是設定底邊，

四個邊如果設定一樣，可以將四個邊的設定合并成一句：

border:10px solid red;
設定內間距padding

設定盒子四邊的內間距，可設定如下：

padding-top：20px; /* 設定頂部內間距20px /
padding-left:30px; / 設定左邊內間距30px /
padding-right:40px; / 設定右邊內間距40px /
padding-bottom:50px; / 設定底部內間距50px */
上面的設定可以簡寫如下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左
四個方向的內邊距值， */
padding后面還可以跟3個值，2個值和1個值，它們分別設定的專案如下：

padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px /
padding：20px 40px; / 設定上下內邊距為20px，左右內邊距為40px*/
padding：20px; /* 設定四邊內邊距為20px */
設定外間距margin

外邊距的設定方法和padding的設定方法相同，將上面設定項中的’padding’換成’margin’就是外邊距設定方法，

盒子的真實尺寸

盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸為：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
小結
盒子模型的5個主要樣式屬性
width：內容的寬度(不是盒子的寬度)
height：內容的高度(不是盒子的高度)
padding：內邊距，
border：邊框，
margin：外邊距
盒子的真實尺寸只會受到寬度、高度、邊框、內邊距四個屬性的影響，不會受到外邊距屬性的影響，