分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

CSS盒子(Box)模型入门

  • 时间:2018-06-28 22:14 作者:程序你好 来源:程序你好 阅读:386
  • 扫一扫,手机访问
摘要:无论您是CSS的新手还是经验丰富的老手,理解和了解box模型都很重要。让我们更好地理解它。每个初学者都应该从基础开始。以CSS为例,基础是学习Box模型。在继续学习其余CSS概念之前,您应该首先掌握它!盒子(Box)模型是CSS的基本元素。它的确会让初学者感到困惑,所以现在是时候纠正错误了。在这里,
CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,理解和了解box模型都很重要。让我们更好地理解它。

每个初学者都应该从基础开始。以CSS为例,基础是学习Box模型。在继续学习其余CSS概念之前,您应该首先掌握它!

盒子(Box)模型是CSS的基本元素。

它的确会让初学者感到困惑,所以现在是时候纠正错误了。在这里,您将理解box模型的所有基本元素以及它们是如何用的。

在深入研究之前,每个人都需要理解web设计中的每个元素都是一个矩形框。您可可以已经听过很屡次了,但是这是每个开发人员都应该注意的一个重要概念。

现在,让我们来解释一下神秘的盒子模型!

盒子模型结构

如上所述,box模型的结构包括:

Content (height and width).

Padding.

Border.

Margin.

这些是浏览器呈现框模型所需的所有元素。值得庆幸的是,有了CSS,我们能单独地控制它们。让我们来看看。

在本文中,我们将用以下代码并逐步增加到其中。

HTML

Lorem ipsum dolor amet whatever woke cronut, farm-to-table church-key tousled edison bulb.

CSS

.box { background-color: hotpink; color: #fff;}

The Content

Content非常清晰。它是具备特定宽度和高度的元素的内容。能用CSS属性的高度和宽度设置固定的高度和宽度,也能由内容本身决定。

CSS盒子(Box)模型入门

现在,有一件事让人有点困惑,那就是用内联或者块级元素。

用内联和块级元素(Using Inline and Block Level Elements

为了刷新您的内存,内联元素和块元素之间的区别在于块元素占使用了容器宽度的100%,而内联元素只占使用了内容需要的空间量。

在用内联元素时,不可可以为该元素设置固定的宽度或者高度,由于元素没有预先确定的宽度和高度(由于宽度和高度由内容决定)。这能通过将元素转换为块元从来克服。

与内联元素不同,用块级元素时,能轻松地为其设置固定的宽度或者高度。因为在默认情况下,块级元素占容器宽度的100%,我们能通过设置一个固定的宽度轻松覆盖它。

您还能将元素转换为inline-block。当用inline-block时,元素具备内联元素的行为(只占使用内容的空间),但是您能像用块元素那样操作它。

现在,当我们有一个块级元素时,我们能给它一个宽度和高度。

CSS

.box { height: 200px; width: 200px; background-color: hotpink; color: #fff;}

结果如下图:

CSS盒子(Box)模型入门

The Padding

接下来,我们将在我们的框中增加少量填充。

padding定义了内容和框的边缘之间的空间。

CSS盒子(Box)模型入门

让我们看看它在我们的例子中的作使用

CSS

.box { height: 200px; width: 200px; background-color: hotpink; color: #fff; padding: 10px;}

结果如图:

CSS盒子(Box)模型入门

在图像中,我们看到padding如何影响框的整体外观。框的内容和四边都有10px的空间。我们也能向四面八方单独增加padding,用padding-top padding-bottom,padding-left padding-right。

The Border

由于我们是从内到外,下一步就是定义border。border围绕着内容,您不必用它,但它依然存在。这意味着border的宽度为0。

CSS盒子(Box)模型入门

现在我们增加一个边框。

CSS

.box { height: 200px; width: 200px; background-color: hotpink; color: #fff; padding: 10px; border: solid 3px black;}
CSS盒子(Box)模型入门

The Margin

框模型的最后一个方面是margin。正如你们所知道的,margin是border外的空间。它是元素之间的空间。

CSS盒子(Box)模型入门

在实际示例中演示这一点的最佳方式是向您展现两个元素是如何放置的,以及如何用和不用margin边距。

HTML

CSS

.box { height: 200px; width: 200px; background-color: hotpink; color: #fff; padding: 10px; border: solid 3px black; margin: 0}
CSS盒子(Box)模型入门

在这个例子中,我们看到,没有边距,两个元素是如何结合在一起的,它们之间没有空间。

现在,增加margin

CSS

.box { margin: 20px;}
CSS盒子(Box)模型入门

现在,这看起来更好。我们在Box之间添加了少量空间。我们还能用margin - top、margin - bottom、margin - left或者margin - right来单独增加元素的每一侧上的空间。

总结

恭喜,你终于完成了这篇文章!那么,我们学到了什么?

网页上的每个元素基本上都是一个框。

box模型的方面是content, padding, border, and margin.。

用内联元素时,不可以为该元素设置固定的宽度或者高度,而用块和内联块元素则能。

希望这可以帮助你学到少量新的东西或者者刷新你的记忆。

CSS盒子(Box)模型入门

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部