css的盒子模型

網頁佈局的本質就是把網頁中的元素，例如文字。圖片等放在一個盒子裏，而後利用css來擺放盒子達成想要的效果，就是網頁佈局

css的三大模型

1.普通流

2.浮動

元素添加浮動之後，會自動轉換成行內塊元素

浮動的目的就是爲了讓多個塊元素顯示在同一行上

必需要消除浮動，由於若是不消除浮動，就會形成排版混亂

在父元素中加入overflower=hidden或者在浮動的盒子後面加一個標準流的空div讓這個div clear=both去消除浮動

 

3.定位

定位的屬性包括邊偏移和定位模式

 

postion有4個屬性 static， 默認定位，relative相對定位，absolute絕對定位，fixed固定定位

static默認定位，是默認的，是不能夠固定位置de

relative每次移動的時候都是以本身的左上角爲移動 ，是不脫標的 

absolute是脫標的 是不佔用位置的是依靠父盒子去定位的，若是不設置偏移的話，就是跟着父盒子走

只要追尋原則子絕父相就徹底沒問題了，吧父親的定位作成相對的定位，孩子的定位就會跟着父親走 

網頁佈局的流程

1.先肯定頁面的版心

2.分析頁面中的行模塊，以及每一行的列模塊

3.製做html結構

4.css初始化，而後利用盒子模型，div+css控制頁面的模塊