HTML&CSS 7:CSS盒子

距离2019年

167天

闭上眼睛

好好回想之前的努力

自信会喷涌而出

CSS盒子模型

Part 1

网页上的元素辣么多,我该用什么办法让它们排列整齐、间距合理呢。常干家务的朋友们就容易理解了,用收纳盒呀!

所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一个个的盒子,网页上所展示出来的具体内容,如:文字、图片等都可以理解为内容,是放在盒子里面的东西。这些装着内容的盒子排列在网页上,盒子与盒子存在着一定的间隙,我们称为外边距,每个盒子都有边框,每条边框都可以设置自己的样式,边框与内容之间也可以存在一定的间隙,我们称为内边距。外边距、边框、内边距按顺时针方向又都可以分为上、右、下、左四个部分,注意,这四个部分我们都是可以单独设置其样式的哟!

有图有真相,下图:

由上述可知,盒子由外到内可以列出以下四个属性:

盒子属性

属性说明

Margin(外边距)

盒子与盒子的间距,可以是子元素与父元素,也可以是兄弟元素。

Border(边框)

盒子的边框。

Padding(内边距)

盒子里面的内容与边框之间的距离。

Content(内容)

盒子里放置的具体内容,如:文字、图片等。

♐外边距margin和内边距padding

外边距margin和内边距padding以边框为分界线,它们分四个方向可以分别设置四个不同的值,按顺时针方向分别是上、右、下、左,如下:

内边距:padding-top(上)、padding-right(右)、padding-bottom(下)、padding-left(左)

具体写法有三种,分别如下所示(margin和padding写法类似,以padding为例):

♐Border(边框)

Border(边框)有三个属性值需要设置,分别为边框的宽度(border-width)、边框的样式(border-style)、边框的颜色(border-color)。

♐宽度width和高度height

元素的宽度width和高度height是针对内容而言的,不包括内边距(padding),可参看上面的图示。另外,只有块元素能设置width和height,行内元素无法设置width和height。

示例代码

【运行效果】

上图是实际的运行效果,有点太单薄,加上点注释说明,下图:

【运行效果+说明】

END

请看下节

如果您看完觉得有一点点的收获

请别忘了分享和转发,感谢您的支持

左手程序Z右手诗

关注一下 | 分享技术

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180717G0YAPT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券