html 盒子模型 本章大纲

盒子模型是CSS最重要的属性系列之一。必须完全掌握,以及灵活应用。

一切html标签都是盒子。

本章主要以p标签为例。


学习注意事项

盒子模型不是孤立的内容,会与其它属性相关联,可能还未真正讲到,这里先直接使用。


本章内容总结

1)盒子模型的值:14个值,17个属性;

2)工具1:查看盒子模型。开发者工具查看各属性具体数值,查看相应颜色;

3)工具2:QQ截图工具测试尺寸;

4)设值情况:多方向统一设值;多方向分别设值;一次设置多个方向值;

5)宽高为什么有时设置无效;

6)如何让宽高设置从内容的宽高变成总的宽度;

7)盒子模型的运用场景;

8)养成研究习惯:搞清楚每一个像素的空白从哪里来。


本章大纲

第1节 html 盒子模型 简单使用

第2节 html 盒子模型 浏览器查看盒子模型

第3节 html 盒子模型 可配置属性

第4节 html 盒子模型 计算总宽度与总高度

第5节 html 盒子模型 工具验证

第6节 html 盒子模型 分别设置各方向值

第7节 html 盒子模型是什么

第8节 html 盒子模型的作用

第9节 html 盒子模型 去除body的默认margin值

第10节 html 盒子模型 padding设置不同个数的值

第11节 html 盒子模型 margin的叠加

第12节 html 盒子模型 span设置宽度与高度无效

第13节 html 盒子模型 设置总宽度总高度

第14节 html 盒子模型 重复设置的生效