https://www.xiaobuteach.com/html/box/outline.html?from=bili

html 盒子模型 本章大綱

盒子模型是CSS最重要的屬性系列之一。必須完全掌握，以及靈活應(yīng)用。

一切html標(biāo)簽都是盒子。

本章主要以p標(biāo)簽為例。

學(xué)習(xí)注意事項(xiàng)

盒子模型不是孤立的內(nèi)容，會(huì)與其它屬性相關(guān)聯(lián)，可能還未真正講到，這里先直接使用。

本章內(nèi)容總結(jié)

1）盒子模型的值：14個(gè)值，17個(gè)屬性；

2）工具1：查看盒子模型。開(kāi)發(fā)者工具查看各屬性具體數(shù)值，查看相應(yīng)顏色；

3）工具2：QQ截圖工具測(cè)試尺寸；

4）設(shè)值情況：多方向統(tǒng)一設(shè)值；多方向分別設(shè)值；一次設(shè)置多個(gè)方向值；

5）寬高為什么有時(shí)設(shè)置無(wú)效；

6）如何讓寬高設(shè)置從內(nèi)容的寬高變成總的寬度；

7）盒子模型的運(yùn)用場(chǎng)景；

8）養(yǎng)成研究習(xí)慣：搞清楚每一個(gè)像素的空白從哪里來(lái)。

本章大綱

第1節(jié) html 盒子模型 簡(jiǎn)單使用

第2節(jié) html 盒子模型 瀏覽器查看盒子模型

第3節(jié) html 盒子模型 可配置屬性

第4節(jié) html 盒子模型 計(jì)算總寬度與總高度

第5節(jié) html 盒子模型 工具驗(yàn)證

第6節(jié) html 盒子模型 分別設(shè)置各方向值

第7節(jié) html 盒子模型是什么

第8節(jié) html 盒子模型的作用

第9節(jié) html 盒子模型 去除body的默認(rèn)margin值

第10節(jié) html 盒子模型 padding設(shè)置不同個(gè)數(shù)的值

第11節(jié) html 盒子模型 margin的疊加

第12節(jié) html 盒子模型 span設(shè)置寬度與高度無(wú)效

第13節(jié) html 盒子模型 設(shè)置總寬度總高度

第14節(jié) html 盒子模型 重復(fù)設(shè)置的生效