/* 第三方组件库样式 */
.el-button {
  border-radius: 4px;  /* 权重: 0,1,0 */
}

/* 覆盖样式 */
.parent ::v-deep .el-button {
  border-radius: 0;  /* 权重: 0,1,1 - 能覆盖 */
}

内联样式style="..."：内部优势(基因)

<p style="background:red"></p>


element.style.background = 'red';
element.style.setProperty(..., 'important')

选择器(权值)：具体优势

三元组`(A,B,C)`（身份证，特点，物种）

A: ID选择器的数量
B: 类、属性、伪类的数量
C: 元素、伪元素的数量

div p.myClass#myId：元素选择器（0,0,1） + 元素选择器（0,0,1）+ 类选择器（0,1,0）+ ID选择器（1,0,0），权重为（1,1,2）。

类似版本号比较

/* 示例比较 */
(1,0,0) > (0,12,12)    /* ID选择器胜出 */
(0,2,1) > (0,1,5)      /* 2 > 1，前者胜出 */
(0,1,3) < (0,2,0)      /* 1 < 2，后者胜出 */
(0,1,1) vs (0,1,1)     /* 平局，后写的生效 */

（1,0,0）ID 选择器：`#`

（0,1,0）类、伪类选择器(`:hover` )、属性`[attribute=value]`

element.classList.add('active');

属性选择器：`[attribute=value]`

/* 选择所有含有 "data-attribute" 属性的元素 */
[data-attribute] {
  
}

[title]
{
    color:blue;
}

/* 选择所有 "data-attribute" 属性值为 "value" 的元素 */
[data-attribute=value] {
  /* 样式 */
}
[title=runoob]
{
    border:5px solid green;
}

/* 选择所有 "data-attribute" 属性值以 "prefix-" 开头的元素 */
[data-attribute^=prefix-] {
  /* 样式 */
}
/* 选择所有 "data-attribute" 属性值以 "-suffix" 结尾的元素 */
[data-attribute$=-suffix] {
  /* 样式 */
}
/* 选择所有 "data-attribute" 属性值包含 "substring" 的元素 */
[data-attribute*="substring"] {
  /* 样式 */
}

/*复合选择*/
/* 选择所有 "data-attribute" 属性值以 "start" 开头且以 "end" 结尾的元素 */
[data-attribute^=start][data-attribute$=end] {
  /* 样式 */
}

伪类选择器：:hover/active/nth-child(even)/first-child/last-child

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

（0,0,1）元素/HTML标签、伪元素选择器(`::before` )

（0,0,0）通用选择器：`*`

（0,0,0）关系选择器(ul li)

子元素：ul li

直接子元素：h1>son

兄弟：h1~bros

相邻兄弟：h1+bro

群组：h1,h2 同时选择

后加载优势（成长覆盖）

浏览器确实会将所有样式表按加载顺序合并成一个虚拟的大样式表

.html

CSS优先，JS置后
重置样式 → 组件库 → 自定义样式
关键资源优先，非关键异步
动态样式通过JS在适当时机添加

<head>
  <!-- 1. 字符编码和viewport -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 2. 关键CSS（内联） -->
  <style>/* 首屏必要样式 */</style>
  
  <!-- 3. 外部CSS（按依赖顺序） -->
  <link href="reset.css" rel="stylesheet">
  <link href="libs.css" rel="stylesheet">
  <link href="components.css" rel="stylesheet">
  <link href="main.css" rel="stylesheet">
  
  <!-- 4. 预加载资源 -->
  <link rel="preload" href="app.js" as="script">
</head>
<body>
  <!-- 页面内容 -->
  
  <!-- 5. 非关键CSS（异步加载） -->
  <link href="non-critical.css" media="print" onload="this.media='all'">
  
  <!-- 6. JavaScript -->
  <script src="app.js" defer></script>
  
  <!-- 7. 动态样式（通过JS在运行时添加） -->
</body>

构建工具会自动优化加载顺序

// webpack.config.js
module.exports = {
  optimization: {
    // 自动提取CSS并注入到HTML中
  },
  plugins: [
    new MiniCssExtractPlugin({
      // CSS文件会自动按正确顺序插入
    })
  ]
};

.vue


<srcipt>
  <!-- 1.外部样式表 -->  
    import '/style.css'
  <!-- 2.嵌入样式表 -->  
    const style = document.createElement('style');
    style.textContent = '.dynamic { color: green; }';
    document.head.appendChild(style);
</script>


<!-- 4.scoped嵌入样式表 --> 
Vue会把scoped样式注入到文档最后，所以v-deep选择器天然具有"后写"优势

<style scoped>

.parent ::v-deep .el-button.el-button--primary {
  border-radius: 0 ;
}
</style>

scoped 多了个属性选择器，加了权重10


<!-- 编译后 -->
<style>
[data-v-xxxx] .el-button { color: red; }
</style>

<!-- 3.嵌入样式表 --> 
<style>
.parent .el-button.el-button--primary {
  border-radius: 4px;  /* 权重: 0,2,1 */
}
</style>

盒模型：width=content（+padding + border）

offsetHeight= height + padding + border + scrollbar（如果可见）

class="content-box"内容盒模型（W3C盒）【默认】

* {
  box-sizing: border-box;
}

当固定宽/高，margin，padding均是向外扩展

class="border-box"边框盒模型（IE 盒）【推荐，符合直觉，便于计算】

只读（计算）：offset、client

可改：scroll（Left、Top）、width、padding、border等

scroll滚动

1、scrollHeight：实际高度。

2、scrollWidth：实际宽度。

3、scrollLeft：被隐藏左侧，可设置。

4、scrollTop：被隐藏上方。可设置。

// 获取右侧隐藏的像素数
const scrollRight = element.scrollWidth - element.clientWidth - element.scrollLeft;

// 获取底部隐藏的像素数 
const scrollBottom = element.scrollHeight - element.clientHeight - element.scrollTop;

window浏览器视窗：包括滚动条

单位⭐⭐⭐

绝对长度单位：

px 像素

打印：

- cm - 厘米

- mm - 毫米 -

in - 英寸 (1in = 96px = 2.54cm)

- pt - 点 (1pt = 1/72in)

- pc - 派卡 (1pc = 12pt)

/* 通常避免在web中使用 */
.avoid {
  width: 3cm;    /* 打印样式才用 */
  height: 2in;   /* 不精确，依赖设备 */
  font-size: 12pt; /* 打印用 */
}

相对长度单位：

%

如果父标签没有设置高度，则高度由当前内容决定

如果父标签设置了高度，当前标签的内容高度超过了父标签

min-height: 100%：会撑开父

height：100%不会超过父

字体：

em：相对于当前元素的字体大小

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem：相对于根元素（通常是`html`标签）

根元素默认16px，则1rem=16px

应用：移动端

1. 响应式适配：通过调整根字体大小，可以统一缩放整个页面的尺寸
2. 设备适配：在不同屏幕尺寸的设备上保持相对一致的视觉比例
3. 维护性：修改根字体大小即可全局调整，无需逐个修改样式
4. 无障碍性：支持用户自定义字体大小设置

相对视窗：vw，vh，vmin，vmax

- vh - 相对于视口高度的1%

- vw - 相对于视口宽度的1%

- vmin - 相对于视口较小尺寸的1%

- vmax - 相对于视口较大尺寸的1%

应用

linear-gradient: 只支持 % 和 px
字体相关: 主要用 px, em, rem
边框：主要用px
全屏效果: 用 vh, vw
打印样式: 才考虑 cm, mm, in, pt

position关键字⭐⭐⭐

inherit ：继承

`static（默认）`（`top`, `right`, `bottom`, `left` , `z-index无效)`

元素在文档流中按照它们在HTML中的顺序和位置进行排列。
在文档流中的顺序决定了它们的显示层级z-index
在 Flexbox 或 Grid 布局中，所有子项（包括 position: static 的）都会创建一个层叠上下文，此时它们的 z-index 是有效的。

`其他定位才能位移+层级`

位置偏移（top, right, bottom, left ）用于调整元素相对于其包含块位置
偏移为绝对坐标值，左上为零点，如right=left+width

同时设置 left 和 right ：文档方向（LTR vs. RTL）

LTR（从左到右）：中英等大多数语言，通常优先使用 left 属性。

RTL（从右到左）：阿拉伯语或希伯来语的语言。right 属性通常优先于 left。

同时设置 top 和 bottom 属性不会受到文档方向的影响，因为文档是从上到下渲染

但是在没设置宽度时，会改变宽度

因此一般只用设置一个方向的值即可

`relative：`相对原本的位置

sticky(CSS3新增)：relative+fixed

包含块 ≠ 滚动祖先

正常流中：在页面初始加载或未滚动到特定阈值时，它就像一个没有设置偏移的position: relative 的元素，待在自己的原始空间。
滚动时变为固定：当你滚动页面，这个元素距离其 “最近的滚动祖先” （就是它外面第一个设置了 overflow: scroll/hidden/auto 的祖先元素，如果找不到，就是整个浏览器视口）顶部的距离达到你设置的 top: 10px; 值时，它的行为就瞬间变得像 position: fixed 一样，视觉上固定在那个位置，不再随滚动而移动。
包含块滚出视口：sticky 的“粘性”是相对于其包含块的，sticky 元素也跟着消失

脱离文档流

不是指“元素看不看得见”，而是指 “它在原始布局中是否还占地方”。

位置超出包含块： 定位脱离文档流

可见：包含块设置 overflow: visible

absolute：相对static 外的第一个父元素

默认定位：不设置偏移

当你不设置 top/bottom/left/right 时，浏览器为了不让这个元素“消失”，会应用一个默认规则：让它待在它原本在文档流中的位置。

如：当绝对定位元素没有设置 top 值时，它会默认与包含块的顶部对齐，

fixed：相对视窗

float：脱离文档流，允许文本和内联元素环绕它

overflow：内容溢出padding时

visible（默认）：超出可见

内容不能被裁减并且可能渲染到边距盒（padding）的外部。

hidden：可scrollTo()滚动

如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。

内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。

clip：禁止所有滚动

clip 和 hidden 之间的区别是 clip关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。

scroll：无论是否超出都显示滚动条

auto：超出才显示滚动条

display常见值

/* 预设值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;

/* 生成盒子 */
display: none;
display: contents;

/* 其他值 */
display: table;
display: table-row;

display: flex;

容器属性：元素排列

flex-direction主轴：row（默认）/column(-reverse)

flex-wrap: nowrap（默认） | wrap | wrap-reverse

flex-flow=flex-direction flex-wrap

justify-content主轴：flex-start（默认）/end、center、space-between/around/evenly

align-items交叉轴：flex-start/end、center、stretch（默认）、baseline(center，text在交叉轴)

align-content:多根主轴，以交叉轴为对齐 flex-start |end | center | space-between | around | stretch（默认）

项目属性：项目大小

flex-grow：默认0，若主轴存在剩余空间，沿主轴方向不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink ：默认1，若主轴空间不足，沿主轴将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis：基本占用空间，默认auto=0%

（计算main axis size）和width/height同单位

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto=0%，即项目的本来大小

它可以是一个具体的长度值（如 px 或 %），也可以是 auto，表示由项目的内容决定。

flex=flex-grow，flex-shrink，flex-basis:auto

默认值为 0 1 auto。后两个属性可选

`auto` (`1 1 auto`) ，none (`0 0 auto`)

/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值：flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 2 2;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

align-self：覆盖容器的 align-items

display:inline、block、inline-block⭐⭐⭐

HTML 标签分类

文本级标签：p（段落）、span、a（超链接）、b（粗体）、i（斜体）、u（下划线）

容器级标签：div、h系列、ul、li、canvas、article

行显示标签分类

行内元素：文本级标签（除了p）

p在段落前后添加空行。

特征：只有在行内显示，不会自动进行换行，

宽、高不可设置，由内容决定

可替换元素：img、input、textarea文本域可设置宽高，

它们的尺寸可以通过指定属性（如width和height）来进行设置。

因为包含外部资源或用户输入，所以允许开发者设置宽度和高度，以便更好地控制它们的显示。

设置float后脱离了文档流，可以设置宽、高

对 margin 仅设置左右方向有效，上下无效

padding 设置上下左右都有效

块级元素：容器级标签+p

特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

行内块：同一行内多个元素，并且可以设置宽、高以及margin

BFC规范

BFC块级格式化上下文（Block Fromatting Context）

外边距重叠：magrin=max(top，bottom)

垂直方向：兄弟/父子元素

外边距合并（margin collapsing）是正常文档流中的一种行为，

块的上外边距margin-top和下外边距margin-bottom会合并为单个边距（为单个边距的最大值）

浮动导致父高度塌陷：height=max[非浮动子元素,0]

因为浮动元素脱离正常文档流，浮动元素的父元素无法正确计算其高度。

不浮动的元素被浮动元素覆盖

但文字内容不会被覆盖，因为float的出生本来是为了文字环绕图片排版功能

父级常见触发条件

独立布局，盒子内子元素样式不与外部互相影响

overflow: 不为visible（默认）

子元素块级格式化：display: flex | inline-block | table-cell

脱离文档流：position: absolute | fixed

清除浮动：父高度塌陷+非浮动元素被浮动覆盖

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

clear:clearfix原理

float一样对应的值（left、right、none、inherit）+both

指定段落的左侧或右侧不允许浮动的元素：浮动元素换行

A.浮动标签在段落后面：浮动元素不能撑起父元素高度

块级元素.textDiv的位置先确定了，于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。

父元素的高度并没有被浮动元素撑起来，导致浮动影响到了接下来的元素排版

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

B.浮动标签在段落前面：浮动元素在上行，由非浮动段落元素撑起高度

.textDiv {
    color: blue;
    border: 2px solid blue;
    clear: left;
}

C.浮动元素周围的元素clear+父元素结束标签之前插入clear:left的空白块级元素

a.元素

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

...
.blankDiv {
    clear: left; 
}
.textDiv {
   clear: both; 
}

b.`:after`伪元素

在.topDiv的div上再添加一个clearfix类

clear该伪元素的display值为block，即，它是一个不可见的块级元素

（有的地方使用table，因为table也是一个块级元素

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

BFC

overflow: 不为visible（默认）

子元素块级格式化：display: inline-block | table-cell

文档流

顺序依次布局+块级/行内特性

脱离正常文档流：只有块级元素才能脱离文档流

行内元素使用float/absolute/fixed会脱离文档流会自动变为块级元素，此时可以设置宽高

BFC独立渲染区内的元素

absolute

fixed

absolute,fixed覆盖所有容器和文本

float

float覆盖所有容器

css如何减少回流、重绘

虚拟DOM：Diff差异，批量更新

GPU硬件加速

absolute或fixed，脱离文档流

visibility 替换 display: none

响应式布局：不同尺寸

/* 当屏幕宽度小于 600px 且高度小于 800px 时应用这些样式 */
@media (max-width: 600px) and (max-height: 800px) {
  /* 你的 CSS 样式代码 */
}

/* 当设备处于纵向（竖屏）方向时应用这些样式 */
@media (orientation: portrait) {
  /* 你的 CSS 样式代码 */
}

/* 当设备处于横向（横屏）方向时应用这些样式 */
@media (orientation: landscape) {
  /* 你的 CSS 样式代码 */
}

媒体查询

flex弹性布局

百分比单位

a标签：target新窗口

HTML5 不支持 link target 属性

几乎没有主流浏览器支持 target 属性

<a href="" target="_blank">新的浏览器窗口或选项卡中new window/tab</a>
<a href="" target="_parent">上一级窗口或框架中打开目标页面。如果当前页面没有父窗口或框架，则与 _self 效果相同 parent frame</a>
<a href="" target="_self">默认。在当前窗口或框架中打开目标页面same frame (default)</a>
<a href="" target="_top">在当前窗口或框架的最顶层中打开目标页面。如果当前页面不在框架中，则与 _self 效果相同Open in top-level frame</a>