这篇文章主要讲解了“Css的模型构建是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Css的模型构建是什么”吧！
“盒子”模型，每一个HTML元素可以看成一个“盒子”。一个“盒子”具有：宽度、边框、内填充、外边距
1.宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。
2.内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左
3.外边距(margin)：是指边框线以外的距离。
计算一个“盒子”的总空度
假设：总宽度为100px，边框为1px，内填充为10px，求内容的宽度
Width = 100px – 1px*2 -10px*2 = 78px
假设：总宽度为100px，内容的宽50px，求左右内填充分别是多少？
Padding-left = (100px – 50px )/2 = 25px
CSS内填充padding
Padding-left：左边线到内容间的距离
Padding-right：右边线到内容间的距离
Padding-top：顶边线到内容间的距离
Padding-bottom：底边线到内容间的距离
Padding：同时设置四个边的内填充距离
padding:10px; //表示：上下左右四个内填充都是10px
padding:5px 10px; //表示：上下为5px，左右为10px
padding:5px 10px 15px; //表示：上为5px，左右为10px，下为15px
padding:5px 10px 15px 20px; //表示：上右下左分别设置不同的内填充，顺序不可乱
CSS外边距margin
Margin-left：左边线以外的距离
Margin-right：右边线以外的距离
Margin-top：顶边线以外的距离
Margin-bottom：底边线以外的距离
Margin:10px; //表示：四个外边距都是10px
Margin:10px 15px; //表示：上下外边为10px，左右外边距为15px
Margin:5px 10px 15px //表示：上外边距为5px，左右外边距为10px，下外边距为15px
Margin:5px 10px 15px 20px; //分别设置四外外边距，顺序为“上右下左”
感谢各位的阅读，以上就是“Css的模型构建是什么”的内容了，经过本文的学习后，相信大家对Css的模型构建是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
