頁面布局

1 頁面組成

2 布局相關的標簽

• <div></div> 定義文檔中的分區或節
• <span></span> 這是一個行內元素，沒有任何意義
• <header></header> HTML5新增 定義 section 或 page 的頁眉
• <footer></footer> HTML5新增 定義 section 或 page 的頁腳
• <main></main> HTML5新增 標簽規定文檔的主要內容。<main> 元素中的內容對於文檔來說應當是唯一的。它不應包含在 文檔中重復出現的內容，比如側欄、導航欄、版權信息、站點標誌或搜索表單。IE都不識別
• <nav></nav> HTML5新增 表示鏈接導航部分 如果文檔中有“前後”按鈕，則應該把它放到元素中
• <section></section> HTML5新增 定義文檔中的節 通常不推薦那些沒有標題的內容使用section
• <article></article> HTML5新增 定義文章 論壇帖子 報紙文章 博客條目 用戶評論
• <aside></aside> HTML5新增 相關內容，相關輔助信息，如側邊欄

3 盒子模型

3.1 什麽是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

• Margin(外邊距) 清除邊框外的區域，外邊距是透明的。

• Border(邊框) 圍繞在內邊距和內容外的邊框。

• Padding(內邊距) 清除內容周圍的區域，內邊距是透明的。

• Content(內容) 盒子的內容，顯示文本和圖像。

3.2 塊級元素和內聯元素(行內元素)

塊級元素

• 總是在新行上開始，占據一整行；
• 高度，行高以及外邊距和內邊距都可控制；
• 寬度缺省是它的容器的100%，除非設定一個寬度
• 它可以容納內聯元素和其他塊元素。

內聯元素

• 和其他元素都在一行上；
• 高，行高及外邊距和內邊距部分可改變；
• 寬度只與內容有關；
• 行內元素只能容納文本或者其他行內元素。
• 外邊界只能對左右起作用，內邊距都起作用

塊級元素和內聯元素的轉換

display: block | inline | inline-block

3.2 盒子模型之間的關系

document樹

父元素 子元素 後代元素 祖先元素 兄弟元素

標準文檔流

1. 行內元素不占據單獨的空間，依附於塊級元素，行內元素沒有自己的區域。它同樣是DOM樹中的一個節點，在這一點上行內元素和塊級元素是沒有區別的。

2. 塊級元素總是以塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。

盒子在標準流中的定位原則

• 行內元素之間的水平margin
• 塊級元素之間的豎直margin (margin的塌陷)
• 嵌套盒子之間的margin, (子元素父元素margin合並)
• 將margin設置為負值

3.3 盒子模型相關CSS屬性

布局屬性

• display

  
  | 值           | 描述                                                 |
  | ------------ | ---------------------------------------------------- |
  | none         | 此元素不會被顯示。                                   |
  | block        | 此元素將顯示為塊級元素，此元素前後會帶有換行符。     |
  | inline       | 默認。此元素會被顯示為內聯元素，元素前後沒有換行符。 |
  | inline-block | 行內塊元素。（CSS2.1 新增的值）                      |
  

• float

  | 值      | 描述                                                 |
  | ------- | ---------------------------------------------------- |
  | left    | 元素向左浮動。                                       |
  | right   | 元素向右浮動。                                       |
  | none    | 默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
  | inherit | 規定應該從父元素繼承 float 屬性的值。                |
  

• clear

  
  | 值      | 描述                                  |
  | ------- | ------------------------------------- |
  | left    | 在左側不允許浮動元素。                |
  | right   | 在右側不允許浮動元素。                |
  | both    | 在左右兩側均不允許浮動元素。          |
  | none    | 默認值。允許浮動元素出現在兩側。      |
  | inherit | 規定應該從父元素繼承 clear 屬性的值。 |
  

• visibility

  
  | 值       | 描述                                                         |
  | -------- | ------------------------------------------------------------ |
  | visible  | 默認值。元素是可見的。                                       |
  | hidden   | 元素是不可見的。                                             |
  | collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。 |
  | inherit  | 規定應該從父元素繼承 visibility 屬性的值。                   |
  

• overflow

  
  | 值      | 描述                                                     |
  | ------- | -------------------------------------------------------- |
  | visible | 默認值。內容不會被修剪，會呈現在元素框之外。             |
  | hidden  | 內容會被修剪，並且其余內容是不可見的。                   |
  | scroll  | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
  | auto    | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
  | inherit | 規定應該從父元素繼承 overflow 屬性的值。                 |
  

• overflow-x

• overflow-y

尺寸

• width / max-width / min-width
• height / max-height / min-height

內補白

• padding / padding-left / padding-right / padding-top / padding-bottom

外邊距

• margin
• margin-left
• margin-right
• margin-top
• margin-bottom

4 浮動

4.1 什麽是浮動

• CSS的Float(浮動)，元素可以圍繞其他元素向左或向右被推動
• 設置浮動，脫離普通文檔流
• 浮動元素都會變為塊級元素
• 如果不設置寬度，會盡可能的窄
• 浮動元素之後的元素將圍繞它 浮動元素之前的元素將不會受到影響。

4.2 設置浮動

.item {
    float:left
}
.item {
    float:right
}
/*float 屬性的默認值是 none  表示沒有浮動*/

4.3 清除浮動

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創建浮動框可以使文本圍繞圖像：

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

clear: both
clear: left
clear: right

4.4 浮動實驗

實現以下實現

1. 設置第一浮動的div

2. 設置第2個浮動div

3. 設置第3個浮動div

4. 改變第三個浮動方向

5. 改變第二個浮動方向

6. 全部向左浮動,增加第一個的高度

7. 使用clear屬性清楚浮動的影響

8. 擴展盒子的高度 (元素高度和浮動的元素)

9. 段落首字母浮動

10. 圖片浮動

11. 簡單浮動布局

    

4.5 浮動相關CSS屬性總結

• float 值: none(默認) /left /right
• clear 值: none(默認) /both /left /right

4.6 浮動布局小案例

5 定位

5.1 相對定位

• 使用相對定位的盒子,會相對於它原來的位置,通過偏移指定的距離,到達新的位置
• 使用相對定位的盒子,仍在標準流中,它對父塊好兄弟盒子沒有任何影響

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

5.2 絕對定位

• 使用絕對定位的盒子以它"最近"的一個"已經定位"的"祖先元素"為基準進行偏移. 如果沒有已經定位的"祖先元素", 那麽會以瀏覽器窗口為基準進行定位
• 絕對定位的框從標準流中脫離,這意味著它們對其後的兄弟盒子的定位沒有影響,其他的盒子就好像這個盒子不存在一樣

.box {
    position: absolute;
    top: 10px;
    left: 20px
}

5.3 固定定位

以瀏覽器窗口為基準 窗口滾動時,依然保持位置不變

.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

5.4 空間位置

• 使用css屬性 z-index設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
• z-index 僅能在定位元素上奏效

5.5 定位相關CSS屬性總結

• position static(默認值) /relative /position /fixed
• top
• left
• right
• bottom
• z-index auto(默認值)/數字

6 瀏覽器兼容性

6.1 瀏覽器分類

主流瀏覽器(原生瀏覽器)

擁有獨立內核的瀏覽器 被稱為主流瀏覽器

• chrome 內核 blink 早期的chrome使用apple的開源內核 webkit. 我們依然習慣上稱呼chrome的內核為webkit
• safari 內核 webkit
• IE 內核 Trident
• Firfox 內核 Gecko
• Opera v12.17以前采用 Presto 內核。後來緊跟chrome的步伐，使用chrome的內核 成為了殼瀏覽器

殼瀏覽器

在某瀏覽器內核之上增加相應的輔助功能，並改變其名稱與外觀的瀏覽器

opera、360安全、360極速、UC、搜狗、獵豹、QQ瀏覽器、2345瀏覽器、淘寶瀏覽器 等

6.2 瀏覽器對HTML5和CSS3的兼容性情況

• HTML5需要 IE9以及以上版本的IE瀏覽器支持
• CSS3不同的模塊對瀏覽器的兼容程度各不相同。 對於IE瀏覽器，肯定需要IE9以及以上的瀏覽器支持
• chrome、firefox瀏覽器一般都會自動更新，所以兼容性特別棒！
• 手機瀏覽器，大多使用webkit內核，兼容性較好。關鍵是 手機上沒有IE！
• 目前的國產瀏覽器，多采用雙內核，使用chrome內核的時候兼容性較好

6.3 兼容技巧

設置IE使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

讓雙核瀏覽器默認使用webkit內核

<meta name="renderer" content="webkit">

讓IE8識別HTML5新增標簽

<!--[if lt IE 9]>
    <script src="/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

css頁面布局