iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 14

Day 14 CSS <網頁布局-浮動布局>

浮動屬性float用於創建浮動

使其移動到另一邊 直到左或右邊緣觸及包含塊或另一個浮動框的邊緣

語法 :

    選擇器{float:屬性值;}
    /* 
    none 不浮動
    left 向左浮動
    right 向右浮動
    */

浮動的特性

加了浮動之後的元素會具有其他的特性

a. 浮動元素會脫離標準布局方式

脫離標準布局方式的控制移動到指定位置

且浮動個盒子不再保留原先的位置

b. 浮動的元素會一行內顯示且元素頂部對齊

如果給盒子都設置了浮動則盒子會按照屬性值,變為一行內顯示並且頂端對齊排列

注意 :

  • 浮動的元素是互相貼靠再一起的(不會有縫隙)
  • 如果父級寬度裝不下盒子多出的盒子將會另起一行對齊

c. 浮動的元素會具有行內塊元素的特性

任何元素都可以浮動,不管原本是什麼模式的元素

添加浮動後皆會具有行內塊元素相似的特性

  • 如果塊級盒子沒有設置寬度,默認寬度和父級一樣寬

但是設置成浮動元素後 大小則會根據內容來定(行內塊元素)

  • 浮動的盒子中間沒有縫隙,是緊貼在一起的
  • 行內元素同理

浮動的備註

浮動元素經常和標準布局方式搭配使用

為了約束浮動元素位置,網頁布局一般採取的方式是 :

先用標準布局的父元素排列上下位置,之後內部子元素採取浮動排列左右位置

浮動 - - - codepen


上一篇
Day 13 CSS <屬性書寫順序 & 網頁布局-標準布局>
下一篇
Day 15 CSS <網頁布局-定位布局-1.定位模式>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30

尚未有邦友留言

立即登入留言