本质上,css中的每个元素都被一个盒子所包围。这个盒子规定了元素框的处理,其中由中心向外扩展包括盒子的尺寸(宽和高:width和height),内边距(padding)、边框(boader)和外边距(margin)。css盒子模型示意图如下所示:
如示意图所示,盒子模型中由width和height规定的区域为实际的内容所能使用的区域;接着,直接包围内容的是
内边距(padding),内边距区域内可以显示盒子元素的背景颜色或者背景图片;与内边距接壤的边缘边框(boader);边框以外是外边距(margin),外边距默认是透明的,即盒子的背景颜色或者背景图片在外边距不可见,它不会遮挡其后的任何元素,但是父元素的内容可透出来可视。
其中页面里简单的设置一个DIV块,将其作为测试的盒子对象,其中添加了一张200*200像素的图片作为DIV块的内容。
以上就是css中的盒子模型的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号