Web前端開發學習筆記(二)

2022-07-31 13:42:18 字數 1379 閱讀 1356

homework2:

1.display屬性的block,inline-block,inline值的區分

其實真正需要區分的是inline-block和inline。都是在同一行內,怎麼區分他們呢?首先要明白塊元素和行內元素很重要的一點區別:塊元素的高度和寬度我們都是可以控制的,而行內元素是不可以的。block對應的就是塊元素,inline對應的是行內元素,inline-block叫作「行內塊元素」(既具有block的寬度高度特性又具有inline的同行特性),畫個圖就懂了:

兩個高度不同的block:

兩個高度不同的inline-block:

兩個inline:

2.關於margin:

有些元素的margin預設值並不是0,比如body,是取決於瀏覽器的型別的。

這裡引申出乙個問題:

假如想實現下面的效果怎麼做?

這時我們可以把q元素的overflow設為hidden,使它成為乙個bfc,使它不會與浮動的元素重疊。

4.寫這份作業的時候遇到乙個很奇怪的問題,出現了這樣一種情況:

相應的**如下:

盒子模型如下:

但把overflow設定為hidden後,就解決了這個問題:

在網上搜了一下,有知乎上有解釋:這個是bfc的原因,這個在另一篇東西裡面詳述吧。

在總結這次作業的過程中,我發現了乙個以前沒了解過的東西:bfc。顯然這是很重要的東西,因此我會另外用一篇博文來講講。

開發web前端 web前端 開發筆記

我是孟噠噠一名web前端開發工程師,今天給大家分享一下web前端是的一些筆記應用,希望對你們有幫助。物件導向是乙個開發思想,它把注意點都放到了物件上。物件導向強調的幾個概念 1 類 類是一批具備相同屬性和行為的事物的抽象,為什麼是抽象?因為不是具體的,也就是說不是實實在在存在的東西 看不見摸不著 2...

Web前端開發學習

網際網路在2005年以後就步入了乙個web2.0時代了,各種相似桌面軟體的web應用大量的出現,讓 前端也發生了很大的變化。而不再只是個單一的只顯示文字和,各種 新聞使得網頁內容更加生動,使用者也通過了網頁上軟體化互動形式得到了更好的體驗,但這些都是基於前端技術才得以實現的。web前端開發 web前...

Web前端學習筆記

學習用時 5小時 學習目標 零基礎學院 第二天 目標是否達成 已達成 答 html 指的是超文字標記語言 hyper text markup language html5是最新的html標準,擁有更豐富的語義 圖形以及多 元素等內容。答 在網際網路上有許多不同的文件,只有了解文件的型別,瀏覽器才能正...