CSS盒状模型
盒状模型是CSS中最重要的部分之一。让我们来看看它是如何工作的。
通过
-
1月26日，22 - Web Dev Zone -教程
喜欢 (3)
评论
保存
鸣叫
2.47K浏览次数
加入DZone社区，获得完整的会员体验。
CSS盒状模型是一个在CSS中随处可见的术语，但它可能是你在CSS中所能知道的最基本的东西。简单地说，盒子模型决定了页面上任何对象的大小、边距和填充。它还指的是CSS处理 "内联 "和 "块 "内容的奇怪方式。
盒子模型
在HTML中，每个元素都会创建一个盒子。其中一些元素，如span 和p 是内联的，这意味着它们与文本保持一致，而不是页面的结构元素。
其他元素，如div 是大型的 "块 "元素。每个元素都有不同的类型，所以在学习HTML和CSS时，熟悉这些元素是很有用的。
块状元素有一个固定的宽度和高度，有时会横跨整个页面，而内联元素是在文本行中的，这意味着它们有内容漂浮在旁边。另一种类型的块是内联块，从字面上看，它是一个具有固定宽度和高度的块，位于内联环境中，比如文本中。
无论一个元素是内联还是块状，所有元素都有一些核心的 "框 "属性。这些属性在下面的图表中显示。
- margin是指一个HTML元素外面（周围）的空间。
- border是指元素周围的线条，包括padding和宽度/高度。
- padding是文本和元素边缘的空间。
- 宽度和高度只指其中的空间，不包括padding。
盒状模型属性
CSS盒状模型有5个主要属性，所有这些属性都可以单独定义。下面是一个应用了所有CSS盒状模型属性的div。
CSS
div {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 5px;
}
对于padding 和margin ，我们也可以在同一行中分别指代每一面。在CSS中，当我们引用每个面时，顺序是上、右、下、左。请看下面的例子。
CSS
div {
/* top side padding: 10px
right side padding: 20px
bottom side padding: 5px
left side padding: 10px
*/
padding: 10px 20px 5px 10px;
}
我们也可以通过使用属性padding-top,padding-right,padding-bottom 和padding-left 来直接呼出这些。margin也存在完全相同的属性，即
CSS
div {
margin-left: 20px;
}
快速案例分析
让我们再思考一下盒子模型的工作原理。我们创建一个新的div ，并给它一个40px的宽度，20px的padding和2px的border，如下图所示。我们还添加了4px的边距。
CSS
div {
width: 40px;
padding: 20px;
border: 2px solid black;
margin: 4px;
}
这个盒子有多大？
由于宽度是40px，填充是20px，边框是2px，所以页面上呈现的总宽度实际上是84px!
再解释一下，图中所示的宽度是不包括padding的宽度。既然我们说padding 是20px，那么CSS就在盒子的所有边上加20px。这意味着左边是20px，右边是20px，总共是40px。当我们把它加到我们的宽度上时，我们得到了80px。
最后，我们在整个div周围有2px的边框，也就是左边2px，右边2px。结果是40px+40px+4px，即84px。
显示
CSS还有一个叫做display的属性，除其他外，它可以让你隐藏一个项目。显示会影响盒子模型，通过定义一个对象是block 还是inline 。为了盒子模型的目的，让我们考虑一下几个关键属性。
- none- 该项目被隐藏。
- inline- 该项目是内联的，即与文本内联，它不能被添加宽度或高度。
- block- 该项目是块状的，也就是说，它占据了整个宽度并在新的一行开始。
- inline-block- 该项目与文本同列，但可以在CSS中为其添加宽度和高度。
- contents- 该项目被显示，就像它的容器不存在一样，并被添加到上面的容器中。
CSS盒状模型显示属性的一个例子
让我们来看看一个快速的例子。下面的代码是一个span，它被设置为块状显示。通常，span是一个内联元素，所以这一行CSS将改变它在页面上的行为。注意，在默认情况下，该元素是内联的，宽度和高度没有被应用。
CSS
span {
display: block;
width: 100px;
height: 30px;
padding: 10px;
}
框的大小
CSS分别管理填充、宽度和边框的方式一直是CSS社区的一个争论点。因此，我们创建了一个属性来解决这个问题，称为box-sizing 。框的大小让我们可以覆盖这一默认行为。
让我们想一想，我们的40px宽度的盒子最后变成了84px宽。我们可以将框的大小设置为。
- border-box: 宽度包括边框和padding。现在我们的总宽度将是40px，即使有填充和边界。
- content-box：默认行为，宽度不包括边框和padding。现在我们的总宽度将是84px。
现在我们有了更多的控制权，可以肯定地设置我们的宽度，它们会按照我们期望的那样显示在页面上。
边框
边框是我们可以影响盒子模型的另一种方式。边框可以定义为环绕整个元素，也可以定义在特定的一侧，使用border-top 、border-right 、border-bottom 或border-left 。下面是一个例子。
CSS
div {
border: 1px solid red;
border-top: 2px solid black;
}
一个边框属性也可以被分割成不同的行。1px solid red ，可以写成。
CSS
div {
border-width: 1px;
border-color: red;
border-style: solid;
}
同样地，我们可以将这些应用于单个侧面，即：border-top-width,border-top-color 或border-top-style 用于顶面。我们可以对任何一面这样做。
颜色接受任何颜色，你可以在颜色部分了解更多关于颜色的信息。border-style 属性接受以下值。无、隐藏、点、虚线、实线、双线、槽、脊、嵌入、外置
边框半径
最后，border-radius可以让我们为我们的div添加圆形的边缘。注意，这并不影响盒子模型，所以元素的大小保持不变，但它确实影响了它的美感。它接受任何单位--但我在下面使用像素作为例子。单位越大，四舍五入就越大。下面是一个关于它的外观的代码例子。
CSS
div {
border-radius: 20px;
}
总结
这就是你需要了解的关于盒子模型的一切。如果你对测试你的知识感兴趣，我还做了一个小测验，你可以在这里查看。谢谢你的阅读。
主题。
css, css3, web开发, 教程, 盒子模型
经Johnny Simpson授权发表于DZone，DZone MVB。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
