【全面系統講解CSS】學習筆記-第四章 CSS布局

第四章 CSS布局

• 一、CSS布局過渡曆程
• 二、常用布局方法
• • 2.1、表格布局
  • • 2.1.1、使用table實作表格布局
    • 2.1.2、另一種實作表格布局
  • 2.2、布局屬性
  • 2.3、flexbox布局
  • 2.4、float布局
  • • 2.4.1、對自身的影響
    • 2.4.2、對兄弟的影響
    • 2.4.3、對父級元素的影響
    • 2.4.4、清除浮動影響
    • 2.4.5、使用float的兩欄布局
    • 2.4.6、使用float的三欄布局
  • 2.5、inline-block布局
  • 2.6、響應式設計和布局
  • • 2.6.1、案例一
    • 2.6.2、案例二
    • • 2.6.2.1、使用媒體查詢适配
      • 2.6.2.2、使用viewport适配（等比例變換效果）
      • 2.6.2.3、使用rem機關适配
      • 2.6.2.4、使用rem機關适配
  • 2.7、主流網站使用的布局方式
  • 2.8、CSS面試題

一、CSS布局過渡曆程

二、常用布局方法

2.1、表格布局

2.1.1、使用table實作表格布局

2.1.2、另一種實作表格布局

2.2、布局屬性

1. width，height的設定隻對内容區content生效，即藍色部分。
2. padding指的是内容區和border邊框之間的距離。
3. 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精确。

2.7、主流網站使用的布局方式

2.8、CSS面試題