生活中的CSS盒子模型

      在学习牛腩新闻发布系统中,学到了css的盒子模型,通过视频中的学习,以及自己查资料,体会到了盒子模型的重要性,它是整个css中的核心内容之一,可以这样理解,在整个网页中,都是由一个个大大小小的盒子组成的。所有深刻的理解盒子模型显得尤为的重要。

      现在,总结一下,对于盒子模型的理解。

      在生活中,我们的身边也有好多的css盒子模型一样的盒子,比如玻璃的保温杯。

生活中的CSS盒子模型_第1张图片

      这种保温杯的大概的架构是:在最外层有一层玻璃,最内层有一层玻璃,中间是真空层。最内层玻璃中放的是水。

      而相对于css中的盒子模型:放的水就是CONTENT,而中间真空层就是padding,最外层的玻璃就是border,而margin就是杯子和杯子之间的距离。

      css中的标准盒子模型是这样的:

生活中的CSS盒子模型_第2张图片

      他包含了margin、border、padding、content。在html中每个标记都可以看做是一个盒子。每个盒子都有margin、border、padding、content四个属性,每个属性都包括了上、右、下、左;这四部分可同时设置,也可分别设置。

       生活和学习是相联系的。把它们结合起来,学习是不是变的so easy?



你可能感兴趣的:(css)