css遗忘的知识点（Scoped 样式.:deep选择器. !important calc动态计算值.复杂边框效果.行内块与块元素）

----使用 Scoped 样式

在你的 Vue 组件中，你可以使用 <style scoped> 来定义只作用于当前组件的样式。这种方法可以确保你的样式不会影响到其他组件。

----:deep 或 ::v-deep 选择器

• :deep 或 ::v-deep 选择器用于在 scoped 样式中穿透到子组件的深层 DOM 结构，这是 Vue 提供的一种机制，用于在 scoped 样式中修改子组件的样式。
• 代码片段：

• :deep(.el-tabs--border-card>.el-tabs__content) {
    padding: 0;
    height: 90px;
  }

---- !important

使用 !important 是一种强制覆盖的方式，应谨慎使用，避免影响其他样式的可维护性。

----width: calc(100vw)

• calc() 是一个 CSS 函数，用于动态计算值。
• vw（viewport width）是相对于视口宽度的单位，1vw 等于视口宽度的 1%。

----border-image

于为元素的边框应用图像（包括渐变），从而实现复杂的边框效果

----行内块与块元素

行内块元素是指那些既能和其他元素待在一行，又能设置宽度和高度的元素。

块元素是指在网页布局中默认占据一整行宽度的元素。

行内块：   display: inline-block; 

块元素： display：block；

常见行内块元素：

• <img>：图像标签，用于在网页中嵌入图像。
• <input>：输入标签，用于创建各种输入控件，如文本框、按钮等。
• <textarea>：多行文本输入控件，用于输入大量文本。
• <select>：下拉列表，用于选择一项或多项。
• <button>：按钮控件，用于触发操作。
• <label>：为表单控件定义标签。

常见块元素：

• <div>：文档分区元素，用于将文档分割为独立的、不同的部分，是网页布局中最常用的容器元素。
• <p>：段落元素，用于定义文本段落。
• <h1>至<h6>：标题元素，用于定义不同级别的标题。
• <ul>和<ol>：列表元素，分别用于定义无序列表和有序列表。
• <li>：列表项元素，用于定义列表中的每一项。
• <table>：表格元素，用于定义表格。
• <form>：表单元素，用于定义用户输入的表单。
• <header>、<footer>、<article>、<section>：语义化标签，用于定义文档的不同部分，如页眉、页脚、文章、章节等。