一、標準流
標準流實際上就是一個網頁內標簽元素正常排列的順序的意思;比如塊級元素會獨占一行,行內元素會按順序依次從左向右,從上向下排列;按照這種大前提的布局排列之下絕對不會出現列外的情況叫做標準流布局,也稱做流式布局。
二、元素的浮動屬性float
1、定義:元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制,移動到其父元素中指定位置的過程。
2、定義浮動:選擇器{float:屬性值;}
屬性值:left,向左浮動;right:向右浮動;none:沒有浮動(默認值)
3、浮動的特性
1).浮動脫離標準流,不占位置,但會影響標準流。浮動只有左右浮動。
2).浮動的元素A排列位置,跟上一個元素(塊級)有關系。如果上一個元素有浮動,則A元素頂部會和上一個元素的頂部對齊;如果上一個元素是標準流,則A元素的頂部會和上一個元素的底部對齊。
3).一個父盒子里面的子盒子,如果其中一個子級有浮動的,則其他子級都需要浮動。這樣才能一行對齊顯示。
4).浮動根據元素書寫的位置來顯示相應的浮動。
5) .元素添加浮動后,如果沒有設置寬高的話,元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少。也就是具有了包裹性。
6).浮動具有破壞性,元素浮動后,破壞來原來的正常流布局,造成內容塌陷。
三、父容器高度塌陷
1、如果一個標準流中的盒子所有的子元素都進行了浮動,而且盒子沒有設置高度,那么父容器整個高度會塌陷。
2、overflow屬性應用
選擇器{overflow:屬性值;}
?屬性值:
visible :內容不會被修剪,會呈現在元素框之外(默認值)
hidden:溢出內容會被修剪,并且被修剪的內容是不可見的
auto:在需要時產生滾動條,即自適應所要顯示的內容
scroll:溢出內容會被修剪,且瀏覽器會始終顯示滾動條
四、應用布局和版心
“版心”是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示,常見的寬度值為960px、980px、1000px等。
布局流程:
1、確定頁面的版心(可視區)
2、分析頁面中的行模塊以及每個行模塊中的列模塊;
3、運用盒子模型的原理,通過DIV+CSS布局來控制網頁的各個模塊