css_盒子模型:块级盒子/内联盒子_显示类型/盒模型border可见性

文章目录

reference

Table of contents

盒模型基础

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

盒模型的各个部分

盒模型的各个部分

CSS中组成一个块级盒子需要:

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

如下图：

Diagram of the box model

标准盒模型

标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。

假设定义了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

Copy to Clipboard

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

Showing the size of the box when the standard box model is being used.

注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

替代（IE）盒模型

替代（IE）盒模型

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

Showing the size of the box when the alternate box model is being used.

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

.box {
  box-sizing: border-box;
}

块级盒子（Block box） 和 内联盒子（Inline box）

block

  • block盒子会表现出以下行为:

    • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
    • 每个盒子都会换行
    • width 和 height 属性可以发挥作用
    • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
      • 除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

inline

  • inline盒子，那么他的行为如下:

    • 盒子不会产生换行。
    • width 和 height 属性将不起作用。
    • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
    • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
      • 用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

内部和外部显示类型/display属性

  • css的box模型有一个外部显示类型，来决定盒子是块级还是内联。

    • 我们通过对盒子display 属性的设置，比如 inline 或者 block (还有inline-block,inline-flex)，来控制盒子的外部显示类型。

  • 同样盒模型还有内部显示类型，它决定了盒子内部元素(容器内部元素)是如何布局的。

  • 默认情况下是按照 正常文档流 布局
  • 也意味着它们(盒子内部元素)和其他块元素以及内联元素一样(如上所述).
  • 但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。
  • 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。
  • 该盒子的所有直接子元素都会成为flex元素，会根据 弹性盒子（Flexbox ）规则进行布局

注: 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 Block and Inline Layout.

当你进一步了解css布局的更多细节的时候，你会了解到 flex， 和其他内部显示类型会用到的值，例如 grid。

正常文档流

  • 块级和内联布局是web上默认的行为 —— 正如上面所述， 它有时候被称为 正常文档流，
  • 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。

外边距折叠

  • 理解外边距的一个关键是外边距折叠的概念。
  • 如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
  • 但是如果有一方是负值,那么效果就是两方margin值的直接加和的结果

盒模型border可见性

  • border属性使用下面列出的值的一个，两个或三个值来指定border属性。
  • 值的顺序无关紧要。

注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。

在这里插入图片描述

example: inline-block 模式

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/block.css">
    <title>Document</title>
</head>
 
<body>
    <p>
        I am a paragraph and this is a <span class="span_inline">span</span> inside that paragraph. A span is an inline element and so does
        not
        respect width and height.
    </p>
<hr>
    <p>
        I am a paragraph and this is a <span class="span_inline_block">span</span> inside that paragraph. A span is an inline element and so does
        not
        respect width and height.
    </p>
</body>
 
</html>
p{
    border: solid 1px;
    padding: 15px;
    background-color: pink;
}
.span_inline {
  /* 外边距、内边距和边框是生效的 
  但它们不会改变其他内容与内联盒子的关系
  容易引起重叠问题
  */
  margin: 20px;
  border: 12px solid blue;
  padding: 20px;
  /* content box:宽度和高度被忽略了 */
  width: 80px;
  height: 50px;
 
  background-color: lightblue;
}
.span_inline_block {
  /* 外边距、内边距和边框是生效的 
  */
  display: inline-block;
  margin: 20px;
  border: 12px solid blue;
  padding: 20px;
  /* content box:宽度和高度被忽略了 */
  width: 80px;
  height: 50px;
 
  background-color: lightblue;
}
hr {
  border-top:dotted 14px;
  margin: 24px;
}

效果对比

在这里插入图片描述

posted @   xuchaoxin1375  阅读(26)  评论(0)  编辑  收藏  举报  
相关博文：
· css_防止溢出_边框/元素水平居中/(响应式设计:媒体查询)适配不同尺寸的不同布局提高网页可读性
· css_flex弹性盒模型/flex布局/flex在线可视化工具
· CSS 盒模型
· 06-CSS中的盒模型
· CSS|盒子模型
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
历史上的今天：
2023-02-19 LA@向量空间
2023-02-19 LA@二次型规范形
点击右上角即可分享
微信分享提示