1. 程式人生 > >網頁的布局方式

網頁的布局方式

span 網頁 瀏覽器 右浮動 color round ack 顯示 向上

1、什麽是網頁的布局方式

網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素是如何排版的

1、標準流(文檔流/普通流)排版方式

  1.1、瀏覽器默認的排版方式

  1.2、在css元素中,分為行內元素,塊級元素,行內塊級元素

  1.3、在標準流中有兩種排版,一種是垂直排版,一種是水平排版;

  垂直排版:如果元素是塊級元素

  水平排版:如果元素是行內塊級元素

  

2、浮動流排版方式

  2.1、浮動流是一種半脫離標準流的排版方式

  2.2、只有一種排版方式,就是水平排版;

    它只能設置某個元素向左或者向右對齊

註意:

  1、浮動流中沒有居中對齊,center,的方式;

  2、在浮動流中是不可以使用margin:0 auto;

特點:

  1、在浮動流中是不區分塊級元素/行內元素/行內塊級元素都可以水平排版

  2、在浮動流中不論是塊級元素/行內元素/行內塊級都可以設置寬高的。

什麽是浮動元素的脫標?

  脫標:脫離標準流

  1、當某一個元素浮動之後,那麽這個元素看上去就像從標準流中刪除一樣,這個就是浮動元素的脫標

  2

浮動元素脫標有什麽影響?

  

浮動元素排序規則:

  1、相同方向上的浮動元素,先浮動的元素會顯示在前面,後浮動的元素會顯示在後面

  2、不同方向上的浮動元素,左浮動會找左浮動,右浮動找右浮動;

  3、浮動元素浮動之後的位置,有浮動復原之前在標準流中的位置來確定

  

網頁的布局方式