CSS盒子(Box)模型入门

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

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

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

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

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

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

盒子模型结构

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

Content (height and width).

Padding.

Border.

Margin.

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

在本文中,我们将使用以下代码并逐渐添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

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

The Content

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

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

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

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

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

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

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

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

CSS

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

结果如下图:

The Padding

接下来,我们将在我们的框中添加一些填充。

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

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

CSS

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

结果如图:

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

The Border

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

现在我们添加一个边框。

CSS

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

The Margin

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

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

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
  height: 200px;
  width: 200px;
  background-color: hotpink;
  color: #fff;
  padding: 10px;
  border: solid 3px black;
  margin: 0
}

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

现在,添加margin

CSS

.box {
  margin: 20px;
}

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

总结

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

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

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

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

希望这能帮助你学到一些新的东西或者刷新你的记忆。

原文发布于微信公众号 - 程序你好(codinghello)

原文发表时间:2018-06-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小李刀刀的专栏

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪...

3386
来自专栏偏前端工程师的驿站

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

3198
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

2186
来自专栏web前端教室

20170108_先行者周日群视频课程——文字版

各位同学们大家好,又到周日了。因为1月1号是新年放假,所以今天也可以算是2017年的第一个周日,不知各位都对2017年有什么安排,而2016年又有哪些收获。我只...

2056
来自专栏天天

框架设计续集(三)

1053
来自专栏Jack的Android之旅

自定义天气显示温度变化的LinearChart控件

这次发表的是前几个月搞定的一个自定义控件,那时自己在写一个小的查看天气的软件,在这过程中就涉及了显示天气变化的折线图,一开始想用一些画图框架来解决问题,不过考虑...

2771
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

2882
来自专栏Coco的专栏

奇妙的 CSS shapes(CSS图形)

2555
来自专栏mySoul

css3动画

此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

1374
来自专栏Google Dart

Flutte部件目录-基本部件(二) 顶

支持以下图像格式:JPEG,PNG,GIF,GIF动画,WebP,WebP动画,BMP和WBMP

1712

扫码关注云+社区

领取腾讯云代金券