近幾天做了乙個小的企業展示**。雖然頁面是在模板的基礎上改的，但改的多了不熟悉css也很麻煩。正好我看到了學習css布局這個**，於是補習了一下css知識。
css的元素分為兩類：塊級元素和行內元素。
display屬性就是控制元素的表現形式，它的值包括inline、block和none等。
none通常用於在不刪除元素的情況下隱藏元素，但使用none不會保留元素本該顯示的空間。
inline-block用於將塊級元素顯示在行內。
控制元素顯示的屬性還有外邊距、內邊距、邊框、上下左右的邊等。於是就講到了元素的盒模型。
上面的這些屬性使得元素的顯示就像乙個盒子一樣。
但是我們指定了它的長和寬卻並不一定是它最終展示出來的樣子。因為元素的邊框和內邊距會撐開元素。
通常的做法是在設定長和寬是提前減去內邊距和邊框的寬度。另一種做法是使用box-sizing這個屬性,此時內邊距和邊框不再會增加元素的寬度。
.box-sizingposition這個元素有以下幾個屬性：
使用上面的position屬性已經可以設計出複雜的布局了。但是對於併排顯示或者環繞的效果，實現起來還是不夠簡潔。
使用浮動float可以比較簡便的實現以上布局。
使用了浮動屬性的元素會脫離標準流（標準流就是塊級元素獨佔一行，從上往下依次排布），但其他的元素仍處於標準流中，這時可能浮動的元素覆蓋了其他一些元素。
解決方法是使用清除浮動clear。注意clear作用的物件是自身而不是其它浮動的元素。
如，clear: left表示，不允許左邊有浮動元素，所以此元素就會下移，避免被浮動元素遮擋。
浮動的元素還可能出現的問題是溢位。我們可以使用overflow:auto使得父元素自動調整大小。
overflow包括以下的值：
有了float可以更方便的實現併排顯示多個塊級元素，不過還有更方便的一種方法。
前面提到的display中的inline-block可以將塊級元素顯示在行內。不過，你需要指定每一列的寬度。如：
.box@media screen and (min-width:600px)
section
}@media screen and (max-width:599px)
}
css布局學習筆記
對於大多數元素它們的預設值通常是 block 或 inline 乙個 block 元素通常被叫做塊級元素。乙個 inline 元素通常被叫做行內元素。當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。在這種情況下使用 max width 替代 width 可以使瀏覽器更好地處理...
CSS學習筆記（四） CSS布局
css有三種布局模式 1 流動模式 flow 2 浮動模式 float 3 層模式 layer 流動模式 網頁布局在預設情況下，都是流動模式布局。1 在流動模式下，所有的塊狀元素寬度都為100 即預設情況下，所有的塊狀元素都佔據一行 2 所有的內聯元素都從左到右水平分布顯示 那麼問題來了，如果我們想...
CSS布局學習
css 規定的定位機制有三種 標準文件流 normal flow 浮動 floats 絕對定位 absolute positioning 標準文件流 normal flow 特點 1.從上倒下，從左到右，輸出文件內容 2.有會計元素和航跡元素組成。塊級元素 特點 1.從左到右撐滿頁面，獨佔一行 2....