在寫頁面布局的過程中,浮動是大家經常用的屬性。在好多的排版布局中都是用的的浮動比如說下面這些地方都是應用到了浮動。 在我學習浮動的時候可是熬壞了腦筋,在這里我分享一下我對浮動這塊知識的總結。 一、浮動的定義 使元素脫離文檔流,按照指定的方向(左或右發生移動),直到 ...
轉 首先要知道,div是塊級元素,在頁面中獨占一行,自上而下排列,也就是傳說中的流。如下圖: 可以看出,即使div 的寬度很小,頁面中一行可以容下div 和div ,div 也不會排在div 后邊,因為div元素是獨占一行的。 注意,以上這些理論,是指標准流中的div。無論多么復雜的布局,其基本出發點均是: 如何在一行顯示多個div元素 。 顯然標准流已經無法滿足需求,這就要用到浮動。浮動可以理 ...
2013-03-27 15:44 20 29822 推薦指數:
在寫頁面布局的過程中,浮動是大家經常用的屬性。在好多的排版布局中都是用的的浮動比如說下面這些地方都是應用到了浮動。 在我學習浮動的時候可是熬壞了腦筋,在這里我分享一下我對浮動這塊知識的總結。 一、浮動的定義 使元素脫離文檔流,按照指定的方向(左或右發生移動),直到 ...
文檔流 css中的塊級元素在頁面中是獨占一行的,自上而下排列,也就是我們所說的流,通常我們稱之為文檔流或標准流。 浮動 使元素脫離文檔流,按照指定的方向(左或右發生移動),直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。起初,W3C規定出來的浮動實際並不是為了布局 ...
1.浮動float div配合float浮動來做頁面的布局,浮動最常用的地方就是用來做布局。只有一個標簽設置了浮動float屬性,就會變成塊級標簽。 2.清除浮動clear屬性 (1)利用偽元素具有clear清除浮動的屬性來解決父標簽塌陷 ...
1、標准流(普通流/文檔流) 標准流就是標簽按照規定好的默認方式排列 (1)塊級元素會獨占一行,按照從上到下的方式排列 (2)行內元素會按照順序,從左到右的順序進行排列,遇到父元素則自動換行 (3)縱向排列標准流,橫向排列用浮動 2、浮動的簡單應用 (1)讓多個塊級元素水平排列 ...
浮動 普通流(normal flow) 這個單詞很多人翻譯為 文檔流 , 字面翻譯 普通流 或者標准流都可以。 前面我們說過,網頁布局的核心,就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置? CSS的定位機制有3種:普通流(標准流)、浮動和定位。 html語言當中另外一個相當 ...
在了解CSS中的浮動和定位之前有必要先了解清楚標准流和脫離標准流的特性 標准流的默認特性 1、分行、塊級元素,並且能夠dispay轉換。 2、塊級元素(block):默認獨占一行,不能並列顯示,能夠設置寬、高,寬度為父盒子的100%。例如:div、p、標題元素(h1-h6)、列表元素 ...
CSS(6)---通俗講解浮動(float) CSS有三模塊:盒子模型、浮動 、定位。上篇博客有講到 盒子模型地址:CSS(5)---通俗講解盒子模型 一、理解浮動 1、概念 概念 浮動可以理解為讓某個div元素脫離標准流,漂浮在標准流之上,和標准流不是一個層次。 如果是 ...
通俗講解清除浮動 上一篇講了CSS浮動 博客地址:CSS(6)---通俗講解浮動(float) 一、理解清除浮動 1、為什么要清除浮動 我們前面說過,浮動本質是用來做一些文字混排效果的,但是被我們拿來做布局用,則會有很多的問題出現。 由於浮動元素不再占用原文檔流的位置 ...