20230213----重返学习-float浮动及css子元素选择器及元素背景background

方朝端
88 阅读6分钟

day-006-six

最大最小宽度与高度

关于宽度

  • min-width设置最小宽度
  • max-width设置最大宽度
  • 如果发生冲突，优先级: min-width>max-width>width
  • 可以用来做自适应，设置最小宽度和最大宽度，但不设置具体的宽度。

关于高度

  • min-height设置最小高度
  • max-height设置最大高度
  • 如果发生冲突，优先级: min-height>max-height>height
  • 可以用来做自适应，设置最小高度和最大高度，但不设置具体的高度。

伪元素

伪元素可以理解为虚假的元素，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。

  • 伪元素虽然在结构上是虚假元素，在表现上和普通元素一样，能为它们添加任何样式。
  • 伪元素必须拥有content属性才能生效
  • 伪元素默认是一个行内元素，和一个<span></span>差不多，但可以用display:inline-block;改。伪元素对其他属性基本都是支持的。

常见伪元素

  • ::before

    • 必要属性content
    • 可以看作是当前匹配选中的元素的第一个子元素。

  • ::after

    • 必要属性content
    • 可以看作是当前匹配选中元素的最后一个子元素。

float

float一开始就是用来做文字环绕效果的。

文字环绕

在元素自身上设置。

<div style="width: 350px;">
  <img src="./十字对齐240X240.png" alt="" style="float: left;"/>
  深入理解内联元素的高度表现 在讲解原理之前，我们先看以下代码:复制代码现在我们思考这样几个问题: 元素的高度从何而来？
  是由里面的文字撑开的？ 作者：阳光。稀土掘金
  著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
</div>

脱流概念

正常文档流中，宽度是可继承的，但是一旦浮动，宽度不能再继承父级的，而是由自身内容大小决定。

  • 普通流 才能撑开高度。
  • 左流 设置左浮动之后的元素。
  • 右流 设置右浮动之后的元素。

左右浮动

  • left 左浮动，让元素沿着容器左侧放置
  • right 右浮动，让元素沿着容器右侧放置
  • none 不浮动
  • 浮动后由内容撑开

清除浮动

  • 父级元素设置宽高

  • 浮动元素末尾多一个元素如<br/>并设置clear:both;;

  • 父级元素设置浮动，但父级元素也被设置浮动了，影响到父级元素的兄弟了。

  • 给父级元素设置overflow:hidden;。

  • 给父级元素::after设置content: "";display: block;width:0px;clear: both;。

    • 衍生出来给所有浮动元素的父级一个 clearFix的类名当一个元素需要清除浮动的时候 直接设置clearFix类名。

        .clearFix:after {
    content: ""; /*  必须拥有content属性 内容为空  */
    display: block;/*   必须块标签才能清浮动  */
    height: 0;/* 高度为0 不占用空间 */
    clear: both;/* 清除浮动 */
  }
  .clearFix {
    *zoom: 1;/* //兼容ie */
  }

bug查找

  • 如果当前元素看不到，那么样式控制台里在当前元素的兄弟及父级点一点。

    • 如果看到高度为0，那么就代表那个元素可能脱流了。

其它html语义化标签

<video></video>视频标签

  • controls: 让浏览器原生的播放控件出现。

  • height: 设置媒体元素的高度。

  • width: 设置媒体元素的宽度。

  • autoplay 让媒体文件自动播放。

    • 得静音才能

  • muted 设置静音。

  • loop 设置视频循环播放。

<audio></audio>音频标签

  • controls: 让浏览器原生的播放控件出现。

    • 如果不设置这个，那么将不能看到这个元素。

  • height: 设置媒体元素的高度。

  • width: 设置媒体元素的宽度。

  • autoplay 让媒体文件自动播放。

    • 一般不能了

  • muted 设置静音。

  • loop 设置视频循环播放。

补充css3选择器

  • :nth-child()

    • :nth-child(an+b) 这个CSS伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child 括号中表达式an+b匹配到的元素集合n=0，1，2，3...。

      • tr:nth-child(2n+1) 表示 HTML 表格中的奇数行。

      • tr:nth-child(odd) 表示 HTML 表格中的奇数行。

      • tr:nth-child(2n) 表示 HTML 表格中的偶数行。

      • tr:nth-child(even) 表示 HTML 表格中的偶数行。

      • span:nth-child(0n+1) 表示子元素中第一个且为<span></span>的元素，与:first-child选择器作用相同。

        /* `li的父元素`的第1个子元素同时且是li元素才会生效。 */
ul>li:nth-child(1) {
  color: red;
}

/* 偶数项 */
li:nth-child(2n) {
  color: blue;
}

/* 奇数项 */
li:nth-child(2n+1) {
  color: green;
}

      • E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

  • :not() 反选伪类选择器

    • CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。
    /* 
  @1 先找到所有li
  @2 not,除了not里面的东西，其他li都选中
  @3 除了第一个li，其他li都选中
*/
li:not(li:nth-child(1)) {
  background-color: pink;
}

  • E:first-child 匹配父元素的第一个子元素E。

  • E:last-child 匹配父元素的最后一个子元素E。

  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

  • E:first-of-type 匹配同类型中的第一个同级兄弟元素E

  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

  • E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

background背景

  • background-clip 设置背景显示区域在那显示。

    • background-clip: padding-box;
    • background-clip: border-box;
    • background-clip: content-box;

  • background-color 设置元素的背景色。

  • background-image 设置元素的背景图像，会显示在背景色的上层。

    • background-image: url(./img/1.webp);

  • background-origin 背景图从那里开始平铺。

    • background-origin: border-box;
    • background-origin: padding-box;
    • background-origin: content-box;

  • background-position 设置背景图片初始位置。第一个值是水平方向，第二个值是垂直方向。如果第二个值不写，就是center。

    • 一个值

      • 字符串 可选top、left、right、bottom、center。
      • 像素
      • 百分比

    • 两个值

      • background-position: 100px 100px;
      • background-position: center center;

  • background-repeat 设置背景图片的平铺方式。

    • background-repeat: no-repeat;
    • background-repeat: repeat-x;
    • background-repeat: repeat-y;
    • background-repeat: repeat;

  • background-size 设置背景图片的大小。

    • 一个值

      • contain 不变形，完整展示
      • cover 不变形，可能展示不完全

    • 两个值

      • 第一个值表示宽度。

      • 第二个值表示高度。

      • 示例

        • background-size: 600px 600px;
        • background-size: 100% 100%;

  • background-attachment 背景图是否随滚动而动。

    • scroll 默认值，表示背景相对于元素本身固定，而不是随着它的内容滚动。
    • fixed 表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

进阶参考

  1. :not()-MDN文档
  2. :nth-child()-MDN文档
avatar
文章
阅读
粉丝