2399 元至 3999 元，榮耀 50/50 Pro/ 50 SE 正式釋出：搭載驍龍 778G / 天璣 900，獨特雙鏡設計
前言
頁面佈局要學習三大核心， 盒子模型， 浮動 和 定位。 學習好盒子模型能非常好的幫助我們佈局頁面。
看透網頁佈局的本質
網頁佈局過程：
-
先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。
-
利用 CSS 設定好盒子樣式，然後擺放到相應位置。
-
往盒子裡面裝內容
網頁佈局的核心本質： 就是利用 CSS 擺盒子。
盒子模型
所謂盒子模型：就是把 HTML 頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
CSS 盒子模型本質就是封裝周圍的 HTML 元素，它包括：邊框、外邊距、內邊距、和 實際內容
邊框（border）
border可以設定元素的邊框。邊框有三部分組成：
- 邊框寬度(粗細)
border-width- 比如2px 或 0.1em
- 邊框樣式
border-stylenone: 預設無邊框dotted: 定義一個點線邊框dashed: 定義一個虛線邊框solid: 定義實線邊框
- 邊框顏色
border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。
border-collapse:collapse;/*表示相鄰邊框合併在一起*/
邊框簡寫：
border: 1px solid red; /*沒有順序*/
邊框分開寫法：
border-top: 1px solid red; /* 只設定上邊框， 其餘同理 */
邊框會影響盒子實際大小
邊框會額外增加盒子的實際大小。因此我們有兩種方案解決:
-
測量盒子大小的時候，不量邊框.
-
如果測量的時候包含了邊框，則需要 width/height 減去邊框寬度
<head> <style> .box1 { border: 10px solid blue; width: 200px; height: 200px; ; } </style> </head> <body> <div class="box1"> </div> </body>
此例中邊框內容大小為200*200，但盒子實際大小為220*220
內邊距
元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
屬性
| 屬性 | 描述 |
|---|---|
| padding | 簡寫屬性。作用是在一個宣告中設定元素的所內邊距屬性。 |
| padding-bottom | 設定元素的下內邊距。 |
| padding-left | 設定元素的左內邊距。 |
| padding-right | 設定元素的右內邊距。 |
| padding-top | 設定元素的上內邊距。 |
簡寫
當我們給盒子指定 padding 值之後，發生了 2 件事情：
-
內容和邊框有了距離，添加了內邊距。
-
padding影響了盒子實際大小。也就是說，如果盒子已經有了寬度和高度，此時再指定內邊框會撐大盒子
如果想要盒子大小不變有兩個解決方案
解決方案一
如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。padding影響盒子大小也有好處
padding影響盒子大小的好處
padding內邊距可以撐開盒子，我們可以做巧妙的運用.
因為每個導航欄裡面的字數不一樣多，我們可以不用給每個盒子寬度了，直接給padding最合適.
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a屬於行內元素 此時必須要轉換 行內塊元素 */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
解決方案二
盒子本身沒有指定width/height屬性，盒子的大小繼承自父元素，此時padding不會撐開盒子
外邊距
圍繞在元素邊框的空白區域是外邊距。簡單的說，就是控制盒子和盒子之間的距離。
設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性。在一個宣告中設定所有外邊距屬性。 |
| margin-bottom | 設定元素的下外邊距。 |
| margin-left | 設定元素的左外邊距。 |
| margin-right | 設定元素的右外邊距。 |
| margin-top | 設定元素的上外邊距。 |
外邊距典型應用
外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
① 盒子必須指定了寬度（width）。
② 盒子左右的外邊距都設定為 auto 。
.header{ width:960px; margin:0 auto;}
常見的寫法，以下三種都可以：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中則需要給其父元素新增
text-align:center
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
使用 margin 定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
主要有兩種情況:
1. 相鄰塊元素垂直外邊距的合併
2. 巢狀塊元素垂直外邊距的塌陷
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
解決方案
① 可以為父元素定義邊框或內邊距阻隔外邊距的合併。
②可以為父元素新增浮動 overflow:hidden。
清楚內外邊距
網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致。因此我們在佈局前，首先要清除下網
頁元素的內外邊距。
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意：行內元素為了照顧相容性，只設置左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內
塊元素就可以了