web前端之CSS布局的重要性

如果你隻想把所有内容都塞進一欄裡，那麼不用設定任何布局也是OK的。然而，如果使用者把浏覽器視窗調整的很大，這時閱讀網頁會非常不适：讀完每一行之後，你的視覺焦點要從右到左移動一大段距離。

display屬性：

對于大多數元素他們的預設值通常是block或inline。一個block元素通常被叫做塊狀元素（一個塊級元素會新開始一行并且盡可能撐滿容器）。一個inline元素通常被稱為行内元素（一個行内元素可以在段落）

display:none 通常被 JavaScript 用來在不删除元素的情況下隐藏元素。把 display 設定成 none 不會保留元素本該顯示的空間，但是 visibility: hidden; 還會保留。

position屬性：

static 是預設值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設定為其他值的元素表示它會被“positioned”。

relative 相對定位，表現的和 static 一樣，除非你添加了一些額外的屬性。在一個相對定位（position屬性的值為relative）的元素上設定 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離後剩下的空隙。

fixed 一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。

absolute 絕對定位 absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，除了它不是相對于視窗而是相對于最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那麼它是相對于文檔的 body 元素，并且它會随着頁面滾動而移動。記住一個“positioned”元素是指p osition 值不是 static 的元素。

float屬性概念和用法十厘清晰，就不多做介紹。

clear 屬性被用于控制浮動

clear 屬性定義了元素的哪邊上不允許出現浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設定了 clear 屬性的元素）增加上外邊距實作的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

left 在左側不允許浮動元素。

right 在右側不允許浮動元素。

both 在左右兩側均不允許浮動元素。

none 預設值。允許浮動元素出現在兩側。

inherit 規定應該從父元素繼承 clear 屬性的值。

“響應式設計（Responsive Design）”是一種讓網站針對不同的浏覽器和裝置“響應”不同顯示效果的政策，這樣可以讓網站在任何情況下顯示的很棒！

@media screen and (min-width: px) {
    html {
        font-size: px;
    }
}
@media screen and (min-width: px) {
    html {
        font-size: px;
    }
}
           

或者

@media screen and (max-width: px) {
    html {
        font-size: px;
    }
}
@media screen and (max-width: px) {
    html {
        font-size: px;
    }
}
           

@media (min-width: 768px){ //>=768的裝置 }

@media (min-width: 992px){ //>=992的裝置 }

@media (min-width: 1200){ //>=1200的裝置 }

注意下順序，如果你把@media (min-width: 768px)寫在了下面那麼很悲劇，

@media (min-width: 1200){ //>=1200的裝置 }

@media (min-width: 992px){ //>=992的裝置 }

@media (min-width: 768px){ //>=768的裝置 }

因為如果是1440,由于1440>768那麼你的1200就會失效。

是以我們用min-width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的裝置 }

@media (max-width: 991px){ //<=991的裝置 }

@media (max-width: 767px){ //<=768的裝置 }