Html_Css问答集(12)

99、将上例的0%改为30%，会如何变化？

none:延迟2秒间无色，3.8秒（0%-30%占1.8秒）前无色，之后变红到5秒绿最后蓝，动画结束时恢复初始（无色）。

forward:延迟2秒间无色，3.8秒（0%-30%占1.8秒）前无色，之后变红到5秒绿最后蓝，动画结束时保持最后一帧蓝色位于最右终点。

backward:在延迟2秒间使用0%状态即"无色"，3.8秒（0%-30%占1.8秒）前无色，之后变红到5秒绿最后蓝，动画结束时恢复初始（无色）。

both:在延迟2秒间使用0%状态即"无色"，3.8秒（0%-30%占1.8秒）前无色，之后变红到5秒绿最后蓝，动画结束时保持最后一帧蓝色位于最右终点。

关键点：

backward与both延迟期间使用哪个颜色？

使用0%状态！若无0%，则保持初始状态，直到第一个改变帧（上例为30%）的时间改变状态。

100、弹性项目显示时类似inline-block，但为何是块元素？

块元素（block elements）通常会占据其父容器的整个宽度，并且每个块元素会独占一行。然而，当你将一个容器设置为 display: flex 时，它的子元素（即弹性项目）的行为会发生变化。

在弹性盒子（Flexbox）中，弹性项目的默认排列方式是沿着主轴（通常是水平轴）从左到右排列，这与 inline-block 元素的排列方式类似。但是，弹性项目并不是 inline-block 元素，它们仍然是块级元素，只是它们的排列方式被弹性容器所控制。

具体来说，弹性容器的默认主轴方向是水平方向（flex-direction: row），这意味着弹性项目会从左到右排列。如果你希望弹性项目从上到下排列，可以设置 flex-direction: column。

以下是一些关键点：

块元素：

默认情况下，块元素会占据其父容器的整个宽度，并且每个块元素会独占一行。

弹性项目：

在弹性容器中，弹性项目默认会沿着主轴（水平轴）从左到右排列，即使它们是块级元素。

inline-block 元素：

inline-block 元素会像内联元素一样排列在一行中，但它们可以设置宽度和高度。

总结:

弹性项目在弹性容器中的排列方式是由弹性容器的属性（如 flex-direction）决定的，而不是由它们本身的块级或内联特性决定的。这就是为什么即使弹性项目是块级元素，它们也可以从左到右排列的原因。

测试：

可将弹性项目的width取消，它仍然不会独占一行，宽度由其内部内容撑开，若没有就只有左右两个border线，若无这个线，就会占着一个"空"位置，

另外可以用开发者工具检查里面的computed，可以看到它的display是block.

内容提示：117-134,187-196就够了

101、align-item,align-content一般不同时使用，为什么，能同时使用吗？

align-items 用于设置每一行的项目在侧轴（通常是垂直方向）上的对齐方式。常用于设置单行伸缩项目。

align-content 用于设置当项目换行后的多行在侧轴上的分布和对齐方式。常用于设置多行伸缩项目。

所以上面两个使用场景不同，所以常不同时出现在一个元素中。

在大多数情况下，用 align-items 和 align-content 来达到预期效果时可能会有重叠，但在某些情况下（例如，少量项目且需要特定的对齐和分布），同时使用这两个属性可以实现更精细的控制。例如：

        <style>
          .container {
            display: flex;
            flex-wrap: wrap; /* 允许项目换行 */
            height: 400px; /* 固定容器高度 */

            align-items: center;
            /* 每一行的项目垂直居中对齐 */
            align-content: space-between;
            /* 多行项目在垂直方向上均匀分布 */
            border: 2px solid #000;
            background-color: lightgray;
          }
          .item {
            width: 100px;
            height: 50px; /* 各项具有不同的高度 */
            background-color: lightblue;
            margin: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .item2 {
            height: 80px;
          }
          .item3 {
            height: 100px;
          }
        </style>

        <div class="container">
          <div class="item">1</div>
          <div class="item item2">2</div>
          <div class="item item3">3</div>
          <div class="item">4</div>
          <div class="item item2">5</div>
          <div class="item">6</div>
        </div>    

.container 容器允许项目换行 (flex-wrap: wrap) 且高度固定 (height: 400px)。

align-items: center; 确保每个项目的内容在自身高度内垂直居中对齐。

align-content: space-between; 确保当项目不足以填满容器高度时，它们被分布在容器的两端。

这个例子特殊在于：

当容器内项目只有两行时，align-content: space-between 会将这两个项目推到容器的顶部和底部。

align-items: center; 独自定义每个项目内部内容的垂直居中(单行)。

102、align-items: baseline是按什么对齐的？

是按文字x的下边沿进行对齐的。有几中情况：

(1)若有多行，按照每个伸缩项目（flex item）的第一行文字的基线来对齐它们。

(2)没有内容（文字），则按伸缩项目的下边沿对齐。

(3)若只有图片，则按图片最下沿对齐。

例如：

        <style>
          .container {
            width: 600px;
            height: 400px;
            background-color: gray;
            display: flex;
            flex-flow: row wrap;
            align-items: baseline;
          }
          .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
          }
          .box4 {
            width: 250px;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        </style>
        
        <div class="container">
          <div class="box box1">1x</div>
          <div class="box box2">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
          <div class="box box3"></div>
          <div class="box box4"><img src="./14多列布局/img5.jpg" alt="" /></div>
        </div>
    

备注：上面例子为了让img居中，再次使用了伸缩盒子。

只要是伸缩盒子（box4)，它的所有子元素(img)，都会块状化，都会按伸缩项目进行排列。

103、父元素用display:flex，子元素用margin:auto就能自动垂直水平居中，为什么？

简言之：flex有水平与垂直两个方向的轴设置，所以会呈现两个方向的自动居中。

margin: auto; 的行为在不同的布局模式下有不同的解释和限制。

（1）在常规文档流中，margin: auto; 主要用于水平居中块级元素。这是因为浏览器默认会尝试在左右两边分配相等的外边距来填充剩余空间。但这种自动分配仅限于水平方向，且仅在元素宽度小于其容器宽度时才有效。对于垂直方向，margin: auto; 是不起作用的，因为常规流布局中垂直空间的分配不由外边距控制。

（2）在 Flexbox 布局中，存在两个轴：主轴和交叉轴。justify-content 控制的是主轴上的对齐方式，而 align-items 控制的是交叉轴上的对齐方式。通过将 justify-content 设置为 center 并将 align-items 设置为 center，可以实现子元素在两个轴上的居中对齐。此时，margin: auto; 在子元素上的应用将确保在主轴方向上的居中，而 align-items 则确保了在交叉轴方向上的居中。

因此，flex中会呈现两个方向的居中。

104、flex-grow是如何分配空间的？

当有空余时才按比例分配 到每个盒子上去。

没有空余（刚好占完）即使有分配比例，也不会分配。

另外，如果是换行造成的剩余空间，则按当前该行各伸缩项目的比较分配剩余空间

        <style>
          .outer {
            width: 600px;
            height: 600px;
            background-color: gray;
            display: flex;
            flex-flow: row wrap;
          }
          .box {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            box-sizing: border-box;
            border: 1px solid black;
            flex-grow: 1;
          }
          .box2 {
            width: 200px;
          }
        </style>

        <div class="outer">
          <div class="box box1">1</div>
          <div class="box box2">2</div>
          <div class="box box3">3</div>
          <div class="box box4">4</div>
        </div>

解释：

第一行容纳box1-3,600-（150+200+150）剩余100，按1:1:1分配，故 box1为150+33.3=183.3....第二行只有box4，直接全部分配 给它，即600。

可以看到容纳不下换行后，会对当前行按比较分配剩余的空间。

105、在伸缩盒子规定：

        <style>
          .outer {
            width: 600px;
            height: 800px;
            background-color: gray;
            display: flex;
            flex-flow: row wrap;
            align-items: flex-start;
          }
          .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            box-sizing: border-box;
            border: 1px solid black;
          }
          /* .box1 {
            height: 400px;
          } */
          /* .box5 {
            height: 300px;
          } */
          /* .box3 {
            align-self: flex-end;
          } */          
        </style>
        
        <div class="outer">
          <div class="box box1">1</div>
          <div class="box box2">2</div>
          <div class="box box3">3</div>
          <div class="box box4">4</div>
          <div class="box box5">5</div>
        </div>

上面有换行时，为什么第二行看似是居中的呢？

在规范中，第二行的排列布局并没有明确规定，若推算的话，应该是紧贴第一行。但各浏览器为了美观，会将第二行放于垂直居中位置，也即上下的空隙相等。

为了进一步说明，取消上面box1和box5的注释，第一行（box1-3)会按最高（box1为400px)计算整个行高（为400px)，第二同理会按最高（box4-5中最高box5为300px)为行高。

800-400=400，剩下的400中第二行占300，故它上下端空隙为（400-300）/2=50。第二行，会按align-items: flex-start;继续对齐，故box4与box5会顶端对齐。

接着上面继续，align-items: flex-start;改为center，则间距有会变化，第一、二行仍然以每行的伸缩项中最高的高度为准。第一行是400px，第二行是300px，剩下的是800-400-300=100，这个分成四份，最上面一份，最下面一份，中间为2份。即，第一行最高项目的顶部距容器顶部顶部为25px,第二行最高项底部距容器底端为25px，两行中的空隙（第一行最高项底端与第二行最高项顶端的距离）是50px，但若对应的项有align-self：flex-start，则会靠近上面50px中的一半处。

为了验证设计了一个尺寸，请看下面：

        <!DOCTYPE html>
        <html lang="zh-CN">
          <head>
            <meta charset="UTF-8" />
            <title>Document</title>
            <style>
              .outer {
                width: 650px;
                height: 800px;
                background-color: #999;
                border: 1px solid black;
                display: flex;
                flex-flow: row wrap;
              }
              .lbox {
                width: 50px;
                height: 50px;
                box-sizing: border-box;
                border: 1px solid black;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
              }
              .rightinner {
                width: 600px;
                height: 800px;
                background-color: #ccc;
                box-sizing: border-box;
                /* border: 1px solid black; */
                display: flex;
                flex-flow: row wrap;
                align-items: center;
              }
              .rbox {
                width: 200px;
                height: 200px;
                box-sizing: border-box;
                background-color: skyblue;
                border: 1px solid black;
              }
              .rbox1 {
                height: 400px;
              }
              .rbox5 {
                height: 200px;
                /* align-self: flex-start; */
              }
              .rbox3 {
                align-self: flex-end;
              }
            </style>
          </head>
          <body>
            <div class="outer">
              <div class="leftinner">
                <div class="lbox lbox1">50</div>
                <div class="lbox lbox2">100</div>
                <div class="lbox lbox3">150</div>
                <div class="lbox lbox4">200</div>
                <div class="lbox lbox5">250</div>
                <div class="lbox lbox6">300</div>
                <div class="lbox lbox7">350</div>
                <div class="lbox lbox8">400</div>
                <div class="lbox lbox9">450</div>
                <div class="lbox lbox10">500</div>
                <div class="lbox lbox11">550</div>
                <div class="lbox lbox12">600</div>
                <div class="lbox lbox13">650</div>
                <div class="lbox lbox14">700</div>
                <div class="lbox lbox15">750</div>
                <div class="lbox lbox16">800</div>
              </div>
              <div class="rightinner">
                <div class="rbox rbox1">1</div>
                <div class="rbox rbox2">2</div>
                <div class="rbox rbox3">3</div>
                <div class="rbox rbox4">4</div>
                <div class="rbox rbox5">5</div>
              </div>
            </div>
          </body>
        </html>

第一行最高rbox1为400px，第二行最高为rbox4为200px（可修改rbox5为150不会改变整个布局)，

进行分配，800-400-200=200，分成四份，rbox1距容器顶端为1份50px,rbox4距容器底端为1份50px，剩下的2份100px为第一行最底端与第二行最顶端的距离。如果此时有单独的align-self，会将这100px再平分。

将上例的rbox5调整为align-self:flex-start，将会发现rbox3与rbox5会紧顶，汇合在500px高度处。

106、align-self: flex-end;是调整单个项目到侧轴底端吗？

是的，但不完全正确。

严格的说：是调整单个项目到"底端"。这个底端是指下面有人阻碍就在阻碍处停止，比如第二行有项目，它会阻碍向下掉，直接靠近第二行有项目处。

        <style>
          .outer {
            width: 600px;
            height: 600px;
            background-color: gray;
            display: flex;
            flex-flow: row wrap;
            align-items: flex-start;
            /* align-content: flex-start; */
          }
          .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            box-sizing: border-box;
            border: 1px solid black;
          }
          .inner3 {
            order: -1;
            align-self: flex-end;
          }
          .inner2 {
            align-self: flex-end;
          }
          .inner5 {
            height: 220px;
          }
        </style>
        
        <div class="outer">
          <div class="inner inner1">1</div>
          <div class="inner inner2">2</div>
          <div class="inner inner3">3</div>
          <div class="inner inner4">4</div>
          <!-- <div class="inner inner5">5</div> -->
        </div>

上面容器中inner3排第一位，整行有换行inner4在第二行，故inner3在向下掉时，会被inner4"托住"或阻碍，就会靠近4，即此时第一行向下的底端就是第二行的顶端，inner2也不会掉到最下端，它会靠近第二行。

107、在网页没有内容时，使用：

          body {
            width: 100%;
            height: 100%;
          }

为什么去检查进有宽度值，但没有高度值？

块级元素（block-level elements）默认情况下会尽可能地扩展以填满其父元素的宽度（除非明确值）。如 <div>, <p>, <section> 等，在没有内容时默认宽度并不会自动变为 0。这些元素通常会有一个默认的宽度，这个宽度基于其父元素的宽度。

但是，对于内联元素（inline elements），如 <span> 或文本，它们的宽度确实是基于它们所包含的内容的宽度。如果一个内联元素没有内容，那么它的宽度确实会是 0，因为没有内容来确定宽度。

对于body元素，自身没有明确时，看包含块<html>元素，而<html>元素的默认尺寸通常就是浏览器的可视区域（viewport）。也即视口。

默认的html也是0，除非内部有内容，如果没有内容，上面如果对html的height用100%它对标的就是视口,视口的高度。这样body就继承，因100%所以使用整个视口高度。

html,body {

width: 100%;

height: 100%;

}

108、子绝父相，若父元素使用相对定位，但本身无尺寸，会怎么？

父元素使用相对定位的目的，就是为子元素的变化提供锚定物，若父元素无尺寸，则无法锚定，会继续向上寻找锚定物，找到后再确定当前子元素的变化。例如

        <style>
          .header {
            height: 70px;
            background-color: gray;
          }
          .outer {
            position: relative;
            /* height: 700px; */
          }
          .inner {
            width: 400px;
            height: 400px;
            background-color: rgba(255, 255, 0, 0.3);
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        </style>

        <div class="header">1</div>
        <div class="outer">
          <div class="inner">2222</div>
        </div>

由于尽管父元素.outer有相对定位，但.outer 没有实际的高度，.inner 元素就会"穿透"这个没有尺寸的父元素，继续向上寻找下一个可以作为参考的祖先元素。

当绝对定位元素找不到已定位的祖先元素时，它实际上是相对于视口进行定位的，而不是严格意义上相对于 <body>。但由于 <body> 通常填满了整个视口，所以在视觉上看起来就像是相对于 <body> 定位的。

所以哪怕没有父元素相对定位，最终都会以视口为锚定物。

注意：

绝对定位元素会向上查找最近的已定位（position 不为 static）的祖先元素作为其定位参考。如果找不到，则会以初始包含块（initial containing block）为参考，而不是严格意义上的视口。

初始包含块通常与视口大小相同，但它们并不完全等同。初始包含块是一个概念性的矩形，其尺寸和位置通常与视口一致，但在某些情况下（如使用 transform 属性）可能会有所不同。

这里用"视口"来代替初始包含块来理解

109、什么是初始包含块?

初始包含块（initial containing block）是一个概念性的矩形框，它是在渲染页面时确定布局的基准。初始包含块的尺寸和位置通常与视口（浏览器窗口）的尺寸和位置相匹配，但在某些情况下可能有所不同。

比如常用的版心，通常它就是初始包含块，而视口（整个网页）通常都比版心大。

初始包含块具有以下特点：

• 它是所有元素的根容器，是页面的最外层容器。

• 它的尺寸通常由视口的大小决定，但也受到一些 CSS 属性的影响，比如 transform 属性可以改变初始包含块的尺寸和位置。

• 对于根元素（<html> 元素），初始包含块的左上角是文档流的起点。

• 它是页面中所有固定定位（position: fixed）元素的定位参考。

• 绝对定位元素在没有已定位祖先元素时，会相对于初始包含块进行定位。

注意：

初始包含块并不是一个实际存在的元素或容器，而是一个概念上的概念，用于确定页面元素的布局和定位。

110、background-image: linear-gradient(red, yellow, green);背景图为什么是背景色呢？

在 CSS 的早期版本中，background-image 属性主要用于加载并显示图像文件（如 .jpg, .png, .gif 等），这要求服务器上必须有相应的图像资源，并且在页面加载时需要下载这些图像。

随着 CSS3 的引入，有了更多创建复杂视觉效果的方式，而不必依赖于预加载的图像文件。CSS3 引入了 linear-gradient, radial-gradient, 和 conic-gradient 这样的渐变类型，它们允许开发者直接在 CSS 中定义背景图案，通过颜色和透明度的动态变化来生成这些图案。

使用这些渐变，你可以创建出类似图像的效果，但它们实际上是基于矢量的，这意味着它们可以无限放大而不失真，同时也不需要额外的网络请求来加载图像文件，从而提高了网页的加载速度和性能。此外，渐变背景还可以轻松地适应不同的屏幕尺寸和设备，使得响应式设计更加灵活。

111、@media all有什么用？

@media all 在技术上是冗余的，有时你仍然可能看到它被使用，原因有以下几点：

明确性：

使用 @media all 可以明确表明这一组样式是适用于所有设备的，这在阅读和维护代码时提供了清晰性。

优先级：

媒体查询具有较高的CSS优先级，这意味着在同一个选择器中，位于媒体查询内的样式可能会覆盖位于媒体查询外的相同属性的样式。

组合使用：

当你需要同时使用多个媒体查询时，将通用样式放在 @media all 下面，可以使结构更清晰，也便于将特定于设备的样式添加到其他媒体查询中。

兼容性：

尽管现代浏览器默认会应用没有媒体查询的样式，但在某些旧版或非标准浏览器中，明确使用 @media all 可能有助于确保样式正确应用。

因此，虽然从技术角度讲，@media all 不是必需的，但在实践中，它可以帮助保持CSS代码的组织性和兼容性，尤其是在处理复杂项目时。例如，一个常见的模式是在 @media all 中放置基础样式，然后在特定的媒体查询中添加响应式设计规则。

112、一个元素浮动后清除浮动后，为什么仍然可能不被父元素内容？

例如：

        <style>
          .outer {
            width: 400px;
            /* height: 300px; */
            background-color: gray;
            border: 1px solid black;
            /* float: left; */
          }
          .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            font-size: 30px;
            box-sizing: border-box;
            border: 1px solid black;
            margin: 10px;
          }
          .box1,
          .box2,
          .box3 {
            float: left;
          }
          .box3 {
            clear: both;
          }
        </style>

        <div class="outer">
          <div class="box box1">1</div>
          <div class="box box2">2</div>
          <div class="box box3">3</div>
        </div>

尽管对已经浮动的元素进行清除浮动影响，但它仍然一个浮动元素，仍然脱离正常的文档流，它只是清除浮动元素对后续元素布局造成的影响，上面box3清除前面浮动元素对自己的影响(不清除则会尾随在box2的后面)。

注意：

box3尽管清除了前面对自己的影响，但自己浮动的特征没有改变，它仍然是一个浮动元素，仍然脱离文档流。

box3会遵守清除浮动的规则，垂直位置不受之前浮动元素影响。

但作为浮动元素，它仍然不会影响其后续元素的正常文档流布局。

它也不会撑开父元素的高度（除非父元素采用了清除浮动的技巧）。

如果父元素outer开启左浮动，则会创建BFC，它将包含其内部的所有浮动子元素，确保它们不会溢出到外部元素的范围之外。因此所有box将会被outer容纳。