JavaScript-HTML-CSS Day5 Notes

1、如何理解这里的 -n + 5?

    <style>
        li:nth-child(-n+5){
            background-color: orange;
        }
    </style>

理解 -n+5 主要是分解成两部分来看：

  1. -n: 这个表达式会随着 n 的增大而减小。n 通常从 0 开始，所以当 n 为 0 时，-n 为 0；当 n 为 1 时，-n 为 -1，以此类推。

  2. +5: 这个部分则是对 -n 的结果进行偏移。结合在一起，-n + 5 的值会随着 n 的增加而变化。

具体理解：

  • 当 n 从 0 到 4 时，-n + 5 的值从 5 到 1（具体值为：5, 4, 3, 2, 1）。
  • 当 n 为 5 及以上时，结果变为负数（如 -1，-2 等），这意味着对应的 li 元素不再被选中。

记忆小技巧：

可以把它想象成一个“阈值”，表示前五个元素。当 n 小于或等于 5 时，条件成立，背景色为橙色；超过五个元素后，就不再适用这个样式了。

这样就可以方便记忆 -n+5 是用来选中前五个元素的！

 

2、我如下代码，为什么padding, margin的参数和网页前端的对应参数值都 一一对应，但是border在网页上却显示9600？而不是和代码中设置的一样呢？

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: orange;
            padding: 20px;
            border: 10px solid black;
            margin: 50px;
        }
    </style>

 边距（margin）和内边距（padding）显示正常，但边框（border）显示为 9.600，而不是你代码中设置的 10px。这个现象通常是由于浏览器缩放或者开发者工具缩放引起的。【经排查，就是浏览器缩放的原因，只有调到100%才是对应一致的】

以下是可能的原因及解决方案：

  1. 浏览器缩放：

    • 如果你当前浏览器的缩放级别不是 100%，则可能会影响页面元素的显示比例。边框 10px 在缩放后可能被渲染为 9.6px。
    • 解决方法：确保浏览器缩放为 100%。你可以按住 Ctrl（Windows）或 Cmd（Mac）然后滚动鼠标，或者直接从浏览器菜单中调整缩放级别。

  2. 开发者工具缩放：

    • 浏览器的开发者工具有时会根据视图缩放比例来显示元素的尺寸，特别是像素值。即使你的代码设置了 10px 的边框，开发者工具可能会显示一个小数值如 9.6px。
    • 解决方法：检查浏览器的开发者工具是否有缩放设置，或直接查看页面的真实渲染效果，而不是依赖开发者工具中的数值。

  3. 设备像素比（DPR）：

    • 在高分辨率设备（例如带有 Retina 显示屏的设备）上，浏览器可能会根据设备像素比（DPR）进行缩放。这样会导致像素值被调整，边框可能显示为非整数值。
    • 解决方法：你可以在页面上使用 window.devicePixelRatio 来检查设备的像素比，以确认这个问题。

其他检查：

  • 你可以尝试在不同浏览器中打开页面，看看是否所有浏览器都显示 9.6px，这可以帮助判断是否是特定浏览器的问题。

 

 3、记住盒子模型的 内边距padding参数的 二值、三值、四值得写法含义。

记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样

<!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>盒子模型-padding多值写法</title>
  <style>
    div {
      width: 200px; 
      height: 200px;
      background-color: pink;

      /* 四值：上  右  下  左 */
      /* padding: 10px 20px 40px 80px; */

      /* 三值：上  左右  下 */
      /* padding: 10px 40px 80px; */

      /* 两值：上下  左右 */
      padding: 10px 80px;

      /* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */
    } 
  </style>
</head>
<body>
  <div>div 标签</div>
</body>
</html>

 

4、如何理解内减模式？这个box-sizing参数的含义， 举例分别说明有无内减模式带来的差异。

在CSS中，box-sizing属性用于控制元素的盒模型计算方式，主要有两种模式：content-box（默认值）和border-box（内减模式）。

box-sizing: content-box;

在这种模式下，元素的宽度和高度只包括内容区域，不包括内边距（padding）和边框（border）。这意味着如果你给元素设置了宽度和边框，实际占用的空间会比设定的宽度大。

示例：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* 默认值 */
}
  • 内容区域宽度：200px
  • 总宽度 = 内容 + 内边距 + 边框 = 200px + 20px + 20px + 5px + 5px = 250px

box-sizing: border-box;

在这种模式下，元素的宽度和高度包括内容区域、内边距和边框。这样，设置的宽度和高度就是元素的实际占用空间。

示例：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* 内减模式 */
}
  • 总宽度 = 200px（这里的宽度包括内容、内边距和边框）

总结差异

  • 使用content-box时，设定的宽度只包含内容部分，增加内边距和边框后，元素的实际宽度会变大。
  • 使用border-box时，设定的宽度包括内边距和边框，元素的实际宽度保持不变，便于布局。

举例

假设我们有两个相同的元素，一个使用content-box，另一个使用border-box。

  • content-box

    • 宽度：200px
    • 实际占用：250px

  • border-box

    • 宽度：200px
    • 实际占用：200px

这样，在进行布局时，使用border-box可以减少计算复杂性，尤其是在设计响应式布局时。

具体可看下如下两图，增加下直观印象。

 

5、分别解释下这里的三种参数取值的含义

overflow: hidden

overflow: scroll

overflow: auto

<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>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      overflow: hidden;

      /* overflow: scroll; */

      /* overflow: auto; */
    }
  </style>
</head>
<body>
  <div>文字内容测试</div>
</body>
</html>

在你提供的 HTML 代码中，overflow 属性有三种取值：hidden、scroll 和 auto。它们的含义如下：

  1. overflow: hidden;

    • 当元素的内容溢出其指定的宽度和高度时，超出部分会被隐藏，不会显示出来。用户无法滚动查看被隐藏的内容。

  2. overflow: scroll;

    • 无论内容是否溢出，都会在元素内部显示滚动条。即使内容完全适合元素，也会出现滚动条。

  3. overflow: auto;

    • 只有在内容溢出元素的尺寸时，才会显示滚动条。如果内容没有溢出，滚动条不会出现。这样可以节省空间，提供更好的用户体验。

这三种取值允许你根据需要控制元素内内容的显示方式。

 

6、理解下关于 外边距合并 现象

 

 

7、理解下关于外边距坍塌现象

精华提炼：儿子坑爹，自己移动，拖累父亲下去。

 

然而实际执行代码后，就出现了却是父级盒子也被儿子盒子拉了下来。

 这就是所谓的坍塌，一图胜千言，多看看，培养映射直觉即可。

那么遇到这种情况，但是我们还是只想移动子级盒子，又该如何处理呢？

如下三招：

第一招：

 但是上面加了padding后，会撑大盒子。如果不想撑大盒子，就需要 box-sizing: border-box

第二招：

 第三招：其实大盒子上面是有一条边框线的，这样感觉并不完美。

 

8、关于行内元素-内外边距问题

记住：行内元素，比如span这种标签，内部元素，margin, padding是能对水平方向间距起作用，垂直方向间距不会奏效的。

要想改边垂直位置，就只能通过line-height去操作。

<!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>
    span {
      margin: 50px;   /*水平方向会生效、但垂直方向不会生效*/
      padding: 20px;  /*水平方向会生效、但垂直方向不会生效*/
      line-height: 100px; /*要想改边垂直位置，就只能通过line-height去操作。*/
    }
  </style>
</head>   
<body>    
  <span>span标签</span>
  <span>span标签</span>
</body>
</html>

 

9、盒子模型阴影属性值的含义理解

记忆：

 

 注意：rgba ---> red green blue alpha[透明度]

 

posted @ 2024-09-25 17:32  AlphaGeek  阅读(19)  评论(0)    收藏  举报