相信小伙伴们逛B站的时候都见到过B站的字幕可以不遮挡人物的效果。

那么B站到底是如何实现这么神奇的效果的呢？经过一番摸索最终发现了其中的奥秘

主要是通过一行CSS属性mask-image:设置了一张图片为做元素的蒙版，使用人形图片遮挡住了弹幕

实践出真知：上demo

我们在写一个网站或者一个网页界面的时候，需要学习很多东西，对小白来说很困难！比如我要做一个简单的网页交互：

要懂后端，比如Python里面的Django或者Flask，或者是Java里面的SpringBoot

要懂前端，现在都叫大前端了(因为很复杂)，比如前端的框架Vue/React, 然后页面的美化框架Bootstrap ，还有html ,csss 和Javascript 三驾马车.

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。

设置

在本文中，我将继续使用我在第一篇 CSS Grid 布局教程文章

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

1.块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

元素显示模式分类

块元素：一般指该元素自身独占一行，如div标签、p标签、ul标签、li标签等。

特点：

今天的目标是这部分二级弹出导航，思路是：鼠标经过时导航出现，移开后导航隐藏。

·在横向导航后面添加一个大盒子，写上基本样式、宽高背景颜色，看下效果。

·现在写上绝对定位，让它脱离外层盒子的限制。同时是相对顶部的盒子定位，需要写上相对定位代码：border-bottom-left-radiu，左边距离0，上面距离140像素，看下效果。

·接下来给盒子里添加内容，跟横向导航差不多，呦爱哦列表基本格式，再加上一张图片、两行文字，内容快速添加，看下效果。

今天学习下html元素的显示模式，为了之后做页面布局做好铺垫，记住了这些元素的显示模式方式，可以少走很多弯路。

元素的显示模式

1，块元素

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。