從0到1開啟web前端學習之旅五

2021-08-04 12:05:50 字數 1113 閱讀 7663

歡迎回到我們的coding time!!! 本篇部落格將為你把所有的css內容全部講解完畢,上篇文章基本上已經把一般的內容講完,這節課我們主要從css中更深入的部分開始講起,那就是盒子模型,什麼是盒子模型呢,聽起來感覺優點怪怪的但是實際上他的命名是有他的意圖的,之間我們講過很多個標籤,每個標籤都有他獨特的功能,有一些還附帶樣式。當你在乙個html頁面中寫完眾多標籤之後通過瀏覽器開啟該網頁,你會發現每個標籤都是按照特定的規則去顯示出來的,有的獨佔一行,有的根據自身內容決定它所佔據的空間。

其實當乙個網頁被瀏覽器開啟的時候,瀏覽器會解釋執行該網頁,還有一步就是要把該網頁渲染(換句俗話就是『畫』)出來,既然是要畫出來!那麼每個標籤應該怎麼畫,位置在**,畫多大,該標籤距離其他標籤的位置如何有無特殊要求,這個都需要經過精密的計算。

既然知道了這個過程,那麼不得引出上述過程中很重要的一塊理論知識,就是盒子模型,其實盒子模型就是用來描述乙個標籤的大小和它周邊的標籤應該和它保持多少距離的乙個描述。

這裡我先拿乙個易碎物品的包裝盒子舉例子,如下圖:

乙個這樣盒子我們把它分成幾個區域 首先是易碎物品->內容區(content),充氣塑膠袋->內邊距區(padding ),紙殼子->邊框(border)。也就收乙個盒子分成3個部分content、padding、border。但是對於乙個盒子模型來說還需要再加上乙個外邊距區(margin),到此為止乙個盒子模型的全體組成部分就已經水落石出了。

我們寫的所有的標籤,最終被渲染的瀏覽器上的時候其實都是乙個乙個的盒子模型,而且這個盒子模型我們是可以通過瀏覽器的除錯工具來進行檢視的。如下圖:

瀏覽器效果:

除錯工具效果:

上圖左側是該標籤的樣式**,上圖右側就是該標籤的盒子模型。

小白從0到1,如何學習web前端開發?

很多小白可能會說,我現在零基礎學習,現在前端開發的內容那麼多,我應該怎麼學呀?其實前端技術更新是挺快的,但是技術不管怎麼更新,怎麼發展,都離不開基礎的知識,把基礎的語法學好,理解好程式設計思想 開發方式,能面向多終端開發,響應式開發掌握好,基礎打牢了,再深入的內容都是可以迎刃而解的。今天就跟大家講一...

從0到1學習記錄

競爭會讓你把注意力都放在競爭對手身上,忽視了自己的發展。競爭會造成非常低水平的重複和跟風。不存在完美的市場均衡,在經濟理論之外的現實世界裡,每個企業的成功,恰恰是因為它打破了均衡,它做到了其他企業不能做的事情,也就是從0到1的事情,而不是它跟其他企業做一樣的事兒。谷歌把自己定義成什麼,取決於什麼能給...

讀書1 從0到1

總結你身邊是不是總有這樣的人,他特立獨行,有的時候厭煩規則,顯得與眾不同。如果有,請盯住他們,本書就以這類人為論述,作者對他們的迷戀堪稱瘋狂。最近看的一場電影 綠皮書 其中的唐雪莉和托尼就是這樣的人,托尼改掉歧視黑人的行為,甚至為黑人唐打工,而唐也與其他黑人格格不入,他特立獨行,不了解黑人 他是鋼琴...