Html_Css问答集(7)

46、在vscode，html与head和body在同一个垂直线上，它们并不是兄弟元素，为什么？

在 Code（Visual Studio Code）或其他代码编辑器中，HTML文档的格式和缩进方式可以帮助开发者更清晰地组织和理解代码结构。虽然<html>, <head>, 和 <body>标签在编辑器中可能显示在同一垂直线上，但实际上它们有着明确的父子关系。

   层级结构：
       <html> 是根元素，是整个HTML文档的顶层父元素。
       <head> 和 <body> 是 <html> 的直接子元素，表示文档的头部和主体。
   缩进和对齐：
       编辑器通常会根据用户的设置或默认格式，选择合适的缩进和对齐方式。
       由于 <html> 元素通常只包含 <head> 和 <body> 两个子元素，并且它们是开发者最常操作的部分，因此编辑器可能会将它们放在同一垂直线上，以避免不必要的缩进，节省水平空间，提高代码的可读性。

VS Code等编辑器为了简洁和节省空间，常常将 <head> 和 <body> 标签与 <html> 标签在同一垂直线上显示。

47、有了em为什么还要有rem?

由于 em 单位的继承性，它总是相对于父元素的字体大小进行计算，这样在嵌套元素中可能会导致累积效应，计算起来更加复杂且容易出现意想不到的结果。为了避免这种复杂性和不确定性，rem 单位被引入。

rem 单位是相对于根元素（<html>）的字体大小来计算的，这意味着在整个文档中，无论嵌套层级有多深，rem 单位都保持一致，确保了一致的比例和预测性。如果使用 body 作为基准，仍然会存在嵌套和继承的复杂性问题。

   rem 是相对于根元素 <html> 的 font-size，并且值在整个文档中是全局一致的，不会受到嵌套层级的影响。
   rem 不是继承性的，而是基于根元素的 font-size 来计算的。
   CSS 的其他属性可以继承，例如 font-size，但 rem 本身只是一个固定的计算单位。
   通过使用 rem，你可以确保在整个文档中拥有一致的比例和布局，更加容易实现响应式设计。

简言之，rem直接找祖师父html的font-size来计算，不嵌套混乱计算。

48、回答下面问题：

        <style>.outer {height: 400px;background-color: gray;}.box {font-size: 20px;/* height: 100px;width: 100px; */}.box1 {background-color: orange;}.box2 {background-color: skyblue;float: left;}.box3 {background-color: green;}</style></head><body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div></body>

   上面box1独占一行，box3则围绕box2显示在其右侧。为什么？
   现在去掉box的宽与高的注释，box1仍然独占一行，但box3不再与box2的右侧，而是下方（注意是文字），为什么？

   浮动的本质：让周围的文字围绕着原浮动元素进行显示。位置上来说，浮动元素在天上，围绕的元素在地下。

   无宽高时的布局:
       初始状态下，box1 是块级元素，占据父容器的整个宽度，因此它独占一行。接着，box2 浮动到左边，再之后的 box3 作为块级元素会围绕浮动的 box2 排列，但也会占据其余的整个宽度，所以它出现在 box2 的右侧并独占下一行。
       注意：box2在天上，box3与box1在地下，box2的下方（地下）也是box3的一部分。


   为 box 添加宽度和高度:
       box1 由于是块级元素，仍然独占一行。   box2 浮动到左边（并固定在 100px 宽高区域）。box3 尝试在 box2 右侧显示，但由于块级元素的特性，它不能“围绕”浮动的块级元素，而是被浮动元素“推到”下一行。
       为什么被推到下一行，而不是右侧呢？
       此时，从视觉上看，由于 box2 和 box3 宽高都为 100px，它们实际占据相同的位置，导致 box3 的背景色和内容都被 box2 覆盖。只剩下 box3 的文字溢出，继续向下排列。

       为了证实：可以设置 box2 设置为透明时，你会看到box2的位置是绿色，它也即是 box3 的背景色，这表明 box3 实际上仍然位于 box2 的下方，但它的文字内容由于空间限制被迫溢出到父容器的下方，并显示在那里。


   总结：
       box3 一直尝试在 box2 的右侧显示，但由于块级性质和浮动元素的“推挤”行为，它在视觉层面上被 box2 覆盖，只剩文本溢出，显示在 box2 的下方。
       区别：文字在下方显示，所以此时它是溢出，所以溢出部分也就没有背景色。

49、分析下面各元素的布局？

        <style>.outer {width: 300px;background-color: gray;border: 1px solid black;}.d {height: 100px;width: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.d1,.d2,.d3 {float: left;}.d4 {background-color: green;}.d1 {background-color: transparent;}</style></head><body><div class="outer"><div class="d d4">0</div><div class="d d1">1</div><div class="d d2">2</div><div class="d d3">3</div><div class="d d4">4</div></div></body>

   第0号元素在浮动前按正常文档流布局--独占一行。由于有border的设置，所以不会有首末元素边距被父容器“吃掉”的情况。
   第一、二、三号元素左浮动不按正常文档流排布，会在第0号元素的下方从左向右排布,有点类似span的味道，由于总宽度只有300px，不足以容纳第三号，所以第三号就另起一行在第一号的下方显示（浮动元素不受高度限制，但仍受宽度限制）。

   第四号元素没有浮动，按正常文档流在父容器中显示，由于第0号是独占一行，所以第四号就在第0号元素的下方显示，由于第一、二、三的浮动占据了原第四号的位置，所以第四号的背景仍在在第一号的下方，但文字4却只能显示第三号的下方。

   两个细节：
   （1）第四号元素因为合并原因，它与第0号元素的垂直距离是10px(不是20px)。而第一号元素是左浮动，不受合并影响，会是累加情况，因此它与第0号元素的垂直距离是10px+10px=20px，也即从俯视角度上，第四号元素在垂直上比第一号元素离第0号元素更近。

   (2）第三号是因宽度限制被挤到第一号元素的下面，实则上第一、二、三号元素它们都是在“一行”上。但第四号元素的宽度与左浮动的第1号一样(注意第四号受所有在此位置的左浮动节制，即第一、二、三的宽度大于了第四号宽度），结果是第四号的背景只能在这些浮动元素的后面，但文字只能另起一行显示（为什么另起一行呢？因为第四号元素的位置是独占一行，所以文字只能另启一起显示）

50、分析下面元素的布局.

      <style>.outer {width: 500px;background-color: gray;border: 1px solid black;float: left;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1,.box2,.box3 {float: left;}</style></head><body><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></body>

   (1)当父容器 outer 左浮动后，它和它的子元素 box1, box2, box3 都将被视为浮动元素，它们会沿着父容器内部的左侧排列。这四个元素都会在天上浮动。

   (2)父容器能否容纳三个子元素？是的，尽管在天上，一样容纳。
       注意：
       浮动元素像内联元素一样水平排列。这意味着无论兄弟元素原本是块级元素还是内联元素，只要它们都设置了 float 属性，它们就会像内联元素一样，从左到右水平排列，直到父元素容纳不下它们为止。
       如果是都是右浮动，那么它们从右向左象内联元素一样排列。

       由于父容器 outer 的宽度为 500px，三个子元素会从父容器的左侧开始排列。如果父容器的宽度有限(由500px改为300px时），当第三个子元素超过父容器的宽度时，它会向下溢出，并在下一行排列。

       父元素没有浮动时，因为没有内容，所以高度不会撑起，会变成一条线。
       上面由于父元素也浮动了，都在天上，因此父元素一样可以容纳三个浮动的元素，因此它的内容由三个浮动的元素撑开，它的高度就有了。注意它的宽度不受是否影响。

       当父元素浮动后设置了高度（如height200px)，那么在天上，也不会由子元素来撑开高度，直接是200px，如果小于子元素的高度，浮动的这些子元素一样会溢出父元素，仍然可以用overflow:hidden来进行隐藏。

   (3)后续元素的影响，只需要看父元素的浮动即可。
       父元素被视为一个整体----当父元素内所有子元素都设置了 float: left，整个父元素会作为一个整体进行浮动。
       后续元素会绕过父元素----由于父元素浮动，后续元素会绕过它进行排列。
       后续元素无法直接与父元素子元素交互----后续元素不会直接与父元素内部的子元素进行交互，它们会视为父元素是一个整体，并在其右侧进行排列。
       子元素的实际排列-----父元素内部的子元素仍然会按照水平排列的规则进行排列，直到父元素容纳不下它们为止。

(4)上面父元素的float:left注释后，增加overflow: hidden后也会出现容纳现象。
默认情况下：当子元素浮动时，父元素的高度会默认收缩到最小的尺寸，只包含父元素的内联内容。因为浮动的子元素会脱离文档流，父元素无法识别子元素的高度。

overflow: hidden 的作用：当父元素设置 overflow: hidden 时，它会强制父元素将所有子元素都包含在内，即使是浮动元素。

       高度撑开的原因：由于 overflow: hidden 强制父元素包含所有子元素，父元素的高度会自动调整以容纳所有浮动子元素，包括子元素的 margin 和 padding。

       注意：
           父元素没有高度：当父元素没有设置高度时，它的高度会自动根据子元素的高度来决定。由于浮动子元素会脱离文档流，父元素默认高度会收缩到最小的尺寸，只包含父元素的内联内容。此时，子元素不会溢出，因为父元素的高度会随着子元素的高度而改变。
           父元素有高度：当父元素设置了固定的高度时，子元素就有可能溢出。如果子元素的总高度超过父元素的高度，而父元素又设置了 overflow: hidden，那么溢出的部分就会被隐藏起来。

           如果box4要显示的话，它仍然在box1的上方，文字4也会因为超过父容器而hidden。改overflow为scroll，向下滚动时就会发现容器内部下方有4.

51、块元素margin:0 auto会水平居中，为什么auto 0不会垂直居中？而上下左右为0时的绝对定位时，margin：auto会水平垂直居中？

   水平居中:
       对于水平居中，margin: 0 auto 设置了块元素的左右外边距 (left 和 right) 为 auto。块级元素在其父容器的宽度是明确的（即它有一个明确的宽度或可以确定宽度），浏览器可以根据这个宽度和父容器的宽度自动计算左右外边距以使该元素水平居中。（根据剩余可用空间计算，下同）

   垂直居中:
       对于垂直居中，margin: auto 0 设置的是上下外边距 (top 和 bottom) 为 auto，但这种设置通常不会对块级元素的垂直居中有任何效果，这是因为块级元素的高度在大多数典型的布局中是不明确或无法自动计算的。父元素的高度通常不是固定的，因此浏览器无法像计算左右外边距那样自动计算上下外边距以实现垂直居中。

   注意：
       需要：一是块元素，二是子元素需要小于父元素。否则就没有剩余可用空间来计算，就不会水平居中了。


   元素的四边都设置为0：top: 0; right: 0; bottom: 0; left: 0; 强制当前元素紧贴其包含块的所有四个边。
   margin: auto：
       设置 margin 为 auto 使浏览器自动计算边距。由于 top, right, bottom, left 都已经设为0，对应的 auto margin 将会分配剩余的可用空间，从而均匀分布在上下左右边距。
   宽度和高度：
       当 width 和 height 被指定时，浏览器会根据元素的宽度和高度来均匀分配上下左右的 auto 边距。(即父元素减去子元素的宽高后，再除以2即得上下左右的空白）

   最终，这个绝对定位的元素会在包含块的中心位置。