網頁布局的核心:就是用css來擺放盒子
css提供了三種機制來擺放和定位盒子，分別為普通流(標準流)，浮動和定位
常用塊級元素:div, hr, p, h1-h6, ul, ol, dl, form, table讓多個盒子在一行中顯示
浮動最早是用於做文字環繞效果的
float:none | left | right none為預設值
盒子新增浮動特性之後會改變該塊級元素的屬性，會轉化為乙個相當於行內塊元素的元素,但是相鄰盒子之間沒有空隙,當多個塊級元素新增浮動特性之後，會從左到右依次進行排列
專案小細節:因為浮動是脫標的,會影響下面的標準流,所以在實際開發過程中需要給浮動的元素新增乙個標準流的父級元素,在父級盒子中實現浮動,這樣就可以最大化的減小浮動元素對標準流元素的影響.
浮動的元素只會影響當前和後面的標準流盒子,對之前的標準流盒子沒有影響
當乙個父級盒子中有多個盒子時,如果其中乙個盒子浮動了,那麼其他盒子也應該要浮動,以免引起問題
浮動元素與父盒子的關係:首先,子盒子的浮動是參照父盒子來對齊的;再者,不會與父盒子的邊框重疊,也不會超過父盒子的內邊距
主要是為了解決父級元素因為子元素浮動引起的內部高度為0的問題,清除浮動之後,父級會根據浮動的子盒子的高度自動檢測高度,也就是所謂的子元素撐開父元素,這樣一來,父級元素有了高度之後就不會影響下面標準流的布局了
概念：通過在浮動元素的末尾新增乙個空的標籤,如,也可以是其他塊級元素,如br等
案例:
語法:overflow:hidden | auto | scroll 屬性值為這三個都能解決 當取值hidden時會隱藏溢位的部分,當取值auto時會生成垂直滾動條,當取值scroll時在水平和垂直方向都會生成滾動條.
缺點:內容增多的時候容易造成不會自動換行導致內容被隱藏,無法顯示需要溢位的元素
這是在實際開發中常用的清除浮動的方法
案例:.clearfix:after
/* 相容i6和i7 */
.clearfix
.clearfix::before,
.clearfix::after
.clearfix::after
/* 相容i6和i7 */
.clearfix
即方位名詞 : top bottom right left 後面跟精確單位值,表示距離相應邊的距離,比如top:50px則是代表距離上邊框50畫素的位置
選擇器 定位模式是有不同形式的,在不同情況用不同的定位模式相對於原來自己在標準流中的位置來移動的
移動之後繼續占有在標準流中的位置,後面的盒子任然以標準流的形式來對待該盒子
絕對定位是以帶有定位的父級元素來移動位置,入過父級元素沒有定位的話將會瀏覽器文件為基準來移動位置
帶有絕對定位的盒子不占有原來標準流中的位置,會影響同一父元素中的其他標準流盒子,是完全脫標的
在網頁布局中應用比較廣泛,基本原理就是子盒子使用絕對定位,父盒子採用相對定位,這樣一來子盒子不占有位置,可以再父盒子中隨意移動,因為子盒子採用絕對定位之後父盒子也需要採用定位,否則子盒子的定位將會以瀏覽器文件為基準偏移,但是父盒子又要保證不影響後面盒子的布局,所以要採用相對定位比較合適,因為相對定位即使在脫離原本位置之後,它在標準流中依然占有位置,不會造成後面盒子的上移.這就是子絕父相的基本原理.
它相當於是絕對定位的一種特殊形式,但是有些特點還是不相同的與絕對定位一樣絕對脫標,完全不佔位置
但是它的定位依據是瀏覽器的可視視窗,與父級盒子沒有任何關係,同時它不隨瀏覽器的滾動而滾動.
CSS 布局機制之浮動
網頁布局的核心就是使用css來擺放盒子css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 塊級元素會獨佔一行，從上向下順序排列 常用元素 div hr p h1 h6 ul ol dl form table 行內元素會按照順序，從左到右順序排列，碰到...
前端圭臬 五 CSS 核心機制 布局
最近幾周我一直在看 css 規範，下來感受就是，真 心亂如麻。也就是 css 是真的簡單，真的，你說你 js 巨佬，我膜拜，html 大師，我 respect，css 專家，呃，你是寫規範的嗎，出來咱倆比劃比劃，別怪我不講武德。對於 css 本身，真的可以做到戰略上藐視。只要你對它的知識體系有乙個邏...
CSS布局入門 css
css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位，通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...