css有三種布局模式：
1、流動模式（flow)
2、浮動模式（float)
3、層模式（layer)
流動模式
網頁布局在預設情況下，都是流動模式布局。
1、在流動模式下，所有的塊狀元素寬度都為100%，即預設情況下，所有的塊狀元素都佔據一行
2、所有的內聯元素都從左到右水平分布顯示
那麼問題來了，如果我們想要塊狀元素可以併排顯示，應該使用那種布局模式呢？
浮動模式
預設情況下所有的元素都不能浮動，但是可以通過對float屬性進行設定達到浮動的效果
例如，設定div左浮動：div
那麼，如果不僅僅想要讓元素左對齊或右對齊，而是想要精確地定位每乙個元素，應該怎麼做呢？
層模式層模式可以精確定位每乙個元素，通過設定position屬性可以達到精確定位的目的
1、層模式的三種形式：
（1）絕對定位：position:absolute
（2）相對定位：position:relative
（3）固定定位：position:fixed
2、絕對定位 position:absolute
絕對定位是以離該元素最近的乙個具有定位屬性的父包含塊為基準進行定位，如果不存在這樣的塊，則以body為基準，即以瀏覽器視窗為基準
例如，實現p元素相對瀏覽器向下移動100px，向右移動300px
p{position:absolute;
top:100px;
left:300px;
3、相對定位 position:relative
相對定位首先按static(float)方式生成乙個元素，使得元素像層一樣浮動起來，然後相對於以前的位置移動，偏移前的的位置保留不動
例如，實現id為div1的元素相對以前位置向上移動80px，向左移動20px
#div1{
position:relative;
bottom:80px;
right:20px;
注意：①什麼叫做偏移前的位置保留不動？
②向上移動應該是距離底部移動，例如向上移動10px，應培該是bottom:10px，即相對底部移動了10px
同理，向左移動應該是相對右邊移動，例如向左移動78px，應該是right:78px
4、固定定位
固定定位相對於瀏覽器檢視或者稱作螢幕內網頁的固定點（類似於固定在螢幕上）而移動，不會隨著瀏覽器的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置或者改變瀏覽器視窗大小，因此固定定位不會受文件流動的影響
例如，實現類名為div2的元素相對於瀏覽器檢視向右移動28px，向下移動27px，並且拖動滾動條時位置不會發生改變
.div2{
position:fixed;
left:28px;
top:27px;
css布局學習筆記
對於大多數元素它們的預設值通常是 block 或 inline 乙個 block 元素通常被叫做塊級元素。乙個 inline 元素通常被叫做行內元素。當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。在這種情況下使用 max width 替代 width 可以使瀏覽器更好地處理...
《學習CSS布局》學習筆記
近幾天做了乙個小的企業展示 雖然頁面是在模板的基礎上改的，但改的多了不熟悉css也很麻煩。正好我看到了學習css布局這個 於是補習了一下css知識。css的元素分為兩類 塊級元素和行內元素。display屬性就是控制元素的表現形式，它的值包括inline block和none等。none通常用於在不...
CSS學習筆記（四）
b color darkred align center 背景 align color b color red background color color 背景為透明 transparent 背景顏色與字型color類似 例 color red background image url color...