元素显示模式就是元素（标签）以什么方式进行显示，比如div标签自己占一行，一行可以放多个span标签。

HTML 元素分为块元素、行内元素、行内块元素，它们具体的用法和区别如下：

我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。

作者：YJ

转发链接：https://mp.weixin.qq.com/s/_JFheujWvvB6ffsVQgLMOA

前言

周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。

相信小伙伴们逛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标签等。

特点：