网站前端制作中的盒子模型您了解吗?

提到“盒子模型“,相信做前端的小伙伴都知道是什么?但是没接触过的小伙伴估计想到的就是生活中的盒子,例如:包装盒、玩具积木、收纳盒、衣柜等,其实这些盒子跟我们要讲的”盒子模型“有很多相似点,比如它们都有宽度、高度这些属性。
以衣柜为例,一个衣柜我们可以看作是一个盒子,衣柜里面的每一个小格子,我们又可以看成另外一个盒子,那么在这么多盒子当中我们该用什么属性去描述一个盒子?很显然盒子分为宽度、高度、边框这些属性;那么是否就说明我们可以用这种方式来描述呢?答案是肯定的!例如:宽度:30cm;高度:35cm;边框:线粗细、线型、颜色。
同样的我们也就可以采用类似的方法来描述网站前端页面制作中所使用的”盒子模型“!
例如:.box1{ width:100px; height:120px;border:1px solid #F00; }
当有多个盒子的时候,我们在放置盒子的时候就可以设置盒子之间的距离,那么这个距离我们就称他为”间距“,”间距”又分为”上间距”、”下间距”、”左间距”、”右间距”这四个方向,同时这四个方向我们可以单独设置,又可以统一设置。
例如:.box{ width:100px; height:150px;border:1px solid #00F;margin:10px; }其中margin所给的属性就代表两个盒子的距离。
除此之外,我们还可以向盒子里填充内容,一般盒子内容填充都是用的padding来规定盒子填充的像素,比如:padding-left:10px就代表盒子内部据左10个像素。

盒子模型的概念你了解了吗?

盒子模型:用这种思想来”盛放”网页中的各种元素。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套)。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小、线型和颜色之分,我们又可以理解为生活中所常见盒子的厚度以及这个盒子用什么颜色材料做成的,边界就是该盒子与其他盒子要保留多大距离。
填充、边框、边距分为上右下左四个方向,均可单独设置。
在css中,width和height指的是内容区域的宽度以及高度。增加内边距、边框、外边距是不会影响到内容区域的尺寸,但是会增加元素框的总尺寸。
今天关于盒子,小编就跟大家讲这么多,如果您对这个有兴趣,可以联系我们青岛新思维信息技术有限公司。
最后又到了小编打广告的时间了,如果您有青岛网站建设以及青岛网络营销的服务需求,可以联系我们青岛新思维信息技术有限公司。我们期待与您的愉快合作!

青岛网络公司_青岛网络推广新思维网络为您提供:青岛网站建设、网站优化、网络推广等服务
青岛网络公司_青岛网络推广-新思维
扫描二维码访问微信网站
点击这里给我发消息