1. 程式人生 > >盒子常規流和浮動基礎

盒子常規流和浮動基礎

左浮動 右浮動 方向 剩余空間 順序 borde 相加 In none

塊盒在常規流下的位置

  • 盒子在包含塊的垂直方向上擺放
  • 依次擺放:按照HTML元素的書寫順序從上到下擺放
  • 盒子在包含塊中占據的尺寸是整個盒子的尺寸

  • 垂直方向上若兩個外邊相鄰,則進行合並(折疊)

  • 垂直方向:水平方向上外邊距不會合並
  • 外邊距相距:兩個外邊距之間沒有border、padding和content

  • 合並:均正取大,均負取小,一正一負相加

盒模型中的auto值-水平方向

常規流盒子水平方向上的尺寸,必須等於包含塊的寬度

垂直方向

margin為auto:0px

height為auto:適應內容的高度

浮動

當元素屬性取值為left、right時,元素屬於浮動定位。

     float:不繼承
            默認值為none
            取值none(不動)left(左浮動)right(右浮動)
盒子位置

右浮動 先向上再向右

左浮動 先向上再向左

浮動盒子的頂邊不得高於上一個盒子的頂邊

若剩余空間無法放下浮動的盒子,則該盒子向下移動,直到具備足夠的空間能容納盒子,然後再向左或向右移動

盒子常規流和浮動基礎