HTML入門學習筆記 CSS浮動 7

2021-07-26 00:03:41 字數 2140 閱讀 9420

在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等, 所以在企業開發中, 編寫**之前第一件事情就是清空缺省的邊距

格式

*實際開發中不推薦使用這種格式!!!

**萬用字元選擇器會找導(遍歷)當前介面中所有的標籤, 所以效能不好

企業開發中可以從這個**中拷貝 yui css reset**

在css中所有的行都有自己的行高

行高和盒子高不是同乙個概念

行高指的是每行內容的高度

盒子高指的是元素的高度

1.文字在行高中預設是垂直居中的

2.在企業開發中我們經常將盒子的高度和行高設定為一樣, 那麼這樣就可以保證一行文字在盒子的高度中是垂直居中的

簡而言之就是: 要想一行文字在盒子中垂直居中, 那麼只需要設定這行文字的」行高等於盒子的高」即可

3.在企業開發中如果乙個盒子中有多行文字, 那麼我們就不能使用設定行高等於盒子高來實現讓文字垂直居中, 只能通過設定padding來讓文字居中

1.在企業開發中, 如果乙個盒子中儲存的是文字, 那麼一般情況下我們會以盒子左邊的內邊距為基準, 不會以右邊的內邊距為基準, 因為這個右邊的內邊距有誤差

2.右邊內邊距的誤差從何而來? 因為右邊如果放不下乙個文字, 那麼文字就會換行顯示, 所以文字和內邊距之間的距離就有了誤差

3.頂部的內邊距並不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離

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

1.1其實瀏覽器預設的排版方式就是標準流的排版方式

1.2在css中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素

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

垂直排版, 如果元素是塊級元素, 那麼就會垂直排版

水平排版, 如果元素是行內元素/行內塊級元素, 那麼就會水平排版

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

2.2浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素左對齊或者右對齊

1.浮動流中沒有居中對齊, 也就是沒有center這個取值

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

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

2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設定寬高

3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像

脫標: 脫離標準流

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

如果前面乙個元素浮動了, 而後面乙個元素沒有浮動 , 那麼這個時候前面乙個元就會蓋住後面乙個元素

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

1.2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動

1.3浮動元素浮動之後的位置, 由浮動元素浮動之前在標準流中的位置來確定

1.如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會併排顯示

2.如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後乙個元開始往前貼靠

3.如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊

浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象

CSS入門筆記十三 浮動

常見網頁元素模式 a.標準流 即標籤按照預設規則顯示 b.浮動 調控盒子位置 c.固定 注意 網頁通常由這三種布局共同作用。網頁布局第一準則 多個塊級元素縱向排列用標準流,橫向排列用浮動 浮動語法 浮動特性 a.浮動元素會脫離標準流 脫標 b.浮動的盒子不再保留原來的位置 c.浮動的盒子會在一行顯示...

CSS學習筆記 浮動

float left float right float none css的float 屬性可以使乙個元素脫離正常的文件流,然後被安放到它所在容器的的左端或者右端,並且其他的文字和行內元素圍繞它安放。除了left和right,float還有乙個屬性 none,用來防止元素浮動。有一些列特定規則控制著...

HTML筆記(六)CSS 浮動 定位

css浮動 1.定義 定義元素框相對於其正常位置應該出現的位置 2.分類 3.浮動定位指 將元素排除在普通流之外 元素將不在頁面中佔據空間 將浮動元素放置在包含框的左邊或者右邊 浮動元素依舊位於包含框之內 浮動的框可以向左或者向右移動,直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止。4 浮動 fl...