display轉塊狀化

2021-09-27 03:53:16 字數 660 閱讀 3014

display:block

block元素會獨佔一行,多個block元素會各自新起一行。預設情況下,block元素寬度自動填滿其父元素寬度。

block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。

block元素可以設定margin和padding屬性。

display:inline

inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裡,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。

inline元素設定width,height屬性無效。

inline元素的margin和padding屬性,水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block

簡單來說就是將物件呈現為inline物件,但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給乙個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。

---恢復內容結束---

BFC 塊狀格式化上下文

mdn對bfc的定義 是web頁面的視覺化css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。bfc是乙個獨立的渲染空間,只有塊級元素參與,規定了內部元素如何布局,並且與這個區域外部的元素不相干。觸發bfc 布局規則 bfc可以做什麼呢?包含浮動,清除父元素高度塌陷問...

轉 Redis AOF 持久化詳解

redis 是一種記憶體資料庫,將資料儲存在記憶體中,讀寫效率要比傳統的將資料儲存在磁碟上的資料庫要快很多。但是一旦程序退出,redis 的資料就會丟失。為了解決這個問題,redis 提供了 rdb 和 aof 兩種持久化方案,將記憶體中的資料儲存到磁碟中,避免資料丟失。rdb的介紹在這篇文章中 r...

轉 Yolov3轉化Caffe框架詳解

前些日子因工程需求,需要將yolov3從基於darknet轉化為基於caffe框架,過程中踩了一些坑,特在此記錄一下。想要轉化為caffe框架,就要先了解yolov3的網路結構,如下圖。如果有執行過darknet應該會很熟悉,這是darknet執行成功後列印log資訊,這裡面包含了yolo網路結構的...