一、CSS佈局過渡歷程

二、常用佈局方法

2.1、表格佈局

2.1.1、使用table實現表格佈局

2.1.2、另一種實現表格佈局

2.2、佈局屬性

width，height的設置只對內容區content生效，即藍色部分。
padding指的是內容區和border邊框之間的距離。
margin指的是元素和元素之間的距離。

注意點： inline元素是不可以指定寬高的，即指定了寬高也無效。
元素默認是按照static佈局的，可以理解爲靜態佈局，或者說是按文檔流佈局的。

relative的偏移是相對於元素本身的，偏移的時候不會影響本來的佔位。
fixed是指相對於可視區域的對齊的。
absolute是相對於最近的absolute或者relative來定位的。
通過z-index可以確定顯示的層級。定義爲relative，fixed，absolute的元素可以設置z-index。

2.3、flexbox佈局

如果要設置某一塊div的寬度爲固定px；可以直接寫width：30px；

2.4、float佈局

如下圖所示的，p1是一個左浮動的效果，看上去像是浮動在p2上面，但是p2上的文字是被擠到了右側開始的，這個屬性本來是被用來做圖文的混排的。

2.4.1、對自身的影響

下圖中，span元素爲inline元素，理論上是不可以設置寬高的，但是這裏卻可以設置寬高。是因爲float自動將inline元素格式化爲block元素。

2.4.2、對兄弟的影響

如果寬度增加，則右邊的這個float會被擠到下一行上去。

如果寬度調小後，又會擠到同一行。

2.4.3、對父級元素的影響

從下圖中可以看到，紅色塊的高度，和藍色塊的高度，分別用紅色框標識了。然後，綠色的float部分是脫離了紅色塊的。這個其實就是高度塌陷的表現。

可以給父級元素添加下面的這個overflow：屬性；讓父元素去關注內部元素的加載情況。

2.4.4、清除浮動影響

消除浮動的影響主要是用來消除背景圖的高度問題。如果不加overflow屬性，可以添加一個僞元素，通過僞元素來撐開背景圖。

2.4.5、使用float的兩欄佈局

主要使用到了左側的float：left；然後右側的，margin-left：200px；height：100%；

2.4.6、使用float的三欄佈局

如上圖所示，但是發現右側的藍色div並沒有和前面的對齊，而是掛在中間的div下面。浮動的元素會盡量向上靠，但是繞不過中間一些不是浮動的元素，既然這樣，可以將right部分的div往上移動一層。

2.5、inline-block佈局

從上圖中可以看到，設置了inline-block但是，還是上下顯示，明顯是寬度的問題。

調整後，顯示在同一行。但是出現了空隙。inline-block可以想象成一個文字，文字之間是有間隙的。

當給外部設置font-size：0；的時候就會消除間隙，但是會出現另一個問題，就是紅色和藍色塊中的文字沒有了。這就要求我們，需要給內部元素設置字體大小。

通過觀察，可以看到，這裏的這個間隙也是來源於div之間的間隙。（PS：這個是怎麼觀察出來的不清楚）

這樣處理了之後，同樣可以達到消除間隙的效果。或者通過下圖中的註釋的方式。

推薦還是使用字體的方式來處理這個間隙的問題。如果是定寬的問題，可以使用這個inline-block的方式來處理佈局。

2.6、響應式設計和佈局

2.6.1、案例一

如下圖，如果要適配不同分辨率首先要加的是這個viewport。
再是在下面加了一個@media媒體查詢。並在這裏設置了，如果寬度小於640px的情況下。則影藏左側部分的內容。

2.6.2、案例二

2.6.2.1、使用媒體查詢適配

效果圖，如下圖展示

切換到移動端的時候，顯示得不是很好。

添加媒體查詢，來做適配。設置居中，並且設置了display：block；使得元素垂直排布。

2.6.2.2、使用viewport適配（等比例變換效果）

動態計算width的值的方式。

2.6.2.3、使用rem單位適配

html元素默認有一個font-size屬性，默認爲16px；爲了方便計算，我們可以設置這個font-size的值爲20px（或者10px都行）；設置之後，1rem=20px。

2.6.2.4、使用rem單位適配

從上圖中可以看到，我們在使用了rem之後但是還是出現了另一個問題，就是在不同的顯示屏大小下，邊框變寬了，要解決這個問題，就需要我們隨着屏幕尺寸大小去更新html的font-size的大小。

在原來的css樣式中增加如上圖的的媒體查詢。這裏需要注意的是需要把大的統配媒體查詢寫在上面，範圍小的放下面。
這裏還有一個問題是rem由於是經過計算的，所以精確性上沒有px精確。