首页
学习
活动
专区
工具
TVP
发布

CSS盒子模型

盒子模型又叫做框模型(W3School里的说法就是“框模型”),它就像我们平时常见的快递,商家会把发给我们的货品收纳到一个盒子里。当然,CSS中的盒子除了内容,还具有一些能展现在屏幕上的其他属性,如内边距、外边距等。从W3School教程里面copy 了一张图,能帮助你很快知道这些属性的含义。

盒子模型的调用方法和前面提到的其他内容的调用相同,均使用合适的选择器即可。在这篇文章中,我会引导大家用盒子模型制作出一个模拟优设网的展示页面(对于设计师来说可以把你的作品更好地展现出来哦):

01

盒子尺寸

就像我们在纸上画出一个盒子一样,盒子模型的尺寸由宽度width 和高度height 决定,例如呈现一个278px宽 * 232.5px高的白色盒子,为了明显一点,我将背景设置为#f2f2f2。代码如下:

效果就是这样,是当初“素颜”的模样。因为没有设定边距,所以内容会贴着盒子左对齐:

定义固定宽高的盒子很简单,但会发现当内容巨长时,盒子会放不下,怎么办呢?——没关系,我们可以定义一个最小高度,先来看看效果。左边是固定长度的盒子,超出的内容会溢出盒子;右边是定义最小长度的盒子,它会把超出的内容包括在内:

也就是说盒子的原定高度如果装不下内容了,盒子就会根据内容的长度自适应,只要把代码中的 height 改为min-height,即:

与之对应,还可以用max-height来定义最长高度,效果就是在内容少于盒子最大容量时会随内容改变高度:

代码为:

02

内容(content)

内容就是装在盒子里的东西,可以是文字,也可以是图片,甚至还可以是另一个盒子。在上面的盒子里加上图片的效果是:

你需要在块里面加上img 标签,并且限定图片的尺寸。因为我的图片原尺寸是1920*1080px,等比例缩小之后设为300*168.75px,在下面加上二级标题的配文:

03

边框(border)

边框有三种属性:风格(style)、宽度(width)和颜色(color)。说明一下style 属性,它包括:solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)、groove(凹槽)、ridge(凸槽)、inset(凹边)以及outset(凸边),简单演示一下其中4种看看效果,其他类型可以自己试试:

实际网页中边框都不会如此花哨,如果四边均保持一致,可放在一行代码中,属性顺序可调换。例如,我想在作品展示的盒子上加上1px 的灰色边框,代码及相应结果如下:

04

内边距(padding)

内边距指的是内容与边框之间的间距,虽说叫这个名,但是padding 只能加在内容上。内边距根据方向分为上(padding-top)、下(padding-bottom)、左(padding-left)、右(padding-right)。可以分开写成四行代码,也可以按照上右下左的顺序写成一行,例如:

如果上下、左右分别相同,就可以只写两个数据,第一个表示上下间距,第二个是左右间距:

注意蓝色背景部分,我把图片和配文写在了一个块元素里面,这样才能保证是对这个整体设置内边距,不然图片和文字之间的间距就会变大。效果如下图:

同理,假设上左下右的内边距一样,简写为一个数据即可。

05

外边距(margin)

和内边距不同,margin 指的是盒子与盒子之间的间距,可以是并列关系,也可以是父子关系。我在创建一个同样的作品展示盒子,如果不设置margin,会发现它们黏在了一起:

这时给box1 设置一个margin,顺序同padding 为上左下右,结果是终于把两个拆散了。

特别说明一点,两个盒子排列在一起时会发生外边距合并,也就是说,相邻的盒子最近的那个间距实际上是其中外边距较大的那一个。这句话有点绕,举个例子:现在我把第二排的作品所在的盒子上边距设为50px,则上下两个之间的间距实际上就是50px,而不是60px(50+10px)。父子关系的盒子也同样遵循这个原则。

06

总结

一起回顾一下盒子模型的要点:

有四个主要属性:content、border、padding、margin,它们代表的都是什么意思呢?

不论边框还是内边距、边界都遵循着上右下左的顺时针顺序。

接下来可以动手试试自己写出一个展示作品的CSS 文件,当然,如果你开始做了,会发现还没有解决把几个作品放在一排和呈现浏览数、点赞数的问题,本人正在寻找真相中,且听下回分解!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180805G08I9M00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券