CSS框模型的基本演练

控制网站设计和功能的最好方法之一是CSS．< / p >

CSS -或级联样式表-使您能够对您的网页布局和这些页面上的元素进行样式更改，从而最终改善您的网站的外观和感觉。在你这么做之前，你需要首先理解一个最基本的原则网页设计: CSS框模型。< / p >

什么是框模型在CSS?

CSS中的框模型是一组规则，它决定了你的网页如何在互联网上呈现。在这个模型中，为HTML元素生成一个矩形框。每个元素都根据其尺寸、类型、定位、与其他元素的关系以及视口大小等外部因素进行布局。该框由内容、填充、边框和边距组成。< / p >< / div >< / div >< / div >

下面的例子演示了CSS框模型的每一层。我们将更深入地讨论这些层下面．< / p >

显示元素周围的padding, border和margin的CSS Box Model插图

图片来源

这意味着你所看到的任何网页实际上都是由包裹在矩形框中的元素组成的，并按照彼此之间的关系进行排列。这些元素可以在旁边、上面、下面或彼此内部存在，这取决于它们的元素类型。< / p >

HTML元素有两种类型:块级元素和内联元素。让我们仔细看看下面的每一个。< / p >

块级元素

默认情况下，块级元素从一个新行开始，并占据100%的可用空间——这可能是视口或其容器的全宽度，如果它在另一个元素。由于默认情况下，块级元素从新行开始，因此会中断文档的流程。< / p >

如前所述，块级元素可以包含其他元素，包括内联元素和其他块级元素。例如，一个div元素可以包含一个标题、段落或另一个div元素。< / p >

将padding、border和margin属性应用到块级元素后，其他元素将被迫离开元素周围的框。因此，块级元素比内联元素占用更多的空间，因此可以创建更大的结构。< / p >

当然，这些元素的宽度和高度可以在CSS中指定，以占用更少的空间。< / p >

块级元素包括以下:< p >, < h1 >, < h2 >, < h3 >, < h4 >, < h5 >, <编辑>,< ol >, < ul >, < pre >, <地址>,< blockquote >, < dl >, < div >, <自定义字段>,<形式>,<人力资源>,< nonscript >,和<表>。< / p >

行内元素

默认情况下，内联元素不会以新行开始，也不会占据视口的全部宽度。事实上，宽度和高度属性并不适用。与块级元素不同，内联元素不会中断文档流。< / p >

内联元素可以包含其他内联元素和数据，但不能包含块级元素。例如，段落元素可以包含强调元素，但不能包含标题元素。< / p >

如果padding、border和margin属性是垂直应用的，那么其他内联框将不会被强制离开元素周围的框。但是，如果padding、border和margin属性水平应用，则其他行内元素将被迫离开元素周围的框。< / p >

内联级别元素包括、、、、、、、、、、、< kbdbb11、、、 -等等。< / p >

下面是一个有用的例子，说明了内联和块级元素之间的关键区别。这个示例使用引导CSS显示内联按钮和块级按钮。< / p >

图片来源

CSS框模型示例现在，让我们通过这些CSS框模型示例来研究实际的CSS框模型。每个例子都关注盒子的特定层，从内到外移动。我们将从内容区域开始。< / p > 内容区域的例子最内层的矩形，称为内容区域，可能包含文本或其他可视元素。< / p > 它的尺寸是内容的宽度和高度。指定后，宽度和高度属性确定内容框的内容边缘或周长。通常，宽度和高度没有指定，所以呈现的内容决定了内容的边缘。换句话说，内容区域的宽度和容纳内容所需要的宽度是一样的，内容可能只有一个单词。如果元素是块元素，那么内容边缘也可以用min-width，max-width，最小高度,max-height属性。< / p > 让我们看一个标准CSS框模型的例子。< / p > 在标准的CSS框模型中，高度和宽度属性被指定。这决定了内容区域的大小。如果padding、border和margin属性也被指定，则必须将它们添加到宽度和高度以计算元素的总大小。< / p > 假设您指定内容宽度为400px，并添加30px的padding, 10px的border和10px的margin。然后方框的总宽度是500。通过添加内容宽度、padding-left和padding-right、border-left和border-right、margin-left和margin-right(400 + 30 + 30 + 10 + 10 + 10 + 10 + 10 + 10)，可以得到这个总数。盒子的总高度是250。你可以通过添加content-height, padding-top和padding-bottom, border-top和border-bottom, margin-top和margin-bottom(150 + 30 + 30 + 10 + 10 + 10 + 10 + 10 + 10)来得到它。< / p > CSS:< / p > div { background - color: # DDDDDD; 宽度:400 px; 身高:150 px; 填充:30 px; border: 10px solid #FF00FF; 保证金:10 px; ｝ HTML:< / p > The Standard CSS Box Model 在标准的CSS框模型中，指定了height和width属性。这决定了内容区域的大小。如果padding, border和margin属性也被指定，那么它们将被添加到width和height中，以计算元素的总大小这个文本构成了框的内容层。因为我添加了30px的padding, 10px的border和10px的margin，所以盒子的总宽度是500。您可以通过添加内容宽度、padding-left和padding-right、border-left和border-right、margin-left和margin-right(400 + 30 + 30 + 10 + 10 + 10 + 10 + 10 + 10 + 10)来实现这一点。盒子的总高度是250。你可以通过添加content-height, padding-top和padding-bottom, border-top和border-bottom, margin-top和margin-bottom(150 + 30 + 30 + 10 + 10 + 10 + 10 + 10 + 10)来得到它。< / div > 结果:< / p > 图片来源由于通过添加边框、填充和边距来计算框的实际大小非常耗时，所以可以使用替代框模型。要“打开”这个模型，使用box-sizing属性并将其设置为“border-box”。这将告诉浏览器渲染框(包括除了边距以外的所有内容)为您设置的大小。我们将在下面的例子中使用这个模型。< / p > 填充例子填充元素的边框和内容之间的空格。填充是网页设计中的一个重要元素，因为它有助于使内容更加可见和可读。< / p > 一个元素的padding可以用以下属性定义:padding-top，padding-bottom，padding-left，padding-right，或简称性质填充．< / p > 如果您想在内容区域的所有四个边都添加相同数量的padding，那么您可以用一个值设置速记padding属性。如果你想设置不同数量的填充，那么你可以使用长形式的方法。让我们在下面的例子中使用这两种方法。< / p > HTML:< / p > The Alternative CSS Box Model 在替代的CSS框模型中，定义的宽度或高度属性不仅会决定内容区域的大小，还会决定框的边框、填充和内容区域的大小。如果指定了，仍然需要添加空白来计算元素的总大小。< / p > 因为我已经设置了box-sizing属性为border-box，元素的总宽度将是320px(设置的宽度+ margin-left和margin-right)。由于没有明确定义div的高度，因此高度是最顶层行框的顶部和最底层行框的底部之间的距离。换句话说，它是呈现文本的高度。 < / div > >一个应用了几乎相同CSS的div -除了padding属性。对于这个div，对其四个边应用不同的填充，而不是对所有边应用相等的填充。 < / div > CSS:< / p > #速记{ background - color: # DDDDDD; box-sizing: border-box; 宽度:300 px; 填充:30 px; border: 10px solid #FF00FF; 保证金:10 px; ｝ # longform { background - color: # DDDDDD; box-sizing: border-box; 宽度:300 px; padding-top: 20 px; padding-bottom: 10 px; padding-left: 80 px; padding-right: 60 px; border: 10px solid #FF00FF; 保证金:10 px; ｝结果:< / p > 图片来源边界的例子 border属性允许我们在内容填充区域周围添加一条线并设置样式。粗细、颜色、这条线的样式都可以由边框宽度，边框颜色,边框样式属性，或者可以使用简写边境属性来定义所有这三个。边框样式的值包括实线、点线、虚线、双线、槽线、脊线和无。< / p > 边框区域的尺寸是边框的宽度和边框的高度。指定后，宽度和高度属性确定边界区域的周长。如果box-sizing属性被设置为border-box，你也可以用min-width, max-width, min-height和max-height来定义边框大小。< / p > 让我们在下面的例子中使用max-width和min-height属性。我们还将使用尽可能多的属性和值来显示边界区域的多功能性。< / p > CSS:< / p > h2 { box-sizing: border-box; max-width: 300 px; border: 2px solid #A00081; 填充:5 px; ｝ p { box-sizing: border-box; 最小高度:100 px; border: 2px solid #F00081; 填充:5 px; ｝引用{ background - color: # DDDDDD; box-sizing: border-box; 宽度:300 px; 填充:30 px; Border-right: 2px虚线#000000; border-left: 10px槽#8866AA; 边框-顶部:5px虚线#AAAAAA; border-bottom: 20px solid #2266AA; 保证金:10 px; ｝ HTML:< / p > . color = # 0000ff > . color = # 0000ff > . color = # 0000ff 在这个CSS框模型中，定义的max-width约束标题的内容宽度，定义的min-height约束框的高度，使其高于呈现的文本使用CSS，我可以把这个blockquote的边框设置为唯一的。border-right、border-left、border-top和border-bottom属性都定义了三个值:第一个定义了宽度，第二个定义了样式，第三个定义了颜色。 < /引用> 结果:< / p > 图片来源利润的例子空白是将元素与其相邻元素分隔开的空白，也是CSS框模型的最外层。它的尺寸是边框宽度和边框高度。< / p > 它的大小可以通过以下属性来定义margin-left，margin-right，margin-top，margin-bottom属性或简写保证金财产。< / p > 如果使用了速记属性，并且只定义了一个值，那么它将应用于元素的所有方面。如果定义了两个值，则第一个值表示上下边界，第二个值表示左右边界。如果定义了三个值，则第一个值表示顶部边距，第二个值表示左右边距，第四个值表示底部边距。如果定义了四个值，它们分别代表顶部、右侧、底部和左侧。< / p > 在我们深入示例之前，您可能会意识到边距和填充看起来很相似。如果你对某个元素或布局的正确选择感到困惑，请考虑以下内容CSS空白和填充之间的关键区别：< / p > 边距是边界区域外的空间，而填充是边界区域内的空间。边距背景总是透明的，而框的填充区域的背景是由元素的background属性指定的。当增加时，边距将增加元素和任何相邻元素之间的间隙。当填充增加时，填充会增加元素的大小。在CSS中，两个或多个框的相邻页边距可以合并成一个“折叠”页边距。虽然边缘区域可以垂直折叠，填充区域不能。让我们看一个具有折叠边距的CSS框模型的例子。< / p > 比如说一个标题和段落是互相叠在一起的。标题的底部边界是60px，段落的顶部边界是40px。为了计算出标题和段落之间的垂直边距，您可能想把两个边距加在一起，使总边距为100px。它看起来就像这样:< / p > 图片来源然而，实际的垂直边距只有60px。为什么?因为这两个边际垂直坍塌。以下是它在前端的实际外观:< / p > 图片来源为你的网站使用CSS框模型 CSS框模型是网站开发．理解这个模型将使您能够更好地将元素与其他元素对齐，并创建更复杂的布局。< / p > 最初发布于2020年11月17日上午7:00:00，更新于2020年11月17日< / p > 主题:< / p >引导和CSS 别忘了分享这篇文章!