Html_Css问答集(11)

81、为什么要有overflow?

overflow 属性决定了当内容超出元素边界时，该如何显示超出部分。常用值有：

visible: 默认值。内容会超出元素边界显示。

hidden: 超出边界的内容会被隐藏。

scroll: 会在元素边界上显示滚动条，允许用户滚动查看隐藏的内容。

auto: 如果内容超出边界，则会自动显示滚动条。

clip: （旧版属性，不推荐使用） 类似 hidden，但可能会导致文本被截断。

overflow 属性的本质就是用来控制 容器元素 在 容纳不下其内部内容 时如何呈现这些内容。

换句话说，当元素的内部内容超过了其自身尺寸的边界时，overflow 属性决定了该部分内容的可见性或处理方式。

"容纳不下"的含义包含两种情况：

子元素尺寸过大:

当子元素的宽度或高度超出容器的宽度或高度时，就会发生溢出。

内容过多:

当容器内包含大量文本、图片等内容，导致内容超出容器尺寸时，也会发生溢出。

因此，overflow 属性的核心作用就是：

控制溢出内容的可见性: hidden 隐藏，scroll 显示滚动条，auto 根据情况自动决定是否显示滚动条。

改变溢出内容的显示方式: clip 会截断溢出内容，但通常不推荐使用。

总结：

overflow 属性只影响容器内部内容的显示方式，不影响容器本身在文档流中的位置。

overflow 属性不会改变容器元素的尺寸，它只控制容器内部内容的可见性。

无论容器元素是否脱离文档流，overflow 属性都只针对容器本身的处理，不会影响文档流的整体布局。

82、为什么需要指明overflow后resize才生效？

因为两者需要配合工作：

resize只能作用于元素的可视区域，也就是用户能够看到和交互的部分。来调整这部分的大小。(块元素）

overflow则指明超出上面可视区域后的内容，应该如何展现。

两者的配合才会呈现一个完美的界面网页出来。

如果不写，将出现下面的后果：

（1）overflow会使用默认值visible,即超出父容器会显现出来。

（2）resize不会生效，因为你没有明确变化中应该如何呈现里面的内容，它就只有呆着不动了。

83、为什么backgroud-origin默认为paddingbox?

简言之：更符合实际使用。

原因如下：

(1)常见需求：

大多数情况下，开发者希望背景图片不包括边框。将背景图片定位在内边距区域开始的地方，更符合实际设计需求。

(2)一致性：

背景图片通常用于装饰内容或内边距区域，而不是边框区域。默认使用padding-box能确保背景图片在不同元素上具有一致的外观和位置。

(3)可视性：

边框区域通常是较小且固定的，设置背景图片在此区域可能会导致图片的不可见部分或布局的复杂化。使用padding-box可以保证背景图片在更大的区域内展示。

background-origin可以设置为以下值：

border-box

padding-box（默认值）

content-box

84、cover,contain在background-size中是等比例缩放，图片大时缩小，图片小时呢？

图片小时，则等比例放大，满足上面条件。

cover：

使背景图片尽可能覆盖整个容器。

保持图片的宽高比，可能会裁剪图片的一部分以保证完全覆盖。

如果图片比容器小，会等比例放大图片以覆盖容器。

contain：

使背景图片尽可能完全显示在容器内。

保持图片的宽高比，图片的长边会贴合容器的边缘，短边会有空白。

如果图片比容器小，会等比例放大图片以完全显示在容器内，但不会裁剪图片。

场景：

cover 适合需要背景图片覆盖整个容器而不在乎裁剪的情况。

contain 适合需要完整显示背景图片并在意不裁剪的情况。

85、下面为什么红色背景消失了？

        <style>
          div {
            width: 600px;
            height: 600px;
            background-color: red;
            background: url("./bg-lt.png") no-repeat left top,
              url("./bg-rt.png") no-repeat right top,
              url("./bg-lb.png") no-repeat left bottom,
              url("./bg-rb.png") no-repeat right bottom;
          }
        </style>
        
        <div></div>

因为被复合属性backgroudn覆盖了。

解决办法：

（1）重新覆盖：把background-color: red;放在最后去，进行覆盖写，就有红色。

（2）合并属性：把background-color: red;省去，直接把red写在background中

          div {
            width: 600px;
            height: 600px;
            background: url("./bg-lt.png") no-repeat left top,
              url("./bg-rt.png") no-repeat right top,
              url("./bg-lb.png") no-repeat left bottom,
              url("./bg-rb.png") no-repeat right bottom, red;
          }   

86、overflow的作用范围是什么？为什么下面li前面的小点没有显示？

        <style>
          ul {
            width: 300px;
            height: 300px;
            font-size: 20px;
            padding: 15px;
            border: 1px solid black;
            line-height: 40px;
          }
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        </style>

        <ul class="news">
          <li>多样化"夜游"持续升温 点燃城市烟火气</li>
          <li>90后南方女孩逐梦陕西农村</li>
          <li>
            台媒又数：26架次解放军军机上午在台海周边活动，其中24架次"北中南三面包夹"台岛
          </li>
          <li>我们追了50年，猛然发现，前面根本没有人！</li>
          <li>
            官方发布！四川2024年高考艺术体育类专业招生文化成绩和专业统一考试成绩录取控制分数线
          </li>
        </ul>

overflow针对元素的 content 区域，它决定了当元素的内容超出其 content 区域时该如何处理这些超出部分。

不包括 padding、border 和 margin。常见 overflow 属性值：

overflow: visible;（默认值）：超出内容会显示在元素外部，不会裁剪或隐藏。

overflow: hidden;：超出内容会被裁剪，不会显示在元素外部。

overflow: scroll;：超出内容可以通过滚动条来查看。

overflow: auto;：如果内容超出，滚动条会自动出现，允许用户滚动查看超出部分。

因此上面li用了overflow后，它前面的小点超出了content区域，故不会显示。

若想显示，则ul的一属性list-style: inside;把小点纳入到li内部显示。

87、86上面新闻一行显示，且超出部分用省略号，有什么要求？

要实现新闻提示文字的效果，需要三个CSS属性配合使用：

(1)white-space: nowrap; 确保文字不会换行。

(2)overflow: hidden; 隐藏超出元素容器的部分内容。

(3)text-overflow: ellipsis; 当文本超出容器宽度时，用省略号（...）来表示隐藏的文本。

注意：

line-height是可继承的。设置在ul或li都可以。

88、emmet是什么？

是一个快捷输入的插件，内置在vscode中，对html,css,js有帮助。对C#没有什么帮助。

使用方法就是输入简写后，按tab，自动就完成整个输入了。

(1)元素本身：div+tab即完成<div></div>

(2)元素.类名：div.classname+tab即<div class="classname"></div>

(3)元素#id：div#ok即<div id="ok"></div>

(4)上面2与3连写与重复：

div#OK.luck即<div id="OK" class="luck"></div>

div.box.box1.son#kk即<div class="box box1 son" id="kk">...

(5)元素*n即重复：div*3即连写三个兄弟div

(6)元素\*n即重复且排序：div.box*3即连写三个div，且类名排序3个

即div.box1,div.box2,div.box3

(7)>表示子元素: div>span即

<div><span></span></div>

(8)+表示兄弟元素：div+span即

<div></div>

<p></p>

(9)^当前的父元素，可叠加。

            div>span^p即：<div><span></span></div>
                          <p></p>
            div>ul>li*2^^p即:  <div>
                                    <ul>
                                        <li></li>
                                        <li></li>
                                    </ul>
                               </div>
                               <p>

89、颜色线性渐变度数的规律是？

    .box4 {
        background-image: linear-gradient(0deg, red, blue, green);
    }

颜色渐变的规律是，箭头的中心在元素内部的中心，以垂直向上为0度，顺时针即为正的度数。

0度表示垂直向上，因此颜色从下到上渐变，红色在下方，绿色在上方。

若为90度，则表示从左向右渐变，因此红色在左，绿色在右。 例如0度，即由下向上，故红在下，绿在上，同理，90度则红在左绿在右？

90、为什么下面没有文字仍然在box后面没换行显示，没有清除浮动？

        .box {
            width: 200px;
            height: 200px;
            border: 1px dashed skyblue;
            float: left;
        }
        .box:after {
            content: "";
            display: block;
            clear: both;
        }

        <div class="box box1">1</div>
        <p>这是后面</p>

尽管.box:after伪元素使用了clear: both;，但它实陽际上并没有清除清除.box浮动影响。 这是因为:after伪元素在.box元素内部，无法影响外部元素的布局。所以文字仍然跟随在box右侧后面显示。

总结：一般都是容器div里面的子元素浮动，清除的是容器div的影响，对于容器div外面则无浮动影响.

91、重复渐变应该注意哪些方面？

      .box1 {
        background-image: repeating-linear-gradient(
          red 50px,
          yellow 150px,
          green 200px
        );
      }

无论是线性还是径向，重复渐变的规律是：

(1)没有渐变的（或纯色的）的地方才发生重复；

(2)按照原来色彩顺序（上面，红黄绿红黄绿红黄绿。。。循环）。因此，红的上面若是重复，是绿向黄过渡；而绿的后面是红向黄过渡，依次这样连接上下。

(3)重复时紧贴部分将不会渐变，只有中间部分渐变。即重复连接部分过滤是突然的无渐变。

92、下面画的稿纸为什么横线是不均匀的？

        .box1 {
            width: 600px;
            height: 800px;
            border: 1px solid black;
            padding: 20px;
            background-image: repeating-linear-gradient(
            transparent 0px,
            transparent 29px,
            black 30px
        );
        background-clip: content-box;
            margin: 0 auto;
        }

        <div class="box1"></div>

原因：

当使用repeating-linear-gradient定义背景图像时，背景图像会根据指定的周期进行重复。如果内容框的高度不是背景图像周期的整数倍，浏览器会尝试尽量对齐背景图像的边界。结果就是，最上面和最下面的横线会对齐，而中间部分可能会被挤压或拉伸，形成不均匀的间隔。

上面颜色段是29+1=30px，800-20-20=760px它是不30px的整数倍，因此，会从两头向中间挤，出现间隔不均匀情况。

因此改为850px，即(850-20-20)/30是整数倍。这样就是均匀的。

元素内容框高度应为背景图像周期的整数倍，以确保背景图像在每个周期后精确对齐。

通过调整内容框的高度与内边距的组合，使其总高度与背景图像的周期相匹配，确保每个周期都完全匹配，从而实现均匀的横线间隔。

93、2D变换translate(50px,50px)，脱离文档流了吗？

没有，它的位置仍然在"原位置"（类似于相对定位），不会挤占周边元素的位置。

但是，在视觉上它可能覆盖周边元素。

          .outer {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /* position: relative; */
          }
          .inner {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            /* position: absolute;
            top: 50px; */
            transform: translate(50px, 50px);
          }
          
        <div class="outer">
          <div class="inner"></div>
          <span
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sequi ut
            aperiam quis ipsa nihil architecto temporibus alias corporis.</span
          >
        </div>

上面可以看到inner仍然占有原来的位置，周边span并不受影响，但是，视觉上，inner偏离原位置覆盖了部分span的展示。

如果上面把绝对定位与相对定位打开，因为绝对定位是脱离文档流的，所以span文字会自动到最左上角进行展示。同时，可以看到inner的位置实际上是transform与top等的相加得到。

94、transform变换时，为什么一般把旋转放在最后?

transform属性的应用顺序会影响最终的结果。一般来说，将旋转（rotate）放在变换列表的最后是因为旋转会改变坐标系统的方向，从而影响后续变换的基准点。

原因如下：

(1)坐标系统变化：

旋转会改变元素的坐标系统。如果在旋转之前应用了其他变换（如缩放、倾斜或平移），那么这些变换将是基于原始坐标系统的。一旦坐标系统旋转，后续变换就会基于新的坐标系统进行，这可能会导致不同的结果。

(2)直观性：

将旋转放在最后可以使得整个变换序列更直观。开发者可以更容易地理解先应用哪些变换，然后元素如何旋转。

(3)叠加效应：

旋转通常用于调整元素的方向，而缩放、倾斜和平移更多地用于改变元素的大小、形状和位置。先应用这些变换，再通过旋转调整最终方向，可以看作是一种变换的叠加。

(4)性能考虑：

在某些情况下，如果旋转是在变换序列的最后一步，渲染引擎可能会更高效地处理这些变换。这虽然不是决定性的因素，但在性能敏感的应用中可能是考虑的一个点。

复合变换（即多个变换函数一起使用）通常遵循"后应用先书写"的原则，因为每个变换函数都是在前一个变换的基础上操作的。也就是说，位于序列后面的变换会先被应用，然后是前面的变换。

旋转是基于元素的当前中心点进行的。如果你先旋转再位移，那么位移将会按照旋转后的坐标系进行，这可能会导致意料之外的结果。同样地，先旋转再缩放也可能导致缩放的方向与预期不同，因为旋转改变了坐标轴的方向。

变换的顺序会影响最终结果，而将旋转放在最后是一种常见的实践，以确保变换的逻辑和结果是可预测的。

95、为什么动画中不用开启3D效果？

（1）3D场景一般要开启3D效果transform-style: preserve-3d;（写在父元素上）

flat： 子元素在二维平面上渲染，不会受到 transform 属性的影响，即使父元素被设置为 3D 变形。

preserve-3d： 子元素在三维空间中渲染，会继承父元素的 transform 属性，并根据其 3D 变形进行渲染。

当您想要对元素进行 3D 变形（例如，rotateX、rotateY、rotateZ 等）时，transform-style: preserve-3d 非常关键。它让子元素能够感知父元素的 3D 变形，并根据该变形进行自身渲染。

开启 transform-style: preserve-3d; 是为了告知浏览器需要进行 3D 渲染，平时关闭 preserve-3d 是为了减少不必要的计算，提高渲染效率。

（2）但在动画中却不必特意写这个。

在 CSS 动画中，即使没有显式开启 transform-style: preserve-3d;，某些 3D 变换动画也可能生效。这主要是因为：

浏览器智能判断：

现代浏览器会根据动画的具体属性进行判断，如果动画中使用了 3D 变换属性 (例如 rotateX, rotateY, rotateZ, translate3d, perspective)，浏览器会自动开启 3D 渲染模式，以确保动画能够正常呈现。

某些 3D 变换不需要 preserve-3d：

某些 3D 变换，例如 translate3d，在不开启 preserve-3d 的情况下也可以正常工作。因为 translate3d 只是在 Z 轴上进行平移，并不涉及子元素的 3D 空间布局。

动画库和框架的优化：

一些动画库和框架 (例如 GreenSock Animation Platform (GSAP)) 会在内部进行优化，即使没有显式开启 preserve-3d，也能实现流畅的 3D 动画效果。

注意：

即使在动画中，如果需要实现复杂的三维效果，例如多个子元素在 3D 空间中相互影响，仍然建议显式开启 preserve-3d，以确保渲染结果准确无误。

96、动画中状态有变化，结束时没描述，那么最终状态是初始状态还是中间状态呢？

例如：

        .inner2 {
            background-color: green;
            animation: rightmove 2s linear;
        }
        @keyframes rightmove {
            0% {
            }
            50% {
              border-radius: 50%;
              background-color: purple;
            }
            100% {
              transform: translate(900px);
        }
        }

上面动画结束时，inner2是圆角还是直角？

直角!

在CSS动画中，关键帧的属性值在每个百分比点上都是独立的，它们不会自动继承前一个关键帧的属性值。因此，如果在100%的关键帧中没有明确指定某个属性，那么该属性将不会继承50%关键帧中的值，而是会回到初始状态的值。

在100%时，border-radius 和 background-color 将不会继承50%时的值，而是会回到初始状态的值。也就是说，border-radius 将回到初始状态的直角，background-color 将回到初始状态的颜色（如果没有指定，通常是元素的默认背景颜色）。

CSS动画的关键帧（keyframes）之间的状态是逐渐过渡的，但每一个关键帧的变化都是相对于之前定义的属性变化。动画不会自动继承某个关键帧中的样式到后续的关键帧，除非显式地去定义。

97、上面"回到初始状态"是0%，还是元素原本状态？

例如，最开始是红色，设置动画0%时是绿色，100%没有设置，那么动画结束是红还是绿？

红色。初始状态是元素未变化前的状态。

如果元素的初始背景颜色是红色，动画的0%关键帧中设置为绿色，而100%关键帧中没有指定 background-color，那么动画结束后，元素的背景颜色将回到红色。

如果100%关键帧中明确指定了 background-color，那么动画结束后，元素的背景颜色将是100%关键帧中指定的颜色。

初始状态指的是元素在应用动画之前的初始状态，而不是0%关键帧中的状态。

98、animation-fill-mode几个模式有什么区别？

animation-fill-mode 属性控制动画在动画播放之前和之后的行为。它有以下几种模式： (1)none (默认值)

延迟时不变；

动画开始逐个使用0%-100%渐变；

动画结束，恢复到初始状态。

(2)forwards

延迟时不变；

动画开始逐个使用0%-100%渐变；

动画结束，保持最后一帧状态。

(3)backwards

延迟时，使用0%状态（注意：若是20%等不会使用）；

动画开始逐个使用0%-100%渐变；

动画结束，恢复到初始状态。

(4)both

延迟时，使用0%状态（注意：若是20%等不会使用）；

动画开始逐个使用0%-100%渐变；

动画结束，保持最后一帧状态。

例子：

        @keyframes moveAndColor {
            0% {
                transform: translateX(0);
                background-color: red;
            }
            50% {
                transform: translateX(300px);
                background-color: green;
            }
            100% {
                transform: translateX(600px);
                background-color: blue;
            }
        }
        .container {
            margin: 50px;
            padding: 20px;
        }
        .box {
            width: 50px;
            height: 50px;
            margin: 20px;
            animation: moveAndColor 6s 2s; /* 延迟2秒,持续6秒 */
            border: 1px solid black;
        }
        /* 不同的 animation-fill-mode */
        .box-none {
            animation-fill-mode: none;
        }
        .box-forwards {
            animation-fill-mode: forwards;
        }
        .box-backwards {
            animation-fill-mode: backwards;
        }
        .box-both {
            animation-fill-mode: both;
        }    

        <div class="box box-none">none</div>
        <div class="box box-forwards">forwards</div>
        <div class="box box-backwards">backwards</div>
        <div class="box box-both">both</div>

解释：

none:延迟2秒间无色，2秒后红到5秒绿最后蓝，动画结束时恢复初始（无色）。

forward:延迟2秒间无色，2秒后红到5秒绿最后蓝，动画结束时保持最后一帧蓝色位于最右终点。

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

both:在延迟2秒间使用0%状态即红色，2秒后动画，到5秒绿最后蓝，动画结束时保持最后一帧蓝色位于最右终点。