CSS頁面布局基礎3 元素浮動

2021-06-26 08:11:19 字數 2030 閱讀 1629

1.浮動(float)是基於css的現代web設計用到的主要功能之一,可以用它來建立多累的網頁布局,從無序列表建立導航工具條,不是用table而建立類似**的對其方式等。

為使元素浮動到左邊或者右邊,並使後面的文字環繞它,可使用float屬性,float屬性的取值是:none(不浮動),left(向左浮動),right(向右浮動)。

使用float屬性後,浮動的元素從正常文件流中脫離出來,同時對布局中的其他元素造成一定的影響。

浮動可以應用於任何元素。

我個人認為我們可以這樣理解浮動(如有什麼不對的,歡迎指正),在平常我們用到塊級元素的時候,如果我們將兩個塊級元素巢狀在乙個div中,在正常情況下,這兩個塊級元素會從上到下一次排列,即乙個在上,乙個在下,如果我們希望做到將這兩個塊級元素排列在一排(在這兩個塊級元素的寬度相加沒有超過它們的父元素的寬度的情況下),我們可以用float屬性對其進行設定。例子如下

div1

div2

在沒有新增浮動之前

新增向左浮動:

right的應用和left沒有什麼不同,主要是乙個靠左,乙個靠右。

上述例子向右浮動的效果:

文字環繞的效果:

華胥引華胥引華胥引

這是乙個發生在亂世的故事。城破之日,衛國公主葉蓁以身殉國,依靠鮫珠死而復生。當她彈起華胥調,便生死人肉白骨,探入夢境與回憶。幻術構成的曲譜裡,盡是人生的辛酸與苦澀。而她與亡她國家的陳國世子,在一次幻境中相遇,身份兩重,緣也兩重。

效果:

2、浮動的幾個基本行為:(1)當float不等於none引起元素浮動時,元素被視作塊級元素(block-level),等同於設定display:block;

(2)當浮動乙個文字型別元素時,必須制定該元素的width屬性,如果不設定寬度,元素內容就會摺疊到最可能的最小寬度。

(3)浮動元素停留在包含它的父級元素的內容區域內,不會穿過padding區域。

(4)浮動元素的margin元素不會重合。

(5)在源文件中,相鄰的浮動元素不允許重疊。

(6)如果元素向同一方向浮動,每個後續的浮動元素必須向該方向移動,直到碰到父級元素的內邊緣或者碰到前面的浮動元素。(這會導致多個浮動元素集聚在目標邊緣)

(7)如果沒有足夠的空間讓浮動元素肩並肩出現,第二個浮動元素將向下移動,直到有足夠的空間來顯示它而不覆蓋第乙個浮動元素。

3、限制浮動元素的頂部邊緣的高度的規則

(1)浮動元素的頂部必須停留在它的父級元素的頂部內邊緣之內。

(2)不被塊級元素包含的浮動元素的頂部不能比前面的塊級元素高。

(3)浮動元素的頂部不能比同在文件源中的前乙個浮動元素高。

4、清除浮動:clear(只能用於塊級元素)。在某些情況下,我們想浮動元素某乙個邊的區域被清除,後續的元素從容器的正常位置開始顯示,這時候我們可以使用clear屬性阻止乙個元素出現在浮動元素的後面。

使用clear屬性組織乙個元素出現在元素的後面		

使用clear清除浮動的影響之前:

使用clear清除浮動的影響之後:

CSS基礎複習總結(一) 元素隱藏 清除浮動

一.隱藏元素的幾種方法 1.display none 使用該方法時隱藏的元素將不會占用原來的位置。2.visibility hidden 使用該方法時隱藏的元素將占用原來的位置。3.運用padding給足夠大的左邊距將其在瀏覽器中把他給擠出去,為了安全起見建議加上overflow hidden 這樣...

3D數學基礎 四元素

1 四元素的表示 四元數使用乙個三維向量來表示旋轉的座標軸和乙個旋轉角度。其物理意義為 圍繞乙個通過座標系原點的座標軸旋轉一定的角度 四元數的表示方法 w表示旋轉量,其餘 的表示座標軸。2 四元素中的旋轉角與旋轉軸 在使用矩陣進行我們使用n表示旋轉軸,表示旋轉角度,同樣我們不必關係旋轉軸n的長度,把...

css3元素私有字首及其用法

在css3模組標準尚未被w3c批准或者標準所提議的特性尚未被瀏覽器完全實現時,瀏覽器廠商會使用所謂的私有字首來測試 試驗性的 css 特性。這樣,瀏覽器設計者實現了 css3的新模組,但對使用 css3的開發者來說則很繁瑣。看看 css3中實現圓角的 round round 這樣寫會覆蓋 firef...