提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 什么是css盒子模子?【css教程】,css,盒子模型

CSS盒子模子就是在网页设想中经常用到的CSS技术所运用的一种头脑模子。它又称为框模子 (Box Model) ,是由元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素构成的(如下图所示)。

这些属性我们能够把它转移到我们一样平常生活中的盒子(箱子)上来明白,一样平常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子形式。

图中最内部的框是元素的现实内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),悉数构成了框模子。平常我们设置的背景显现地区,就是内容、内边距、边框这一块局限。而外边距margin是通明的,不会遮挡周边的其他元素。

那末,元素框的总宽度 = 元素(element)的width + padding的左侧距和右侧距的值 + margin的左侧距和右侧距的值 + border的摆布宽度;

元素框的总高度 = 元素(element)的height + padding的高低边距的值 + margin的高低边距的值 + border的高低宽度。

构造

内容(CONTENT)就是盒子里装的东西;

而添补(PADDING)就是怕盒子里装的东西(珍贵的)破坏而增加的泡沫或许别的抗震的辅料;

边框(BORDER)就是盒子自身了;至于边境(MARGIN)则申明盒子摆放的时刻的不能悉数堆在一起,要留肯定闲暇坚持透风,同时也为了轻易掏出。在网页设想上,内容常指笔墨、图片等元素,然则也能够是小盒子(DIV嵌套),与现实生活中盒子差别的是,现实生活中的东西平常不能大于盒子,不然盒子会被撑坏的,而CSS盒子具有弹性,内里的东西大过盒子自身最多把它撑大,但它不会破坏的。

添补只要宽度属性,每一个HTML标记都可看做一个盒子;

以上就是什么是css盒子模子?的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"什么是css盒子模子?【css教程】,css,盒子模型"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线