无论你是谁 无论你在哪儿

0%

盒子模型介绍

熟练掌握Div和CSS的布局(layout)方法,首先要对盒模型(Box Model)有足够的了解。盒子模型是CSS布局网页时非常重要的概念,只有很好地掌握了盒子模型以及其中每个元素的使用方法,才能熟练使用css的定位方法和技巧。

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。

每个盒子由四个部分(或称区域)组成,其效用由它们各自的边界(Edge)所定义。如图,与盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

CSS 盒子模型(Box Model)

不同部分的说明:

内容区域 content area ,由内容边界限制,容纳着元素的“真实”内容,例如文本、图像或是一个视频播放器。它的尺寸为内容宽度(或称 content-box 宽度)和内容高度(或称 content-box 高度)。它通常含有一个背景颜色(默认颜色为透明)或背景图像。

如果 box-sizing 为 content-box(默认),则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height,和 max-height 控制。

内边距区域 padding area 由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left,和简写属性 padding 控制。

边框区域 border area 由边框边界限制,扩展自内边距区域,是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box,那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height,和 max-height 属性控制。假如框盒上设有背景(background-color 或 background-image),背景将会一直延伸至边框的外沿(默认为在边框下层延伸,边框会盖在背景上)。此默认表现可通过 CSS 属性 background-clip 来改变。

外边距区域 margin area 由外边距边界限制,用空白区域扩展边框区域,以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left,和简写属性 margin 控制。在发生外边距合并的情况下,由于盒之间共享外边距,外边距不容易弄清楚。

1
2
3
4
5
6
7
/*外盒尺寸计算(元素空间尺寸)*/
Box空间高度 = content height + padding + border + margin
Box 空间宽度 = content width + padding + border + margin

/*内盒尺寸计算(元素实际大小)*/
Box Height = content height + padding + border (Height为内容高度)
Box Width = content width + padding + border (Width为内容宽度)

提示:在盒模型中,外边距可以是负值,而且在很多情况下都要使用负值的外边距。另外 除可替换元素外,对于行内元素来说,尽管内容周围存在内边距与边框,但其占用空间(每一行文字的高度)则由 line-height 属性决定,即使边框和内边距仍会显示在内容周围。

小编推荐:程序员导航

作为一名码农,随着平时工作的需要,这里收集了国内外很多优秀网站,这其中包括在线工具、在线运行、免费接口、在线资源、在线学习、技术论坛、技术博客等等,满足一般程序员日常需求。

-------------本文结束感谢您的阅读-------------