web頁面布局分為
流體布局liquid layouts:無論瀏覽器調整到多大寬度,布局都會擴充套件,填滿整個瀏覽器。
凍結布局fozen layouts:凍結布局會鎖定元素使之讓它們凍結在頁面上,以此可避免視窗擴充套件帶來的許多問題
------------------------------------------慕課----------------------------------------
在網頁中，元素有三種布局模型：
1、流動模型（flow）
2、浮動模型 (float)
3、層模型（layer）
flow流
塊元素的位置:從上向下流，元素之間自動換行
內聯元素的位置:水平方向上排列,總體上會從左上方流向右下方
間距的計算
當瀏覽器並排放兩個內聯元素，並且這些元素都有外邊距，瀏覽器會在元素間創造足夠的空間.
比如左側元素外邊距為10px,右側為20,兩個元素間會有30px空間.
當瀏覽器上下放置兩個塊元素,它會把它們共同的外邊距摺疊在一起.
比如上方元素的下外邊距為20px,下方元素的上外邊距10px,兩個元素間會有20px空間.
float
所有浮動元素都有乙個要求：必須先設定寬度！
#amazing
float的影響:
將使塊元素從正常流中脫離出來,它的原來位置會被取代.而其他塊元素中的內聯元素會自動圍繞著這個浮動元素。
在浮動元素後加個div設定clear: both; height:0,overflow:hidden
使用clearfix;
設定父元素浮動;
書上三種布局方式
浮動布局(固定主欄,浮動邊欄)
調整html順序:浮動物件的html要放前排,這樣其他元素會圍繞它
為主欄設定padding,margin,再為邊欄設定padding,margin.width,float.(浮動物件的鄰居靠近浮動物件一側的margin=浮動物件總寬度.)
浮動布局(固定邊欄,浮動主欄(不推薦))
原理同上
凝膠布局
實現頁面居中,兩側留白
: 大盒子(包含標題,主欄,邊欄,頁尾)設定width,兩側margin自動)
絕對布局
(注意clear屬性對絕對布局無效)
**顯示布局
(不一定是最佳選擇)
浮動與絕對定位的異同:
同:都從流中被刪除,都需要設定width 異:
布置頁面時設定邊欄還是主內容？
通常情況下我們會讓邊欄浮動
，而不選擇去設定主內容區寬度,然後讓它浮動.
原因是這樣的：
浮動內容是不會因瀏覽器視窗拉大放小改變的，
如果主內容寬度不變,而邊欄卻隨著視窗大小改變,頁面看起來就會很糟糕.
如果對主內容,邊欄都設定寬度,頁面太大兩者距離會加寬，頁面太小會擰到一起.
clear
使用該技能，元素周圍不允許有浮動內容(這樣就不會被蓋住了:))
#footer
CSS 浮動布局與定位布局
布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...
CSS布局與定位（2）
left right父級元素新增clearfix content left middle right塊級元素，設定固定寬度，左右margin等於auto box對塊級的父級使用，能讓內部的匿名行盒 文字 行內元素 span inline block元素在父親裡水平居中 container1 flex...
CSS定位布局
絕對定位 如果想為元素設定層模型中的絕對定位，需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來，然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即...