前端知識重新梳理 1

2021-10-08 14:25:44 字數 1474 閱讀 1244

先上定義:

display:block 塊級元素

1,每個塊級元素會獨佔一行

2,缺省會自動填滿父級寬度

3,塊級元素可以設定padding和margin

display:inline 內聯元素

1,內聯元素不會獨佔一行,多個相鄰的內聯元素會排列在同一行裡,

直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化。

2,內聯元素設定width和height無效

3,內聯元素水平方向的padding、margin有效,垂直方向的padding、margin無效

display:inline-block 內聯塊級元素(自己起的名233)

1,元素有inline的特性,且可以設定width、height以及垂直方向的padding、margin

元素被當成行內元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據white-space的處理方式(預設是normal,合併多餘空白),原來html**中的回車換行被轉成乙個空白符,所以元素之間就出現了空隙。

解決辦法:

當多個inline-block字型大小不同、某些元素沒有文字、有或input、textarea等替換元素時,會出現垂直不對齊的問題。

替換元素

所謂替換元素就是根據元素內相關屬性的不同,瀏覽器會有不同的解析展現。

比如input元素、img元素或者iframe元素等。

基線

各種字型、、行內html元素等可展示的內容都有各自的基線,

文字的基線在小寫字母"x"的最下方

、空文字元素、textarea的基線在元素最下方

input的基線在輸入的文字"x"的最下方(也就是稍微比輸入框最下方高一些)

可見,各種行內元素的基線在不同位置,排列在一排自然會顯得高高低低,因此需要改變

元素的垂直對齊方式

vertical-align 設定行級元素的垂直對齊方式,預設值: baseline

設定vertical-align為top、middle、bottom等來修改垂直對齊方式

當我們需要併排顯示塊級元素時,可能會需要選擇使用inline-block或float,二者有什麼異同呢?

相同點:

都可以做到讓元素成一排排列

都可以根據父元素的寬度自動換行到下一列

都可以自由設定元素的寬高。

區別:

float :會產生浮動效果,元素脫離當前文件流,如果父元素不清除浮動將不被撐開。

float 布局要比 inline-block 消耗效能

當需要橫向排列元素時可能還可以選擇使用flex布局,flex又有什麼有缺點呢?為什麼脫離文件流會更消耗效能呢,下一回見~

前端知識梳理

保證內部一致性 使併發更新變得可行 react 可以根據 setstate 來自的不同的位置 事件控制代碼,網路響應,動畫等,來為它們分配不同的優先順序。鉤子函式 函式元件不能使用這些方法,因為這需要繼承react component這個類 getinitialstate componentwill...

前端知識體系梳理

高頻考題 盒模型 動畫 css3 預處理器 sass less postcss.基礎其他題目 書籍推薦基礎 原型 繼承 事件流 事件委託 變數 作用域 閉包 this 上下文 事件迴圈 前端快取 正則 跨域 settimeout setinterval requestanimationframe 深...

jvm知識梳理1

關於記憶體分配 1.jvm的記憶體氛圍堆記憶體和非堆記憶體,重點來說堆記憶體。2.堆記憶體中有兩個地方,乙個是年輕代,即young,乙個是老年代,即old,這兩個區域的大小比例為1 3。3.在年輕代中又分為三個部分,乙個eden 伊甸園 區域,兩個survivor 倖存者 區域,s0和s1,它們的大...