這次帶給大家 網頁的佈局方式與浮動, 網頁佈局方式與浮動的注意事項有哪些,下面就是實戰案例,一起來看一下。
一.網頁的佈局方式
1.什麼是網頁的佈局方式?
網頁的佈局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的;分為:標準流,浮動流,定位流
1.標準流(文檔流/普通流)排版方式
1.1其實瀏覽器預設的排版方式就是標準流的排版方式
1.2在CSS中將元素分為三類, 分別是區塊級元素/行內元素/行內區塊級元素
1.3 在標準流中有兩種排版方式,一種是垂直排版, 一種是水平排版
垂直排版, 如果元素是塊級元素, 那麼就會垂直排版
水平排版, 如果元素是行內元素/行內塊級元素, 那麼就會水平排版
2.浮動流排版方式
2.1浮動流是一種"半脫離標準流"的排版方式
2.2浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素相對於父元素左對齊或右對齊
注意點:
1.浮動流中沒有居中對齊, 也就是沒有center這個取值
2.在浮動流中是不可以使用margin: 0 auto;(是無效的)
特點:
1.在浮動流中是不區分區塊級元素/行內元素/行內區塊級元素的
無論是級元素/行內元素/行內區塊級元素都可以水平排版
2.在浮動流中無論是區塊元素/行內元素/行內塊級元素都可以設定寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
當某一個元素浮動之後, 那麼這個元素看起來就像被從標準流中
刪除了一樣, 這個就是浮動元素的脫標;
如果前面一個元素浮動了, 而後面一個元素沒有浮動, 那麼這個時候前面一個元就會蓋住後面一個元素;三. 浮動元素排序規則浮動元素排序規則:1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動3浮動元素浮動之後的位置, 由浮動元素浮動之前在標準流中的位置來確定(如果元素浮動前在標準流中的第一行,那麼它浮動後就在第一行顯示,如果浮動前在標準流中的第二行,浮動後就在第二行顯示)#四.浮動元素貼靠現象什麼是浮動元素貼靠現象?1.如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會並排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後一個元開始往前貼靠
3.如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象;一般用作圖文混排!
垂直方向使用標準流, 水平方向使用浮動流
其它相關文章!
推薦閱讀:以上是網頁的版面方式與浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!