JavaScript-HTML-CSS Day6 Notes

1、关于浮动 导致 脱标 的直观感受和特点总结

特点总结：

  • 顶对齐；具备[行内块]显示模式特点；浮动的盒子会脱标[脱离标准轴的控制，不在占用标准轴的位置]
  • 建议：为避免脱标，要么就全都浮动，要么就全都不浮动。

浮动前，注释掉.two的 float:right

执行上述代码后，发生脱标。

浏览器此时会认为，.one已经不存在了(因为已经设置了浮动float)，所以.two就会移到最左边来。

 

2、关于标签浮动清除， 需要理解的点。

脱标的盒子不占用标准流，是无法撑开父级盒子高度；

如果子级标签是浮动的，这个时候如果父级标签再没有高度，那页面的效果就是错乱的。

浮动就会产生不好的影响。下图就是底下的盒子冲了上来。

 

3、如何理解 clear:both

clear: both; 是一个 CSS 属性，用于控制元素的浮动行为。它的作用是确保当前元素不与之前的浮动元素相交。详细解释如下：

  1. 浮动元素的影响：

    • 当你使用 float 属性将元素浮动时，浮动元素会从文档流中移除，导致后续元素可能会被它们覆盖或靠近浮动元素，这可能会影响布局。

  2. clear 属性的值：

    • clear: left;：不允许当前元素与左侧浮动元素接触。
    • clear: right;：不允许当前元素与右侧浮动元素接触。
    • clear: both;：不允许当前元素与左右两侧的浮动元素接触。

  3. 应用场景：

    • 在一个浮动布局中，使用 clear: both; 可以确保后续的内容（如页脚、其他内容区等）不会被浮动的元素遮挡。例如，当你需要在浮动元素下方添加新的内容时，确保它正确显示在浮动元素的下方。

  4. 结合伪元素：

    • 在 clearfix 技巧中，::after 伪元素常与 clear: both; 一起使用，插入一个透明的块元素，以清除所有浮动，使父容器正确包含所有子元素的高度。

示例

<div class="clearfix">
    <div class="box" style="float: left;">Box 1</div>
    <div class="box" style="float: right;">Box 2</div>
</div>
<div style="clear: both;">This content will appear below the floated boxes.</div>

在这个示例中，clear: both; 确保“这段内容”在两个浮动盒子之后开始，避免它们重叠。

 

4、追问那如何理解如下代码的clear:both, 从最终实现的效果和clear:both字面上的意义，两者如何建议联系，方便理解。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动-额外标签法</title>
  <style>
    .father {
      margin: 10px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: pink;
    } 

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    } 

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    } 
  
    .bottom {
      height: 100px;
      background-color: brown;
    } 

    .clearfix {
      clear: both; /*不允许当前元素与左右两侧的浮动元素接触。也就是说：clear: both; 的作用是确保 .clearfix 元素位于所有浮动元素（.left 和 .right）的下方，而不会与它们重叠。*/
    }   
  </style>
</head>
<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div> 
  </div>
  <div class="bottom"></div>
</body> 
</html>

在这段代码中，clear: both; 的作用是确保 .clearfix 元素位于所有浮动元素（.left 和 .right）的下方，而不会与它们重叠。

字面意义与实现效果的联系

  1. 字面意义：

    • clear 的意思是“清除”或“不允许接触”，而 both 表示“左侧和右侧”。因此，clear: both; 的字面意思是“不要让当前元素与左侧或右侧的任何浮动元素接触”。

  2. 实现效果：

    • 在这个示例中，.left 和 .right 是浮动的，.father 容器的高度会因为这两个浮动元素而被压缩（看起来像没有内容）。为了确保 .bottom 元素位于 .father 容器的下方，而不是被浮动元素“挤压”，我们插入了一个 .clearfix 元素并设置 clear: both;。

通俗解释

想象一下，clear: both; 就像在一个水池中，你有两个浮动的物体（比如两块浮冰），它们在水面上漂浮。你想放一个东西（比如一个小球）在冰块的下面，但不希望小球和冰块接触。通过把小球放在冰块的下面并说“你不能和冰块接触”，这样小球就能保持在正确的位置，浮动物体不会干扰它。

最终效果

  • 通过使用 clear: both;，.clearfix 确保了它在 .left 和 .right 下方，而不被它们覆盖。这样，后续的 .bottom 元素就能正常显示在 .father 容器的下方，确保整个布局的稳定性和可读性。

综上所述，clear: both; 的作用是清晰的：确保元素不与浮动的左右两侧元素接触，从而维护良好的布局结构。

在上图的例子中，当前元素是 .clearfix。

具体解释：

  • .clearfix 是插入在 .left 和 .right 两个浮动元素后面的元素。
  • 当你在 .clearfix 上使用 clear: both; 时，实际上是告诉浏览器：“请确保这个 .clearfix 元素不会与之前的浮动元素（.left 和 .right）接触。”

整体结构

在 HTML 结构中，.clearfix 作为一个占位元素，帮助恢复 .father 容器的高度，并确保后续的 .bottom 元素能够正确显示在它的下方。通过这样的方式，.clearfix 成为一个控制浮动影响的关键元素。

 

5、追问：为什么当有了.clearfix 这个占位元素后，就能够帮助恢复 .father 容器的高度？这个什么原理

当使用浮动布局时，浮动元素（如 .left 和 .right）会脱离正常的文档流，导致其父元素（如 .father）的高度不再自动扩展以包裹这些浮动元素。

换句话说，浮动元素的存在不会被父元素所“识别”，使得父元素的高度可能会变为零。

原理

  1. 浮动元素的行为：

    • 浮动元素被移出文档流，使得它们对周围元素的影响减小。它们的存在不会增加父元素的高度。

  2. 添加 .clearfix：

    • 当你插入一个 .clearfix 元素，并在它上面使用 clear: both;，这个元素成为了一个新的块级元素。
    • 由于 clear: both; 的设置，浏览器会确保 .clearfix 不会与任何浮动元素接触。因此，.clearfix 会被推到 .left 和 .right 的下方。

  3. 恢复父元素高度：

    • .clearfix 作为一个块级元素，会在页面中占据空间，从而使得 .father 的高度能够扩展以包含 .clearfix。
    • 因为 .clearfix 实际上是被包含在 .father 里，所以它的存在“通知”父元素有内容，并促使父元素重新计算其高度。

总结

通过插入 .clearfix 并使用 clear: both;，你有效地为浮动元素提供了一个“边界”，从而允许父元素 .father 根据内容的实际高度进行调整。这种方法常用于清除浮动效果，保持布局的稳定性。

 

6、各种方法去除浮动的效果，直观感受。

 方法一：额外标签法

首先下方是存在浮动的，上面父级盒子的高度是0，下面的盒子已经冲上去了。

 通过增加标签 .clearfix {clear: both}

再观察效果，就能够发现浮动已经去除了。

 

方法二：

如何理解这个如下代码：

    /* 单伪元素法 */
  .clearfix::after {
    content: "";  // 必须要有这一行，不然伪元素::after是不会奏效的
    display: block;
    clear: both;
  }

::after 是一个伪元素，用于在指定元素的内容后面插入额外的内容。它可以生成一个“虚拟”元素，不需要在 HTML 中实际存在。

代码中的 .clearfix::after 主要用于清除浮动。在使用浮动布局时，父元素可能会高度坍塌，伪元素通过 clear: both; 使得 .clearfix 元素包含所有浮动子元素，从而保持布局的正确性。

简而言之，::after 帮助解决浮动引起的布局问题。

注意：因为是伪元素，所以必须要有这一行 content: " " ，不然伪元素是不会生效的。

 

方法三：

如下代码的clearfix这部分代码，请解释一下，尤其关于before::

在这段代码中，.clearfix 的部分使用了两个伪元素 ::before 和 ::after，实现了清除浮动的效果，同时也解决了外边距塌陷的问题。下面是对这部分代码的详细解释：

1. 伪元素的定义

  • ::before 和 ::after 是 CSS 伪元素，用于在元素的内容前或后插入内容。它们不会在 HTML 中实际生成元素。

2. 伪元素的作用

  • content: "";：这行代码用于生成一个空的内容，必要时可以让伪元素在页面中占据空间。
  • display: table;：这将伪元素的显示类型设置为表格，使其能够在块级上下文中正确工作。

3. 清除浮动的原理

  • ::before：
    • 通过在 .father 元素的开头插入一个空的表格元素，确保父元素 .father 的高度能够包含浮动的子元素。这是因为这个空的表格元素会在其内部的浮动元素之前渲染，从而使得 .father 计算其高度时考虑到这些浮动元素。
  • ::after：
    • clear: both; 使得 ::after 元素在浮动元素之后，并确保它不会与左侧或右侧的任何浮动元素接触。它通过插入一个块级元素，允许 .father 重新计算其高度以包含所有浮动子元素。

4. 外边距塌陷问题

  • 外边距塌陷：当一个块级元素的子元素（如 .left 和 .right）使用浮动布局时，父元素的外边距可能会与子元素的外边距“塌陷”在一起。使用 ::before 伪元素，配合 display: table;，可以有效防止这种塌陷现象。

总结

通过同时使用 ::before 和 ::after，这段代码实现了清除浮动并防止外边距塌陷。::before 为浮动元素创建了一个占位符，确保父元素高度正确，

而 ::after 则确保了父元素能够正确地包裹住所有的浮动子元素。这样的双伪元素方法在现代布局中非常有效且常用。

 

方法四：

父级添加 overflow:hidden标签，也能够实现清除浮动的效果。

理解：之所以浮动有问题，其实就是因为父级无法被子级撑开高度范围，

当时一旦浏览器在执行父级元素的：overflow: hidden 这条属性命令时，就会去检查父级元素的范围，此时父级元素的高也就检查到了。

所以，此时浮动的问题也就解决了。

 

 

 

7、单冒号，和双冒号分别是什么意思？有什么区别？

:: 是 CSS 伪元素的语法，表示它们是与元素相关但不直接存在于文档中的元素。

伪元素用于选取元素的一部分，如内容的前后，或者特定的结构部分。

区分 : 和 ::

  • :（单冒号）：用于伪类（如 :hover、:focus），表示元素的状态或条件。
  • ::（双冒号）：用于伪元素（如 ::before、::after），表示在元素内容前后插入内容。

历史背景

  • 最初的 CSS 规范中，伪类和伪元素都使用单冒号，但后来为了区分，CSS3 引入了双冒号来表示伪元素。虽然浏览器仍支持单冒号写法，但推荐使用双冒号以符合最新标准。

总结

:: 表示伪元素，是一种用于操作元素特定部分的语法，提供更灵活的样式控制。

 

 8、Flex布局—常见属性记忆

只记一个column就行，其他的基本不用。

记住这里是：占用父级剩余尺寸的份数。

 

 

 

注：justify-content和space-content两个参数的属性值取值是一样的。

 

posted @ 2024-09-26 23:21  AlphaGeek  阅读(19)  评论(0)    收藏  举报