跳到主要内容

题目 1-题目 5

T1.CSS 变量​

1.定义 CSS 变量​

CSS 变量使用 -- 前缀来定义，并且可以在任意选择器中定义。它们可以在任何作用域中声明，作用域决定了变量的可访问范围。

:root {
  --primary-color: #3498db; /* 定义全局变量 */
}

2.使用 CSS 变量​

使用 CSS 变量时，通过 var() 函数来引用变量的值。

body {
  background-color: var(--primary-color); /* 使用 CSS 变量 */
}

3.作用域​

·全局作用域：如果在 :root 中定义变量，它可以在整个文档中访问。
·局部作用域：如果在某个元素或类中定义变量，它仅在该元素及其子元素中有效。

4.默认值​

CSS 变量可以为 var() 函数提供一个默认值，当变量未定义或值为空时，使用默认值。默认值在 var() 的第二个参数中指定

.content {
  color: var(--text-color, black); /* 如果 --text-color 未定义，则使用 black */
}

5.动态修改 CSS 变量​

CSS 变量具有动态性，可以通过 JavaScript 来修改它们的值。修改变量时，浏览器会立即重新渲染受影响的元素，使得它们能够响应变化。

document.documentElement.style.setProperty('--primary-color', '#e74c3c')

T2.浏览器解析 CSS 选择器的顺序​

浏览器会『从右往左』解析 CSS 选择器。
浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历。
从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是 DOM 元素的父节点，而从左往右进行匹配的时候时候，匹配的全部是 DOM 元素的子节点，这样就避免了 HTML 与 CSS 没有下载完需要进行等待的情形

T3.CSS 中三栏布局的实现方案有哪些​

1.Flexbox 布局​

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .sidebar-left, .sidebar-right {
    flex: 0 0 200px; /* 固定宽度 */
  }
  .main {
    flex: 1; /* 自动填充剩余空间 */
  }
</style>

2.CSS Grid 布局​

<div class="grid-container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 定义三列的宽度 */
    gap: 10px; /* 列间距 */
  }
  .sidebar-left, .sidebar-right {
    background-color: #f0f0f0;
  }
  .main {
    background-color: #e0e0e0;
  }
</style>

3.浮动布局​

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    overflow: hidden; /* 清除浮动 */
  }
  .sidebar-left, .sidebar-right {
    float: left;
    width: 200px; /* 固定宽度 */
  }
  .main {
    margin: 0 200px; /* 设置左右边距 */
  }
</style>

4.绝对定位布局​

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    position: relative;
    height: 100vh; /* 高度为视口高度 */
  }
  .sidebar-left, .sidebar-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px; /* 固定宽度 */
  }
  .sidebar-left {
    left: 0;
  }
  .sidebar-right {
    right: 0;
  }
  .main {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
  }
</style>

5.渲染优先级​

ID 选择器（如 #header）：特指度最高。
类选择器（如 .menu）、属性选择器（如 [type="text"]）和伪类选择器（如 :hover）：特指度次之。
元素选择器（如 div）和伪元素选择器（如 ::before）：特指度最低。
通配符选择器（如 *）、组合器（如 >、+）和伪类（如 :not()）的特指度通常较低。

Loading Comments...