什么是CSS盒模型？CSS盒模型由哪些部分组成

盒模型概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。盒模型的组成：content(内容区)+padding(填充...

盒模型概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)

作用：控制元素和元素之间，或者元素和内容之间的位置关系。

不同部分的说明：

content(内容)：盒子的内容，显示文本和图像。

border(边框)：围绕在内边距和内容外的边框。

padding(内边距)：清除内容周围的区域，内边距是透明的。

margin(外边距)：清除边框外的区域，外边距是透明的。

盒子的大小怎么计算呢？

我们举个实例：如下图所示

它的效果图是这样的：

Margin是显示元素边框之外的区域，不会把元素撑大所以计算元素大小时不应该算上margin的值。

总元素高度=内容区宽度+左填充+右填充+左边框+右边框=300+30+30+5+5=370；

总元素高度=内容区高度+上填充+下填充+上边框+下边框=200+30+30+5+5=270；

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

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

0 条评论