如何确定完全放置的元素的 CSS 宽度和高度？

terry 2年前 (2023-09-27) 阅读数 82 #数据结构与算法

与全套人员相比，谁入座？大多数人都知道
与设置为 relative/absolute/fixed 最接近的父元素匹配。那么如果以上三个值没有设置为所有父元素的position，那么会设置哪些呢？
什么是现有障碍？首先是哪个块？
元素 A 包含元素 B，集合 A 位置：相对，B 集合 位置：绝对；左：0；上：0❀：0与元素 A 的 content-box、padding-box 或 margin-box 的左上角相同吗？

如果你还是不确定答案，可以先思考或练习，然后再阅读以下内容。

完全嵌套元素的属性

完全嵌套元素与文档流完全分离，不会影响后续同级元素的外观
其位置（或大小）由
定义 right bottom left 完全定义了四个元素的位置。 margin 不会匹配其他元素的 margin折叠

如上所述，实际嵌套元素的大小由 top 决定 Bottom left 由四个属性定义，这四个属性放置在与带有块的相比完全静止的元件。

`包含块`

包含真实位置元素的块由最近的位置定义以执行相对，相对 ❀或固定的祖先元素建模如下：如果这个祖先元素是线元素...这种情况，请参考下面的文章否则，生成现有块由元素 edge组成（即，它位于父元素的填充框上）
如果属性为 所有元素位置元素不固定相对、绝对或固定有一个包含的初始块和一个包含的块。

初始块包含主元素

（在 HTML 文档中为元素）的现有块是初始现有块。对于网络浏览器：第一个可用块的大小是端口的大小，但它基于画布的原点。
浏览器端口已加载，但文档可能很长并且可以上下滚动，端口中的内容会不断变化。第一个可用块可以简单地认为是第一个查看区域（这句话是我自己的），上图：

滚动页面后：

<!-- demo1 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初始包含块</title>
  <style>
    html {
      margin: 10px;
      padding: 10px;
      border: 1px solid red;
    }
    body {
      padding: 10px;
      border: 1px solid blue;
    }
    .abs {
      position: absolute;
      /*left: 0;*/
      /*bottom: 0;*/
      padding: 5px;
      background-color: #9089e4;
      color: #fff;
    }
  </style>
</head>
<body>
  <h3>绝对定位之初始包含块</h3>
  <div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>初始包含块不是html，也不是body，而是指视口。</div>
    <div>滚到底啦，没有更多内容啦~~~</div>
    <div class="abs">我是绝对定位元素。</div>
  </div>
</body>
</html>

工作边框代表html元素，蓝色边框代表身体元素。 GIF图片可以进一步加深对第一块的理解：第一块并不是大多数人认为的html或body元素。这是一个错误的认识，需要纠正！

放置元素的全尺寸

静态位置（静态位置）

元素的位置可以简单地视为该元素在正常文档流中的位置，其中 ❀

当静态、浮动在元素位置不可用时。

静态位置左值：包含当前元素左外边距（Left Margin）边框的块左边框的距离
静态位置右值
：包含从右边界（Right Margin）到当前元素边界的距离的块的右边界的距离是时候

<!-- demo2 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初始包含块</title>
  <style>
    body {
      position: relative;
      padding: 10px;
      border: 1px solid blue;
    }
    .abs {
      position: absolute;
      margin-left: 5px;
      padding: 5px;
      background-color: #9089e4;
      border: 1px solid orange;
      color: #fff;
    }
    .abs2 {
      position: absolute;
      top: 50px;
      left: 10px;
      margin-left: 5px;
      padding: 5px;
      background-color: #9089e4;
      color: #fff;
      border: 1px solid orange;
    }
  </style>
</head>
<body>
  <div class="abs">绝对定位元素1</div>
  <div class="abs2">绝对定位元素2</div>
  <div>body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素body的其他子元素</div>
</body>
</html>

如上面代码所示，是双方的位置。元素.abs和.abs2的左值都是10px（即body-left值）。我们不将左侧值设置为.abs，这是默认的自动，左侧值设置为.abs2，如果是10px，你会看到两者之间的间隙。现有块左侧的元素是相同的。

完全嵌套的元素布局

计算公式（width代表内容宽度，即标准盒子模型）：

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 块的宽度
左、宽度、右。所选值是自动的。定义了位置元素。重要的方面是左右宽度。每个属性都可以设置或取消设置。默认是自动的。如果设置了该值，请在表中使用它。 1 表示有 2 * 2 * 2 个条件 = 8 个条件：

Left	Width	Right	Layout
auto‶toauto❀ Invert margin -left and right页边距自动设置为0；将左值设置为静态位置；自适应宽度：右边距距离右边0的位置最远（如果右边距为0，则取右边距，如果右边距也为0，则取右边距，下同）
1	auto	auto	将左边距和右边距更改为自动，并使0；自适应宽度：右边距距右边最远 0
auto	auto	1	设置左边距和右边距为0；调整宽度：左边距距离左边位置最远为0
auto	1	auto	设置左边距和右边距为0；设置为静态位置左值；
1	1	auto	将左右边缘设置为0；从左到右设置各个属性值
auto	1	1	将左边距和右边距设置为auto为0；根据属性值从右到左排序
1	auto	1	设置左边距和右边距为0；宽度自动拉伸
1	1	1	①如果左边距和右边距都是自动的，并且它们此时相同，则根据上式计算对应的保证金值；如果当前计算的边缘值为负，则将左边缘设置为0，并根据公式计算右边缘值。 ② 如果左边缘或右边缘是自动的，则根据公式计算该值； ③ 如果左右两边都设置了值，且等式左右两边不相等，则忽略右边的值。