简述CSS盒子模型的内部结构

CSS 3中，所有的页面元素都包含在一个矩形框内，称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小。在页面设计中有4个常见属性：content(内容)、padding(内边距)、border(边框)...

CSS 3中，所有的页面元素都包含在一个矩形框内，称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小。

在页面设计中有4个常见属性：content(内容)、padding(内边距)、border(边框)和margin(外边距)，我们把这4部分转化成日常生活的盒子来理解，所以称为盒子模型。

content(内容)就是盒子里装的东西，padding(内边距)就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震防挤压的辅料，border(边框)就是盒子本身了，margin(外边距)则说明盒子摆放的时候不能全部堆在一起，要留一定空隙。

在网页设计中，content常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，padding只有宽度属性，可以理解为真实盒子中抗震辅料的厚度，而border有大小和颜色之分，又可以理解为真实盒子的厚度以及这个盒子的颜色或材料，margin就是该盒子与其他东西要保留多大距离，如图所示：

从上图可以看出，盒子的概念不难理解，但是如果需要精确排版，甚至1个像素都不差，这就需要非常精确地理解其中的计算方法。

一个盒子实际所占有的宽度(或高度)是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设置width和height的值来控制内容所占矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin，如下图所示。因此只要利用好这些属性，就能够实现各种各样的排版效果。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-07 13:55
阅读 ( 558 )
分类：WEB前端开发

简述CSS盒子模型的内部结构

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »