前端基础——CSS盒子模型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/40402555

现在许多网页都是由许多个“盒子”拼接、嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。

       为了更好的说明,先举个通俗的例子:在一个仓库中放了10个纸箱,每个纸箱之间有一定距离,每个纸箱内放的是一台电脑并且纸箱和电脑之间都有一层泡沫来隔绝防震(这里假设纸箱和电脑都是正方体),以这个例子为背景接着说盒子模型。

       其实一张图片就可以把CSS盒子模型形象地表述出来,网上一搜一大堆:

       正如上图所示:CSS中的盒子模型通常由四部分组成:内容(content)、填充(padding)、边框(border)、边界(margin)。

       这里的内容就相当于箱子里的电脑,填充就相当于泡沫,边框就相当于纸箱,边界就相当于每个纸箱之间的距离。

          对这四部分进行说明:

          内容(content):盒子模型中的内容,可以是文字、图片、表格等等;

          填充(padding):内容与盒子边框的距离,可拆分为padding-top;padding-right;padding-bottom;padding-left;

          边框(border):盒子的边框,可拆分为border-top;border-right;border-bottom;border-left;

          边界(margin):盒子与其他相邻元素之间的距离,可拆分为margin-top;margin-right;margin-bottom;margin-left;

          如下图:

       图中需要注意的是,虚线部分表示的是该“盒子”中存放的内容的宽度(width)和高度(height),也就是上例箱子中电脑的宽度和高度。

通常情况下可以设置填充和边界四个方向的宽度(即厚度),对边框的设置有样式(style)、颜色(color)、宽度(width)几个属性。

       在CSS中,认为网页中的所有元素都包装在一个矩形盒子中,比如常用的div、span、ul、li、img、table等,都可以在CSS中对它们的内容(content)、填充(padding)、边框(border)和边界(margin)进行格式化。

       如果一个盒子的margin为30px,border为5px,padding为20,width为240,height为160px,那么这个盒子实际上占用的空间为  宽:(30+5+20)×2+240=350px,高(30+5+20)×2+160 =270px

       以往的网页都是用表格来布局,但是表格布局有很多缺点,限于篇幅,下篇将介绍易于控制和互动的CSS+DIV布局方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

有趣的 CSS 像素艺术

原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待! ...

23470
来自专栏熊二哥

Html与CSS快速入门02-HTML基础应用

这部分是html细节知识的学习。 ? 示例代码:https://github.com/wanliwang/Bjork.Demo htmlDemo 最近胡乱删除...

39660
来自专栏AI研习社

GPU 加速到底是个啥?

众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 一. GPU 加速能做什么? ? 首先我们要了解什么是 16...

44570
来自专栏我和未来有约会

Silverlight 3.0 中的 WriteableBitmap

Silverlight 3.0 中的 WriteableBitmap 尽管矢量图形非常的强大但是在有些情况下还是需要用到位图,因为他们在运行时能得到更高的执行效...

20780
来自专栏小灰灰

Css实战训练之图片点击放大

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么...

1.1K40
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(2)

接着来,也是刚刚遇到的 panel怎么进行收缩 这会panel就会出现这个 ? 点这个就可以收缩了 collapsible: true, pa...

34760
来自专栏Coding迪斯尼

实现小球在弹射前的拉伸特效和动态障碍物特效

当前我们实现小球弹射时,会先用鼠标点击小球,然后移动鼠标,当松开鼠标时,小球会弹射向鼠标松开的位置。我们按住小球的时间越长,小球弹射的力度就越大,但有一个问题是...

9410
来自专栏我的前端

如何用纯 CSS 创作一个小球上台阶的动画

https://github.com/comehope/front-end-daily-challenges

12320
来自专栏知无涯

PS给照片换背景的小技巧[易学易用]

533170
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

1.8K30

扫码关注云+社区

领取腾讯云代金券