2020年2月17日
今天訪問量破萬了，非常開心，在這裏Hunter我謝謝大家的支持，給了我堅持下去的動力，讓我知道了有人看，所以我會一直更新下去的。
一. 本節課學習目標。
- 掌握盒模型的結構。
- 掌握盒模型的寬高計算方式。
- 掌握CSS的引入方式。
- 掌握通配選擇器的用法。
- 通過盒模型編寫百度首頁。
二. 盒模型的結構。
- 盒模型簡介。
HTML元素在網頁中進行呈現的，都是呈現的一個盒子結構的形式，所以稱爲盒模型（box model）。
注意：我們的每一個html元素都有盒模型結構，比如：div，p，a，span，em，strong等等。 - 盒模型組成部分。
2.1 內容區域，width和height。
記住：只要width和height的值不改，那內容區域的大小就不會更改。
2.2 內填充padding。
記住：內填充是在邊框內部的，設置的是邊界和內容的距離。
2.3 邊框border。
記住：邊框可以靈活設置四個方向。
2.4 外間距margin.
記住：外間距是在邊框以外的，用來調整的是元素的位置。 - 如何實現一個塊元素水平居中？
實現方式：給該元素添加margin：0 auto;屬性即可。
Auto屬性作用到margin-left以及margin-right上。
計算方式： margin-left = margin-right = (瀏覽器寬度 – 當前元素的寬度) / 2
前提：元素的寬度必須是已知確定的。
代碼塊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒模型</title>
<style type="text/css">
.box {
background-color: yellow;
/* 決定網頁上能夠顯示內容的區域。 */
width: 800px;
height: 200px;
/* 內填充（邊框裏面的，設置邊框和內容的距離） */
padding-left: 100px;
/* 邊框 border */
border-left: 1px solid red;
/* 外間距 margin */
/* 第一個值：上下 第二個值：左右 auto（自動） */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
昨天最好的表現就是今天最低的要求。
</div>
</body>
</html>
三. 盒模型的寬高計算方式。
- 盒模型的寬。
盒模型的寬度 = 左間距 + 左邊框寬度 + 左填充 + 內容區域寬度 + 右填充 + 右邊框寬度 + 右間距
盒模型的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。 - 盒模型的高。
盒模型的高度 = 上間距 + 上邊框寬度 + 上填充 + 內容區域高度 + 下填充 + 下邊框寬度 + 下間距
盒模型的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。
四. 盒模型練習-映紛創意頂部。
效果圖：
佈局時： 如果一塊區域內存在多個元素（2個以上，包含2個），此時爲了更好的佈局，可以考慮使用div進行嵌套管理。
嵌套部分代碼塊：
<body>
<!-- 整個html結構 -->
<div class="top">
<img src="img/title2.png">
<div class="nav">
<a href="" id="first">HOME</a>
<a href="">WORK</a>
<a href="">CONTACT</a>
<a href="">JOIN US</a>
</div>
</div>
</body>
注：
調整距離的祕訣：
1.如果想調整相鄰兄弟元素的距離。
margin外間距 margin-top,margin-bottom,margin-left,margin-right
2.如果想調整父子元素的距離。
padding內填充 padding-top,padding-bottom,padding-left,padding-right
想調整padding，一定要作用到外層的div上。
五. CSS的引入方式。
-
css內部引入方式。
1.1 實現方式：
第一步：在html文件的head標籤中，添加上一對style標籤。
第二步：在style標籤中添加css代碼。
1.2 優點:
a. css寫起來比較方便。
b. css查找也比較方便。
1.3 缺點：
a. 不符合網頁開發規範，html和css分離（結構和樣式分離）。
b. Css樣式不能複用。
1.4 使用場景：
網頁比較小/課堂代碼/測試。 -
Css外部引入方式。
2.1 實現方式：
a. 在當前工程中新建一個單獨的css文件。
b. 在css文件中寫css代碼，記住：不需要再添加sytle標籤。
c. 在html文件中的head標籤中，通過link標籤引入外部的css文件，建立關聯。
2.2 優點：
a. 符合網頁開發的規範，能夠實現結構和樣式的分離。
b. Css能夠複用。
2.3 缺點:
a.不方便查找和修改。
2.4 使用場景。
中大型網頁。
其中link標籤代碼塊：
<link rel="stylesheet" type="text/css" href="css/index.css"/>
href屬性放要用的css樣式格式的css文件地址。
- CSS內聯式。
3.1 實現方式：
a.在標籤的開始標籤中，添加style屬性， 格式：style=”css樣式”
3.2 優點：
a. 寫起來方便，而且優先級比較高。
內聯式 > 內部（外部）
3.3 缺點：
a. 不能複用。
b. 不符合網頁開發規範。
3.4 使用場景：
當你通過內部引入的方式或者外部引入的方式，設置的css代碼沒有效果時（可能就是遇到了優先級不夠高的問題），此時可以將css代碼寫在標籤中。
內聯式代碼塊：
<p class="light" style="color: blue;background-color: red;">牀前明月光，疑是地上霜。</p>
六. 通配選擇器。
作用：
- 用來匹配到所有的標籤元素。 *：div，p，h1~h6,a等等。
- 將所有的標籤元素自帶的樣式清除掉。 Margin:0; padding:0;
用法： * { css樣式 }
通配選擇器格式代碼塊：
* {
/* 清除所有元素自帶的間距和填充 */
margin: 0;
padding: 0;
}
七. 百度首頁。
- Ps的用法。
1.1 使用ps打開一個圖片或者psd設計圖。
1.2 快捷方式；
a. 如何將圖片放大縮小。 Alt+鼠標滾輪。
b. 可以按住空格鍵，加鼠標左鍵，移動圖片位置。
1.3 如何通過ps量取尺寸。
a. 找到ps菜單欄中的窗口，勾選菜單中的信息。
b. 修改尺寸單位，修改爲像素px。方法： 找到信息面板的右上角，點擊，點擊之後選擇面板選項，將第三個標尺單位，改爲像素單位。
c. 找到ps工具欄中選框工具。
![在這裏插入圖片描述]()
d. 通過拉取選框，識別對應的尺寸即可。
e. 手殘黨請注意：如果無法直接量取準確尺寸，可以先拉個框，然後右擊變換選區，通過編輯狀態調整準確尺寸。 記住：識別到準確尺寸後，要退出編輯狀態，按回車即可。
1.4 如何識別顏色。
a.找到ps工具欄的前景色工具。
![在這裏插入圖片描述]()
b.點擊之後，出來拾色器吸管，吸管點擊任何一個位置，即可吸取對應的顏色。
c.將對應的顏色值，複製即可。
![在這裏插入圖片描述]()
d.複製完顏色值之後，記得一定要在前面添加#。
百度首頁的代碼網址鏈接：
https://blog.csdn.net/SB_Hunter/article/details/104328487
百度首頁總結。
知識點1：完整的網頁的佈局順序。
- 先對網頁整體的區域進行劃分，劃分爲多個div區域。
- 對每一塊區域進行上色（寬，高，背景顏色），依次調整間距，做出實際的佈局效果。
- 單獨去佈局每一塊區域的內容（按照1,2,3步驟）。
- Css屬性
a) 盒模型相關的屬性：margin，padding，border，width，height。
b) 文本相關的屬性：color,font-size,line-height,font-family,text-dercoration,letter-sacing等
c) 處理新問題：display: inline-block; vertical-align：top;
知識點2：間隙問題的處理？
- Html元素自帶的間隙問題。
解決方案：添加通配選擇器,清除元素自帶的盒模型結構。
*{ margin:0； pading：0；} - 行屬性標籤以及行內塊屬性自帶間隙問題。
解決方式1：將分行寫的代碼放置在同一行寫。
解決方式2：
a. 將所有的行元素放置在一個div中。
b. 給div設置字體大小爲0的屬性。
c. 將行元素字體設置爲想要的字體大小。
解決方式3：浮動。 - 圖片對齊方式的問題。
解決方案：給圖片添加vertical-align屬性，默認值是baseline基線對齊，只需要給上其他值即可。 Vertical-align: top | middle | bottom；