什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。那么内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
每个HTML标记都可看作一个盒子;
每个盒子都有:边界、边框、填充、内容四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;
相关推荐
通过这个css盒子模型的实战,更好的理解css盒子模型
CSS盒子模型教程PPT课件.pptx
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
CSS盒子模型结构
CSS盒子模型的应用
CSS 盒子模型
CSS盒子模型图片,和大家分享一下,里面详细的介绍了CSS的盒子模型
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
CSS盒子模型教程学习教案.pptx
css盒子模型视频简介上帮助理解社么是盒子模型
css 盒子模型彻底解析 如果你对盒子模型的理解还不透彻,看看这个会有帮助。
专门讲CSS盒子模型布局的,对网页制作技术的提高有很大的帮助
DIV CSS 盒子模型PPT演讲! HTML中 常见技术 盒子模式,网页设计基础同学可以用心,收获学习。
CSS盒子模型PPT学习教案.pptx
CSS盒子模型PPT教学课件.pptx
CSS盒子模型详解,自己学习总结的,希望对你有用。自己也做个笔记
CSS盒子模型教程PPT学习教案.pptx
CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在) 一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
HTML-第七章-CSS盒子模型+排版.pdf
HTML-第七章-CSS盒子模型+排版.pptx