html盒模型

本文主要是介绍html盒模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

盒模型

box：盒子，每个元素在页面都会生成一个矩形区域（盒子）

盒子分为两种类型：

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容部分通常叫做整个盒子的内容盒 content-box

填充（内边距）padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-botom

padding：简写属性

padding：上右下左

填充区+内容区=填充盒 padding-box

边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框 + 填充区 + 内容区 = 边框盒 border-box

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin（速写属性：指可以缩写的属性

这篇关于html盒模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！