HTML5前端開發入門之CSS盒子模型及其寬高

2021-09-05 09:09:48 字數 427 閱讀 5760

1.什麼是css盒子模型?

css盒子模型僅僅是乙個形象的比喻,html中所有的標籤都是盒子

結論1.在html中所有的標籤都可以設定

寬度/高度  ==  指定可以存放內容的區域

內邊距  ==  填充物

邊框  ==  現實中的手機盒子自己

外邊距  ==  盒子與盒子之間的間隙

1.內容寬度和高度

就是通過標籤的width/height屬性設定的寬度和高度

2.元素的寬度和高度

寬度 = 左邊的邊框 + 左邊的內邊距 + width + 右內邊距 + 右邊框

高度 = 同理可證

3.元素空間的寬度和高度

寬度 = 左外邊距 + 左邊的邊框 + 左邊的內邊距 + width + 右內邊距 + 右邊框 + 右外邊距

高度 = 同理可證

HTML5前端開發入門之CSS浮動流

1.什麼是浮動元素的脫標?脫標 脫離標準流 當某乙個元素脫標以後,那麼這個元素看上去就像被從標準流中刪除了一樣,這個就是浮動元素的脫標 2.浮動元素脫標之後會有什麼影響?如果前面乙個元素浮動了,而後面乙個元素沒有浮動,那麼這個時候前面的乙個元素就會蓋住後面的乙個元素 1.浮動元素排序規則 1.1相同...

HTML5前端開發入門之CSS定位流

1.定位流分類 1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位 預設情況下元素就是靜態定位 2.什麼是相對定位?相對於自己在原來標準流中的位置進行移動 格式 position relative top 20px left 20px 3.相對定位注意點 3.1相對定位是不脫離標準流的,...

HTML5前端開發入門之video audio標籤

1.什麼是video標籤?格式1 video 標籤的屬性 srcautoplay controls 用於告訴video標籤是否需要控制條 poster loop preload muted 靜音 width 寬度 height 高度 格式2 這個時候w3c未了解決這個問題,所以推出了第二個video...