理解不一样的padding/border/margin

前言

css中每一个元素都会生成一个矩形框，也就是元素框，在正常的节点元素摆放的过程中，如果按照默认的规则来摆放的话，则会按照其占据的空间，按照流式布局方面进行一个一个来摆放。
网上已遍布同质化的学习知识较多，这边仅整理关于额外同类型的知识点的重复说明，这里想整理一个关于自己在学习过程中的不一样的见解！！！

盒子模型

直接上图，一图胜千言

复值的规则

像padding、border、margin这些属性，一般遵循上、右、下、左的顺序来摆放，如果有重复的值的定义的话，可以采取节省值的方式，比如只有一个值的时候，代表4个方向的边都设置为这个值，
设置为两个值的时候，代表设置的上下、左右方向的值。

行内元素的适用规则

⚠️ 根据上图，影响一个行中元素的竖直方向上的，只有竖直属性才会影响到，也就是只有横向方向的padding才生效了！！！

行内非置换元素的运用

padding在行内元素的使用

置换元素中的padding属性，都会出现在内容的四周，并且背景色会填充到内边距区域，也就是padding会将border推开，远离内容

border在行内元素的使用

规则基本上与块级元素的处理方式一直

⚠️ 不管把行内元素的边框设置为多宽，元素的行高都不会改变，行高不变的话，则意味着该元素在一行中纵向的偏移量不会因为border而变化。

✨ 而行内置换元素则不一样，会因为设置了其高度而导致内容被推开！！

margin在行内元素的使用

边框

元素的内边距之外是边框，边框是元素的内容和内边距周围的一到多条线段，默认情况下，元素的背景在边框的外边界处终止。
边框有三个要素：宽度、样式、颜色

✨ border属性也是允许直接通过单独定义4个方向上的border属性，也遵循👆所提及到的复值的机制来定义元素的边

圆角边框

边框的知识点已经是很清晰的了，但是有去了解过其中具体是如何将这个边框给计算出来的吗？？
下面以一个图示来展示具体的一个测量原理：

👆的图示用一句话简单的来描述：用一个定义的圆角宽度的圆来做为边框的圆角度数！！

图像边框(border-image)

利用图像来绘制边框，一般需要使用border-image-source来告知所采用的图片，也就是定义边框图像的来源；

使用border-image-slice，告诉如何使用图像来裁剪处对应的区域，来作为边框的内容；

也可以使用border-image-width，告诉裁剪出来的边框本身的宽度；

有时，我们可以根据提供的简单的图像，来作为元素的边框，类似于background-image-repeat，通过border-image-repeat来告诉如何来重复边框内容展示我们所想要的效果；

border-image-slice

像其他元素一样，制定上、右、下、左边缘的图像向内偏移，可以理解为4个方向上的向内偏移，将图片分成9⃣️个区域：4⃣️个角 + 4⃣️条边 + 中间区域，一般来说，中间区域将会被抛弃(完全透明处理),
除非填写关键词，也遵循👆的复值的规则。

取值	说明
number	数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像)
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度，该属性默认值是100%
fill	保留图像的中间部分

比如有👇的一个场景：

🤔 为什么会是这样子的效果呢？？明明设置了border-image-source属性，使用一个原型的浏览器图标来作为元素的边框，怎么就只有4个角有图标边框，而其他的没有呢？这里问题留到👇来回答！

✨ 咱们先来看看关于这个属性的一个使用/测量原理了～～

根据上述效果图，我们可以得知，border-image-slice属性在图像上放置4条裁剪线，然后从border边缘向内偏移一定数量(默认是100%)，
而关于border-image-slice有以下的一个关键说明：
如果左右两边的[border-image-slice]的宽度之和大于或等于图像的宽度，那么上边与下边的border将不展示，而如果是上下两边的[border-image-slice]的宽度和大于或等于图像的高度，则左边与右边的border不显示

✨ 若设置为小于50%的情况，则有以下的效果：

👆 另外可以发现一个现象：中间区域不见了！！！而通过在border-image-slice属性后追加fill属性，则可以将其展示出来，效果如下图所示：

🪐 这里是对应的一个分析：

首先元素框的border-width被设置为了20px，这将决定了border的宽度为20px，也就是上述中的四个角的图标的宽度为20px；
其次，border-style被设置为了solid，这里必须要设置，否则图像将不会展示出来；
这里由于border-image-slice的宽度默认设置为100%，因此只展示了4⃣️个角落的border，其他4边的border不展示；

border-image-width

正常情况下，使用了border-image-slice，其裁剪出来的元素border宽度受border-width控制的，当然我们也可以通过设置border-image-width来控制元素框border图像的宽度
border-image-width与border-image-slice属性类似，只不过border-image-width裁剪的是边框框本身。

border-image-repeat

之前👆的学习知道，除了4个角落之外，其他边要么是拉伸，要么不展示，那么🤔如何来控制元素像background-repeat那样子来平铺图像作为border的背景呢？？

取值	描述
stretch	默认值，拉伸平铺
repeat	重复平铺图像，直到占满每一边的边框区域为止，将图像放到每一条边框的中间位置，然后向边框的两边进行平复重复延伸
round	拿各边的边框长度区域除以图像的尺寸，然后取整为最近的整数，平铺这一数量的图像，在这个过程中图像可能会被拉伸或压缩
space	每一边的边框区域也是先除以要平铺的图像的尺寸，然后向下取整，而且图像不会被拉伸或被压缩，而是均匀分布在边框区域中

🪐 👇来针对👆提及到的每一种情况进行实际例子的描述

首先附上基础的div边框的相关代码

    div{
      width: 400px;
      height: 200px;
      line-height: 200px;
      text-align:center;
      border: 28px solid;
      border-image-source: url("https://www.runoob.com/try/demo_source/border.png");
      border-image-slice: 28;
}