20.HTML盒模型的布局影響

Web開發中，理解和掌握HTML5盒模型是至關重要的。盒模型不僅是CSS布局的基礎，而且它直接影響著頁面元素如何在瀏覽器中呈現。本文旨在深入探討盒模型的各個組成部分以及它們如何影響網頁布局。

盒模型基礎

盒模型是CSS布局的核心概念，它決定了文檔中的元素如何定位，以及它們之間的空間關系。一個元素的盒模型由以下幾部分構成：

內容（Content）：元素的文本和圖像等實際內容。
內邊距（Padding）：內容區域與邊框之間的空間。
邊框（Border）：圍繞在內邊距和內容外的可見線。
外邊距（Margin）：元素與其他元素之間的外部空間。

每個部分都對元素的最終尺寸和頁面布局有著直接影響。

盒模型的類型

標準盒模型

在標準盒模型中，元素的width和height屬性僅包括內容區域。內邊距和邊框的寬度是額外計算的。

box-sizing: content-box;

IE盒模型（怪異模式）

在IE盒模型中，元素的width和height包括內容、內邊距和邊框。

box-sizing: border-box;

現代瀏覽器支持box-sizing屬性，允許開發者選擇使用哪種盒模型。

布局影響

邊距合并

當兩個垂直外邊距相遇時，它們會合并成一個外邊距，這通常稱為邊距合并（margin collapsing）。這個現象會影響布局，特別是在構建垂直間距時。

盒模型和響應式設計

在響應式設計中，盒模型的理解尤為重要。使用border-box可以簡化計算，因為元素的寬度包含了內邊距和邊框，這使得元素的尺寸更容易控制。

浮動和清除

浮動元素會影響盒模型，因為它們脫離了正常的文檔流。清除浮動則是為了防止相鄰元素的盒子相互覆蓋。

定位

絕對定位和相對定位的元素有著不同的盒模型表現。絕對定位元素的外邊距不會與其他外邊距合并，而相對定位元素可能會影響其周圍元素的布局。

盒子尺寸計算

當涉及到內邊距和邊框時，計算元素的實際尺寸可能會變得復雜。理解盒模型有助于精確計算和預測元素的實際占位。

最佳實踐

為了更好地控制布局，以下是一些推薦的最佳實踐：

默認情況下使用box-sizing: border-box;，這樣可以讓元素尺寸的計算更直觀。
明確設置所有元素的外邊距和內邊距，避免不必要的繼承和不確定性。
在進行布局設計時，始終考慮到邊距合并的可能性。
使用開發者工具來檢查和調試盒模型的尺寸，確保布局按預期進行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Layout Example</title>
<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

  .header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }

  .sidebar {
    background-color: #f9f9f9;
    padding: 20px;
    border-right: 2px solid #ddd;
    float: left;
    width: 20%;
    height: calc(100vh - 40px); /* Full height minus header and footer */
  }

  .main-content {
    padding: 20px;
    float: left;
    width: 80%;
  }

  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    clear: both;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px 0;
    border: 3px solid #0056b3;
  }
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
</div>

<div class="sidebar">
  <h2>Sidebar</h2>
  <p>This is the sidebar area.</p>
</div>

<div class="main-content">
  <h2>Main Content</h2>
  <p>This is the main content area.</p>
  <div class="box">Box Model Example</div>
</div>

<div class="footer">
  <p>Footer Content</p>
</div>

</body>
</html>

結語

盒模型是網頁布局的基石，它決定了元素如何在頁面上占據空間。作為一名前端工程師，深入理解盒模型的工作原理對于創建精確和靈活的布局至關重要。隨著技術的發展，雖然我們有了更多的布局工具和框架，但盒模型仍然是所有布局決策的基礎。掌握它，你將能夠更加自信和高效地設計和構建現代Web頁面。

異盒模型

box-sizing

content-box
這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。

border-box
為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

FLEX布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex項目：采用 Flex 布局的元素的父元素的子元素；
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

flex容器屬性

1、display:flex、inline-flex

注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

2、flex-direction屬性決定主軸的方向（即項目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

3、flex-wrap屬性，定義子元素是否換行顯示

flex-wrap: nowrap | wrap | wrap-reverse;

4、 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap;

5、 justify-content屬性定義了項目在主軸（）上的對齊方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

6、align-items屬性定義項目在交叉軸上如何對齊。

align-items: flex-start | flex-end | center | baseline | stretch（默認值）;

7、align-content屬性定義了多根軸線的對齊方式。對于單行子元素，該屬性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在側軸上執行樣式的時候，會把默認的間距給合并。對于單行子元素，該屬性不起作用

flex項目屬性

1、align-self屬性

Internet Explorer 和 Safari 瀏覽器不支持 align-self 屬性
說明：
align-self 屬性規定靈活容器內被選中項目的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
屬性值
auto 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 Stretch 元素被拉伸以適應容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的開頭。
flex-end 元素位于容器的結尾。

2、order

說明：
number排序優先級，數字越大越往后排，默認為0，支持負數。

3、flex

說明：
復合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間
詳細屬性值：
縮寫「flex: 1」, 則其計算值為「1 1 0%」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值

4、flex-xxx

flex-grow
一個數字，規定項目將相對于其他靈活的項目進行擴展的量。
flex-shrink 一個數字，規定項目將相對于其他靈活的項目進行收縮的量。
flex-basis
項目的長度

flex布局案例

本文轉自知乎號：千鋒HTML5學院

者：明明如月

審校：藍色漂流瓶

本文講的是啥？

本文為你提供一篇HTML5基本布局模板示例。你可以直接拷貝，粘貼到你的HTML文件中并對其進行修改。

好，說實話，這個本是為我自己準備的html5布局模板，但是你可以拿來用。

譯者注：由于無法直接粘貼代碼，需要的親直接進入尾部提供的鏈接，拷貝下來即可。

雖然本文比較簡單（噴子止步），但是還是一個不錯的模板，可以存起來，或者參考一下人家的結構。

基本的HTML5 模板布局模板：

代碼如下：

圖片格式

帶頭部、尾部和導航的基本的HTML5布局模板