前端學習(20)~css布局(十三)

2020 年 3 月 18 日
筆記

常見的布局屬性

（1）display 確定元素的顯示類型：

block：塊級元素。
inline：行內元素。
inline-block：對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設置寬高）。

（2）positon 確定元素的位置：

static：默認屬性值。
relative：相對定位。相對於元素本身進行偏移，不會改變它所佔據的空間。
absolute：絕對定位。相對於父元素中最近的 relative/absolute 進行偏移，會脫離文檔流。
fixed：固定定位。相對於可視區域固定，會脫離文檔流。

relative、absolute、fixed這三個屬性，可以結合 z-index 來設置層級。

常見的布局方法

1、table 表格布局：早期使用的布局，如今用得很少。

2、float 浮動 + margin：為了兼容低版本的IE瀏覽器，很多網站（比如騰訊新聞、網易新聞、淘寶等）都會採用 float 布局。

3、inline-block 布局：對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設置寬高）。

4、flex 布局：為布局而生，非常靈活，是最為推薦的布局寫法。

flex 布局不支援 IE9 及以下的版本。如果你的頁面不需要處理 IE瀏覽器的兼容性問題，則可以放心大膽地使用 flex 布局。

flex 是一種現代的布局方式，是 W3C 第一次提供真正用於布局的 CSS 規範。

5、響應式布局。

float 布局

是 CSS 中一種比較麻煩的屬性，涉及到 BFC 和清除浮動（面試的重點）。

float 屬性的特點

元素浮動
脫離文檔流，但不脫離文本流

程式碼舉例：

下面這兩個並列的div1和div2，默認是在標準流中的：

在此基礎之上，如果給div1增加float: left屬性後，效果如下：

上圖中，可以看到，div1設置為浮動後，會脫離文檔流，不會對div2的布局造成影響；但是div1不會脫離文本流，它會影響div2中文字的排列。

其實，這正是 float 屬性的作用。float 本身是用來做圖文混排、文字環繞的效果。

float 所帶來的影響

1、對自身的影響：

形成「塊」（BFC）
位置盡量靠上
位置盡量靠左/右

下面這兩個並列的div1和div2，設置為浮動之後的效果：（都是盡量靠左顯示的）

在上方程式碼的基礎之上，增加 div2的寬度之後，會發現，div2掉下來了：

2、對兄弟元素的影響：

不影響其他塊級元素的位置
影響其他塊級元素的內部文本

3、對父級元素的影響：

從父級的布局中「消失」
造成父級元素的高度塌陷：父級元素撐開 div1 之後（父級元素里沒有其他元素的情況下），如果設置 div1 為 float 之後，，會讓父級元素的高度變為0。

inline-block 布局

對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設置寬高）。

思路：像文本一樣去排列 block 元素，沒有清除浮動等問題。

存在的問題：需要處理間隙。程式碼舉例如下：

<!DOCTYPE html>  <html lang="en">    <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Document</title>  </head>  <style>      .container{          width: 300px;          height: 300px;          background: pink;      }        .div1{          width: 100px;          height: 100px;          background: green;          display: inline-block;      }        .div2{          width: 100px;          height: 100px;          background: yellowgreen;          display: inline-block;      }        .div3{          background: yellow;      }  </style>    <body>      <div class="container">          <div class="div1">div1的inline-block 屬性</div>          <div class="div2">div2的inline-block 屬性</div>          <div class="div3">              琴棋書畫不會，洗衣做飯嫌累。          </div>      </div>  </body>    </html>

上面的程式碼，存在兩個問題。

問題一：如果設置div2的寬度為 200px 之後，div2 掉下來。

問題二：div1和div2設置為 inline-block之後，這兩個盒子之間存在了間隙。這是因為，此時的 div1和div2 已經被當成文本了。文本和文本之間，本身就會存在間隙。

為了去掉這個間隙，可以有幾種解決辦法：

辦法1：設置父元素container的字體大小為0，即font-size: 0，然後設置子元素 div1、div2的字體font-size: 12px。

辦法2：在寫法上，去掉div1和div2之間的換行。改為：

<div class="div1">div1的inline-block 屬性</div><div class="div2">div2的inline-block 屬性</div>