CSS中是否存在block、endblock命令？相关模板代码运行逻辑解析

关于block和endblock的归属 #

首先明确：block和endblock不属于CSS语法，你看到的是后端模板引擎的专属语法，以你给出的代码格式来看，这是Python生态常用的Jinja2模板语法（Flask、Django等框架默认都会集成该模板引擎），仅作用于服务端模板渲染阶段，和前端CSS没有任何关联。

上述代码的运行逻辑 #

你用到的是模板引擎的模板继承能力，运行逻辑如下：

• base.html是父模板，你在其中编写的{% block page_content %}{% endblock %}作用是在父模板的对应位置预留了一个名为page_content的可覆写占位区域，父模板的其他固定内容（比如后续可能加的公共头部、底部、公共CSS/JS引入）都会被所有继承它的子模板复用。
• Hello_World.html是子模板，第一行代码{% extends "base.html"}的作用是声明该子模板完整继承base.html的所有内容，无需重复编写父模板里已经存在的公共代码。
• 子模板中编写的{% block page_content %}<h1>Hello, World!</h1>{% endblock %}作用是覆写父模板中预留的page_content占位区域的内容，你在该block标签内写的所有内容，都会替换掉父模板中对应block的位置。

当服务端渲染Hello_World.html时，模板引擎会自动合并父子模板的内容，最终输出给浏览器的HTML会包含父模板的所有公共内容，同时在page_content对应的位置输出你写的<h1>Hello, World!</h1>内容。

内容的提问来源于stack exchange，提问作者Icon