css补充内容

news2024/7/4 4:25:20

1.最好给body设置min-width,防止缩小页面时出现空白

2.让图片随着网页缩小而缩小

3.html5语义化元素

4.video与audio

video是行内替换元素

默认是第一帧静态画面,需要手动调整画面大小和添加播放条,是否自动播放

大多数浏览器不支持自动播放,除非设置为muted,这是为了用户的体验考虑

Web audio codec guide - Web media technologies | MDN (mozilla.org)

即使开了autoplay默认也是静音的

5.input的拓展内容

placeholder如b站搜索栏默认的内容

加上multiple可以选择多个选项

autofocus默认聚焦于这个输入框,设置多个时只有一个生效

<input>：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)

6.新增全局属性data-*

进行js与html数据的交流,常用于小程序

7.white-space换行

nowrap

normal/wrap

pre写是什么样就怎么展示

pre-wrap

pre-line

8.text-overflow文本溢出

需要与overflow:hidden配合使用,如果不是hidden是visible(默认值)或者auto/scroll,text-overflow无效果

The meaning of HELLO is an

overflow: auto;相当于scroll

9.css中的函数

var自定义变量,一般写在html属性或者:root中,因为定义的变量只有后代元素可以使用

var

    html
    {
      --main-color:orange;
    }
  .box
    {
    color: var(--main-color);
  }

calc函数

width:300px-100px这种形式无法正常使用,必须写成width:calc(300px-100px)

易错:+/-符号两边必须要有空格

两个div间的换行是会产生空格的,所以如果一个div宽为100px,另一个为100%-100px

此时这种排布一行是放不下的:

如果想要一行排布,需要这样:

如果想要两个盒子在同一行,要设置 display: inline-block;

滤镜中的高斯模糊blur

如网易云音乐

blur

    .box
    {
      display: inline-block;
      position: relative;
    }
    .box img
    {
      display: block;
    }
    .cover
    {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
      backdrop-filter: blur(1px);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="../images/music_album01.jpg" alt="" >
    <div class="cover"></div>
  </div>