Css的模型构建是什么

这篇文章主要讲解了“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的模型构建是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！