JavaScript-HTML-CSS Day4 Notes

1、理解下子代选择器 >

其实简单理解：就是不会作用于父类下的所有子类标签，仅作用到下一代的子类标签。

<!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>
    /* div 里面的 所有的 span 文字颜色都是红色 */
    /* 后代选择器，选中所有后代，包含儿子、孙子、重孙子... */
    div span {
      color: red;
    }
  </style>
</head>
<body>
  <span>span 标签</span>
  <div>
    <span>这是div 的儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div> 
</body>
</html>

添加子代选择器 > 后

<!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>
    /* div 里面的 所有的 span 文字颜色都是红色 */
    /* 后代选择器，选中所有后代，包含儿子、孙子、重孙子... */
    div > span {
      color: red;
    }
  </style>
</head>
<body>
  <span>span 标签</span>
  <div>
    <span>这是div 的儿子 span</span>
    <p>
      <span>孙子 span</span>
    </p>
  </div> 
</body>
</html>

2、常见的伪类有哪些，常见的超链接伪类又有哪些，请举例说明

2. !important 提权功能，提高权重/优先级到最高，慎用

CSS特性的优先级决定了在多个规则应用于同一元素时，哪条规则会生效。优先级排序从高到低如下：

　　1. 内联样式（Inline Styles）

　　直接在元素的style属性中定义的样式。例如：

<div style="color: red;">文本</div>

　　2. ID选择器（ID Selector）
　　以#开头的选择器。例如：

#myId {
    color: blue;
}

　　3.类选择器、属性选择器、伪类选择器（Class, Attribute, Pseudo-class Selectors）
　　以.开头的类选择器和[]的属性选择器，以及伪类选择器。例如：

.myClass {
    color: green;
}
a:hover {
    color: orange;
}

　　4. 元素选择器（Type Selector）
　　直接使用元素名称的选择器。例如：

p {
    color: black;
}

　　5.通配符选择器（Universal Selector）
　　使用*表示所有元素。例如：

* {
    color: gray;
}

优先级示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级示例</title>
    <style>
        p {
            color: black; /* 优先级4 */
        }
        .highlight {
            color: green; /* 优先级3 */
        }
        #special {
            color: blue; /* 优先级2 */
        }
    </style>
</head>
<body>
    <p id="special" class="highlight" style="color: red;">文本</p>
</body>
</html>

4、Emmet 写法的概念、通俗解释和举例说明

<div>
    <h1>标题</h1>
    <p>段落内容</p>
</div>

通过 Emmet，你可以更快地编写和生成 HTML 和 CSS 代码，使开发过程更加高效。

5、bgs, background-size:的两个参数 contain, cover的直观感受。

contain

cover

background-size: 100%

6、background-attachment: fixed这个参数的概念理解和使用

background-attachment: fixed; 是 CSS 属性，用于控制背景图像的滚动行为。

概念

background-attachment 属性定义背景图像的固定方式。它有几个取值，其中 fixed 表示背景图像相对于视口（浏览器窗口）固定，即当用户滚动页面时，背景图像不会移动。

作用

固定背景图像：使用 fixed 值可以创建一种视觉效果，使得背景图像在用户滚动页面时保持不动，从而增加页面的深度和层次感。

通俗解释

想象你在一个房间里，墙壁上挂着一幅画。如果你在房间里走动（滚动页面），画不随你移动，依然保持在原地。background-attachment: fixed; 就是让背景图像像这幅画一样，始终固定在视口中。

举例说明

以下是一个使用 background-attachment: fixed; 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Background Example</title>
    <style>
        body {
            height: 2000px; /* 设置足够的高度以允许滚动 */
            background-image: url('https://via.placeholder.com/1920x1080');
            background-size: cover; /* 背景图像覆盖整个视口 */
            background-attachment: fixed; /* 背景图像固定 */
            background-position: center; /* 背景图像居中 */
        }
    </style>
</head>
<body>
    <h1 style="color: white; text-align: center; padding-top: 50px;">固定背景示例</h1>
    <p style="color: white; text-align: center;">向下滚动以查看效果。</p>
</body>
</html>

结果

在这个示例中，当你滚动页面时，背景图像会保持在视口的固定位置，而不是随着内容滚动。这种效果通常用于增强网页的视觉吸引力。

补充：

background-attachment 属性除了 fixed，还包括以下取值：

scroll（默认值）
背景图像随着内容的滚动而滚动。
local
背景图像相对于元素的内容区域固定，即当元素的内容滚动时，背景图像也会固定在该元素内，而不是随整个页面滚动。
inherit
继承父元素的背景附加属性。

7、为什么如下代码的 contain和cover参数，执行起来在页面渲染后，看起来没有任何差异？

<!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>background属性</title>
  <style>
    div {
      width: 400px;
      height: 400px;

      /* background: pink url(./images/1.png) no-repeat center bottom/cover; */
      background: pink url(./images/1.png) no-repeat center bottom/contain;
    }
  </style>
</head>
<body>
  <div>div 标签</div>
</body>
</html>

在你的代码中，使用 background-size 的 contain 和 cover 参数时，可能看起来没有差异的原因主要与元素的大小、背景图像的大小及其比例有关。

`contain` 和 `cover` 的区别

contain：确保背景图像完全包含在元素内，可能会留下空白区域（背景颜色可见）。图像按比例缩放，但可能不会覆盖整个元素。
cover：确保背景图像覆盖整个元素，可能会裁剪图像的一部分，图像同样按比例缩放。

原因分析

相同的元素大小：如果背景图像的尺寸与元素的比例相同，那么无论使用 contain 还是 cover，图像的显示效果看起来都可能是一样的。【原因就在这，我这里的图片是个正方形的，所以只要width和height尺寸一样，就会出现这种情况】
图像大小：如果图像本身的尺寸较小或与元素的尺寸比例相近，使用这两种方式的视觉效果可能不会有明显的区别。
背景颜色：由于你的背景颜色是粉色，并且图像可能与粉色的对比不强，可能导致视觉上感觉差异不明显。

解决方案

要观察这两者的差异，可以尝试以下方法：

使用不同尺寸的背景图像。
改变 div 的大小，或者调整背景图像的比例。
修改背景颜色，使其与背景图像形成更明显的对比。

8、常见的标签，哪些分别是块级、行内、行内块。

牢牢记住这三句话即可。

块级：独占一行；宽度默认是父级的100%；加宽高生效【div】对应参数 display: block

行内：一行共存多个；尺寸由内容撑开；加宽高不生效【span】对应参数 display: inline

行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效【img】对应参数 display: inline-block

<!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>
    /* 块级：独占一行；宽度默认是父级的100%；加宽高生效 */
    div {
      width: 100px;
      height: 100px;
    } 

    .div1 {
      background-color: brown;
    }

    .div2 {
      background-color: orange;
    }

    /* 行内：一行共存多个；尺寸由内容撑开；加宽高 不 生效 */
    span {
      width: 200px;
      height: 200px;
    }

    .span1 {
      background-color: brown;
    }

    .span2 {
      background-color: orange;
    }

    /* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */
    img {
      width: 100px;
      height: 100px;
    } 
  </style>
</head>
<body>

  <!-- 块元素 -->
  <div class="div1">div 标签1</div>
  <div class="div2">div 标签2</div> 

  <!-- 行内元素 -->
  <span class="span1">span11111111</span>
  <span class="span2">span1</span>

  <!-- 行内块元素 -->
  <img src="./images/1.png" alt="">
  <img src="./images/1.png" alt="">
  
</body>
</html>

posted @ 2024-09-25 16:53 AlphaGeek 阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

Running water never grows stale. So you just have to keep on flowing.

世上无难事，只要肯攀登。

JavaScript-HTML-CSS Day4 Notes

概念

通俗解释

举例说明

概念

作用

通俗解释

举例说明

结果

`contain` 和 `cover` 的区别

原因分析

解决方案

公告

Running water never grows stale. So you just have to keep on flowing.

世上无难事，只要肯攀登。

JavaScript-HTML-CSS Day4 Notes

概念

通俗解释

举例说明

概念

作用

通俗解释

举例说明

结果

contain 和 cover 的区别

原因分析

解决方案

公告

`contain` 和 `cover` 的区别