1. 首页
  2. IT资讯

前端开发入门 3:盒模型

学习虽然是讲究方式的,但大多数人学不会东西的原因只有一个:没有在学。 如果你满腔热血但没有在学,请你自重。如果你需要更多的时间来消化前两个篇目,没有关系,你可以按照你自己喜欢的节奏来进行。如果你对前面所讲的内容已经大体感到舒适,并且做过一定的练习,那么从本篇开始,我们将逐渐接触各种进阶的概念与技巧。 这些概念你也可以自行查阅其它的文章、教程来学习或巩固。这慢慢地可能会有一点点挑战性,学习一项技术终归不是轻而易举的事,你需要保持耐心。

使用HTML和CSS编写一个页面时,其中比较复杂的一个方面是布局。所谓布局,简单地说,就是处理一个元素的尺寸和位置这两件事、以及各个元素之间尺寸与位置上的关系。比如说,如果你是在桌面端阅读这篇文章的,那么你可以观察到豆瓣的日记详情页是左右两栏的一个布局,主内容在左侧,占据更大的区域,它和右侧的边栏之间设置有一个合适的距离。这些都属于布局性的工作。 这里我们首先要学习的是尺寸方面的问题。

盒模型概要

在CSS里,关于元素的尺寸有一个核心概念,叫做盒模型(Box Model)。

它是这样一个矩形盒子:

前端开发入门 3:盒模型

页面上的每个元素都是一个矩形盒子,在编写CSS的时候,我们会把这些矩形盒子抽象成这样一种模型:

前端开发入门 3:盒模型

果你仔细地对照上面的两张图,你应该能够“望文生义”地观察到一些东西。

在这两张图中,蓝色的区域称作一个元素的内容区。正常情况下,一个元素的内容,例如文字和图片,都会处在这个内容区内。在默认的盒模型里,我们使用宽(`width`)、高(`height`)来定义一个元素的内容区。

内容区往外,绿色的区域,是一个元素的“补白”,称作内边距(`padding`)。内边距又可分为上、右、下、左四个部分,你可以分别给它们设置不同的值,你也可以只为某个部分设值。 再往外,黄色的区域,是一个元素的边框(`border`)。同内边距一样,边框也可分作四个部分。给一个元素设置边框时,除了尺寸,还可以指定它的类型和颜色。 最外层,是一个元素的外边距(`margin`),同样分作四个部分。与前三者不同的是,外边距根本上不是一个元素的“实在”,它仅仅表示这个元素和其它元素之间的距离。在某些情况下,它会有一些特殊的表现。

图中豆瓣电影的“正在热映”标题,其盒模型的CSS代码为:

h2 {   width: 590px;   height: 23px;   padding-bottom: 10px;   border-bottom: 1px solid #eaeaea;   margin-bottom: 18px; }

很多初学者不重视`padding`和`margin`的区别。甚至部分前端开发人员,写了一年代码了,`padding`和`margin`还经常是按“感觉”来走的,想到一出是一出,爱用哪个用哪个。这很多时候能蒙混过去,但碰到背景之类的东西时就出问题了。 我们再强调一遍:`padding`是“补白”,是元素实体的一部分,是元素真实占据的区域之一;而`margin`表示的是元素和其它元素间的距离与间隔,它实际上是一个空荡荡的区域。

元素的背景

当我们给一个元素设置背景色或背景图片时,默认情况下,整个背景会一直覆盖到元素的边框区。你可以点击这里查看示例。

因为边框本身通常有颜色,这种情况下延伸到边框区的背景会被边框所遮盖,很多人因此不知道边框区是有背景的。只要把边框的颜色设置为透明、或者改变边框的类型,我们就可以很清楚地观察到边框区的背景。你可以点击这里查看示例。

使用`border-box`

上文中介绍盒模型的内容区时,我们说了这样一句话:在默认的盒模型里,我们使用宽、高来定义一个元素的内容区。 这是因为,现在的CSS里实际上有两种盒模型。如果你觉得这有点复杂,不用担心,这两种盒模型之间只有一个区别,而且绝绝大多数时候我们都只会使用其中一种模型。

我们使用`box-sizing`这个属性来指定元素的盒模型类型。它的默认值是`content-box`,另一个可选的值是`border-box`。 许多人认为`content-box`是CSS规范所犯的一个错误,在这种盒模型下,元素的`width`和`height`只表示元素的内容区,而不包括`padding`和`border`;但实际上,元素的“实体”是包括`padding`和`border`在内的,我们通常想要设置整个元素“实体”的高宽,而不是内容区的高宽。因此在实践上,`content-box`往往让元素的尺寸变得难以控制。 好在后来我们有了`border-box`。`border-box`与`content-box`的区别在于,当一个元素的盒模型设置为`border-box`时,元素的`width`和`height`会把`padding`以及`border`包含在内。

假设某个元素的`width`和`height`都为100,这时候我们给它四个方向都设置10像素的`padding`以及5像素的`border`。 如果是`content-box`,那么元素实体的大小将是130 x 130(5 + 10 + 100 + 10 + 5)。 而如果是`border-box`,元素实体的大小将一直保持为100 x 100。变化的是它的内容区,内容区的大小将是70 x 70(100 – 5 – 10 – 10 – 5)。 你可以点击这里查看示例。

如果你觉得这一时有些难以消化,没关系,你只要大概有个印象就好了。随着练习的增多,你自然而然会对盒模型有更多的体会。 现阶段,我建议你永远使用`border-box`,养成在`border-box`的模型下思考元素尺寸的习惯。等以后接触到更复杂的场景时,可能会有个别地方用`content-box`更合适,在那个地方单独再做调整就可以。但那样的情况也非常非常少见。

因为`border-box`不是默认的盒模型,你可以在你的每个样式表一开始都先加上这句代码:

* {   box-sizing: border-box; }

块元素和行元素

CSS中,元素有“块”和“行”的区别。以后我们将用专门的篇幅来阐述与之相关的CSS属性和值。这里我们只是先对它们做一个简单的介绍,因为一个元素到底是“块”还是“行”,会影响到其盒模型的表现。

块元素和行元素最直观、最主要的区别,是块元素会引发“断行”。一个元素如果是块元素,那么在没有其它因素干扰的情况下,它总是会“自占一行”,不会有其它任何元素出现在它的左侧或右侧。行元素反之,在空间足够的情况下,所有的行元素总是会依次排列在同一行。

一个块元素,默认会占据父元素的内容区的全宽。也就是说,水平方向上,它会把所有可用的空间都撑满。行元素的宽则是由它的内容决定的,内容有多宽,元素就被撑到多宽。 但不管是块元素还是行元素,默认情况下,其高度都是由内容的高度来撑开的,没有内容就没有高度。 我们可以通过设置`width`和`height`来调整块元素的高宽,但这对行元素则不会产生任何效果。

此外,给行元素设置垂直方向(即上下)的`padding`、`border`、`margin`,也都是无效的。但这里的“无效”更微妙一些,事实上,如果你给元素设置背景色或边框颜色,还是能够看见元素垂直方向上的内边距与边框的。但这些垂直的内边距与边框,会表现得好像它们不存在一样,周边的元素会无视它们。 通常我们并不会利用到行元素的这个特性,一般简单地理解成无效就可以,不太需要深究。如果好奇的话,可以点击这里查看示例。

根据你目前的实际水平,你可能马上就看懂这些内容了,也可能一下子有点混乱。无论如何,只要你多加练习、勤写代码,这些知识最后都会变成你的直觉。它是我们布局一个页面的基础。 之后我们将继续学习页面布局的其它知识。祝你提高水平,有任何问题欢迎找我交流。

* “盒模型”,文中本作“框模型”。经网友建议,改采用“盒模型”这个翻译。

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362

原文始发于:前端开发入门 3:盒模型

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/22228.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code