你不知道的CSS！

1.选择器

01.普通选择器

（1）标签选择器，例如：p,h1,h3,div { }

（2）类选择器，例如：.box { }

（3）id选择器，例如：#box { }

（4）通配符选择器，例如：* { }

02.复合选择器

（1）后代选择器，例如：父元素  子元素 { }

（2）子元素选择器，例如：父元素>子元素 { }

（3）交集选择器，例如：p.red { }      只选中一类标签：要同时满足是标签P，且类名为red

（4）并集选择器，例如：p, .red { }    会选中两类标签：标签P，类名red的两种元素同时被选中

03.属性选择器（H5）

04.伪类选择器

公式参考：

（1）奇数：2n+1

（2）偶数：2n

（3）从第五个开始：n+5

（4）前五个：n-5

（1）E：nth-child(公式)    选中父元素E的指定孩子。

（2）E：first-child       选中父元素E的第一个孩子。

（3）E：last-child       选中父元素E的最后一个孩子。

05.结构伪类选择器

用法：虚拟节点默认是行内元素，一般需要转为display：block来使用。

           还需要设置content：'内容'，否则将不会显示虚拟节点。

（1）::before        在元素的最前面插入一个虚拟节点。

（2）::after           在元素的最后面插入一个虚拟节点。

2.属性文档

01.100%需要用到的属性

（1）width：150px | 100%         宽度

（2）height：150px | 100%        高度

（3）line-height：1.2 | 40px        行高

（4）color：#bfa | rgba(255,255,255,.3)    颜色

（5）text-align：center        文字水平居中

（6）text-indent：20px        首行缩进

（7）text-decoration：none | underline   文本修饰(下划线、上划线、删除线)

（8）cursor：pointer | move | default      鼠标样式

02.display

盒子的显示模式：行内元素、行内块元素、块元素。

display：inline | inline-block(最好避免使用) | block

03.box-sizing

box-sizing是设置盒模型。 一般使用border-box可以减少我们的计算量，一旦使用了

border-box，即盒子的宽高将会固定，padding、border也不会撑大盒子。

box-sizing：border-box(常用) | content-box(默认)

04.border-shadow

border-shadow是设置盒子的阴影。

（1）普通写法

border-shadow：[阴影模式、x轴移动距离、y轴移动距离、模糊半径、颜色]。

示例1：内阴影：box-shadow: inset 2px 3px 5px rgba(255,255,255,.3)

示例2：外阴影：box-shadow: 2px 3px 5px rgba(255,255,255,.3)

（2）叠加写法（哪个方向阴影先设置，它的层级就越高。）

box-shadow: inset 0 0 20px #fff,

                     inset 10px 0 50px #f0f,

                     inset -10px 0 50px #0ff,

                     inset 10px 0 120px #f0f,

                     inset -10px 0 120px #0ff,

                     0 0 50px #fff,

                    -10px 0 50px #f0f,

                     10px 0 50px #0ff,

05.border-radius

border-radius用于设置盒子的圆角。

（1）普通写法

border-radius：50% | 15px

border-radius: [左上角 右上角 右下角 左下角]

（2）圆弧写法（只要x、y大小不一致，就可以画出椭圆弧线）

border-top-left-bottom: 20px 10px。（第一个值x轴大小，第二个值y轴大小，以此来画弧线）

border-top-right-bottom: 20px 10px。

border-bottom-left-bottom: 20px 10px。

border-bottom-left-bottom: 20px 10px。

06.text-shadow

text-shadow表示文字阴影，使用方法参考：border-shadow。 也可以设置多重阴影。

07.font

简写属性，font: 字体倾斜 字体粗细 字体大小/行高 字体簇。

（严格按照顺序，font-size和font-family必选）

（1） font-family：'Microsoft Yahei'｜'tahoma'｜'arial' (多个字体之间用逗号隔开)

（2） font-size：数字px

（3） font-weight： 数字(400-700) | bold | nomal

（4） font-style： normal | italic

08.background

简写属性，background：背景颜色 url(不要加双引号) 背景平铺 背景位置 背景固定

背景渐变：linear-gradient(to，bottom, red, blue)  向下渐变

                  linear-gradient(to，right, red, blue)      向右渐变

                 linear-gradient(to，left, red, blue)         向左渐变

                 linear-gradient(to，top, red, blue)         向上渐变

（1） background-color： #bfa | transparent | rgb(...) | rgba(...)

（2） background-image： url(路径)    路径没有引号哦！

（3） background-repeat： repeat | no-repeat | repeat-x | repeat-y

（4） background-position： right top | right(另一个默认center) | 30px 40px

（5） background-attachment（是否固定）：scroll(默认随之滚动) / fixed(固定)

（6） background-size（尺寸大小）： width height | cover | contain | 百分比

09.transition（过渡）

谁做过渡，transition属性就给谁加。

同时会具备两个事件：transitionstart(开始过渡时触发)、transitionend(过渡结束后触发)

transition: 过渡属性 持续时间 过渡函数 过渡延迟

示例：transition：all .3s

10.position（定位）

开启定位后，该标签就多个几个可用属性：

（1）top、bottom、left、right

（2）z-index

注意事项：

（1）开启定位后，margin：auto将会失效！

（2）开启定位后，盒子变成inline-block，通常需要手动给盒子设置width：xxx。

position: staic(默认) | relative | absolute | fixed 

11.transform（形变）

（1）设置形变的原点

transform-origin: center; /* 设置原点在盒子中心 */
transform-origin: left top; /* 设置原点在盒子左上角 */
transform-origin: right bottom; /* 设置原点在盒子右下角 */
transform-origin: 30px 60px; /* 设置原点在盒子坐标 (30, 60) 位置 */

（2）平移

transform：translate(x轴, y轴)

transform：translateX(15px | 50%)    百分比是相对于自身盒子的大小

transform：translateY(15px | 50%)    百分比是相对于自身盒子的大小

（3）旋转

transoform：rotate(150deg)

（4）缩放

transform：scale(1.2)       x轴、y轴同时放大到1.2倍

transform：scaleX(1.2)     x轴放到到1.2倍

transform：scaleY(1.2)     y轴放到到1.2倍

12.animation（动画）

//  属性
（1）定义动画帧
	@Keyframes 动画名称{ ...（动画帧） }	
（2）使用动画帧（根据名称）
	animation-name：刚刚起的动画名称
（3）动画持续时间
	animation-duration：0s（默认是0s，单位可以是s或者ms）
（4）运动曲线
	animation-timing-function：ease（默认）| linear（线性）| steps（步长）| ease-in（低速开始）
    | ease-out（低速结束）| ease-in-out
（5）动画延时执行
	animation-delay：0（默认，单位可以是s或者ms） 
（6）动画播放次数
	animation-iteration-count：数值 | infinite（无限循环）
（7）下一次动画是逆向还是正向播放
	animation-direction：normal（正向）| alternate（逆向）
（8）控制动画启动和暂停
	animation-play-state：running（启动）| pause（暂停）
（9）动画结束后，是保持结束状态，还是回到开始状态。
	animation-fill-mode：forward（保持）| backwards（回到最初的起点）    

	简写属性：  animation：【动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画状态（开始或者结束）,第二个动画】 


//  如何定义动画？    可以一次添加多个动画，用逗号隔开即可。
@keyframes move {
   0% {  transform: translate(0,0);  }
   25% { transform: translate(100px,0); }
   50% { transform: translate(100px,100px); }
   75% { transform: translate(0, 100px); }
   100% { transform: translate(0,0); }
}                   

3.布局

01.float布局

虽然浮动会脱离文档流，但是它始终无法离开它的文档流父元素、无法压住上层的盒子。

实际上，开启float后，盒子变成inline-block。

float：left | right | none   添加浮动

clear：left | right | both   清除浮动

02.flex布局

flex布局特点：默认沿x轴排列，元素宽度固定，高度默认会被拉伸至充满容器。

（1）flex-direction：row | column        主轴排列方向

（2）flex-wrap：wrap | nowrap           放不下是否要换行

（3）justify-content：center | flex-start | flex-end | space-between | space-evenly | space-arround

        主轴排列方式

（4）align-items：center | flex-start | flex-end | strength(拉伸)          侧轴排列方式(侧轴只有一行)

（5）align-content：center | flex-start | flex-end | space-between | space-evenly | space-arround

        侧轴排列方式（侧轴有多行的时候）

（5）flex：0 1 auto        拉伸的写法

（6）flex：1 0 auto        压缩的写法

03.网络布局

---

内容有点多，不想写了...... 查百度吧。

4.CSS技术方案

01.水平、垂直居中

// 方案1：margin只能垂直居中。
div {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

// 方案2：flex水平、垂直居中。
div {
    display: flex;
	justify-content: center;
	align-items: center;
    width: 100px;
    height: 100px;
}

// 方案3：transform水平、垂直居中。
div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

// 方案4：line-height + text-align 水平、垂直居中。
div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

02.文字溢出

有时候，文字巨特么多，我总不能让它这么轻松的就溢出盒子导致页面不堪入目吧。

// 单行文本溢出
div{
    display: block;    // oveerflow只对块元素起作用。
	overflow: hidden;  // 超出部分隐藏 
	width: 200px;      // 容器宽度 
	white-space: nowrap;      // 不换行 
	text-overflow: ellipsis;  // 溢出部分显示省略号 
}

// 多行文本溢出（兼容性写法）
.text-container {
    overflow: hidden;             // 溢出隐藏
    display: -webkit-box;         // 弹性伸缩盒子模型显示
    -webkit-line-clamp: 3;        // 限制显示行数
    -webkit-box-orient: vertical; // 设置或检索伸缩盒对象子元素的排列方式

}

03.图片宽高比例失调

​要实现在屏幕缩放时，图片能够自适应并保持长宽比为 16:9 或 1:1，
同时又不能被压缩，可以通过 CSS 的 object-fit 属性和媒体查询来实现。
object-fit 属性用于指定替换元素（如 <img> 标签）的内容应该如何适应其容器。

以下是一个示例代码，展示了如何实现图片自适应并保持长宽比为 16:9 或 1:1 的效果：

<style>
  .image-container {
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
    position: relative;
    overflow: hidden;
  }

  .image-container.square {
    padding-bottom: 100%; /* 1:1 比例 */
  }

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 图片自适应并保持长宽比 */
  }
</style>


<div class="image-container">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>

<div class="image-container square">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>

在上面的代码中，通过设置 .image-container 元素的 padding-bottom 属性来实现容器的高度与宽度之比为 16:9 或 1:1。图片使用绝对定位填充整个容器，并通过 object-fit: contain; 实现图片自适应并保持长宽比的效果。

通过媒体查询可以根据屏幕宽度等条件来调整图片容器的大小，从而实现在不同屏幕尺寸下图片的自适应效果。这样，无论屏幕如何缩放，图片都能保持所需的长宽比，同时不会被压缩变形。

object-fit 属性部分说明：有兼容性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

1. object-fit: contain
	图像的大小将被调整以适应其容器的长宽比。如果图像的长宽比与容器的长宽比不一致，它就会被“黑边化”。（即图像的长宽比不变）
	
2. object-fit: cover
	图像也将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，那么它将被剪切以适应。

3. object-fit: fill
	图像将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，它将被挤压或拉伸。
	
4. object-fit: none
	图像根本不会被调整大小，既不会被拉伸也不会被挤压。它的作用与cover类似，但它不依赖于其容器的长宽比。
...


​

04.上外边距重叠

// 问题描述
子元素设置margin-top，把父元素也顶下去了。

//  解决方案： 想办法在上面添加一个东西，把两个元素隔开。
方案1：隔离法： 给父元素设置overflow：hidden。
方案2：子绝父相： 让子元素脱离文档流。（最优解） 
方案3：在子元素的前面的前面添加一个空盒子
      .clearfix::before, 
      .clearfix::after {
         content: "";
         display: table;
         clear: both;
      }
      .clearfix {   // 这个是解决ie6,ie7兼容问题
         *zoom: 1
      }

05.浮动导致高度塌陷

// 问题描述
父元素没有设置高度，子元素都开启了浮动，导致父元素高度塌陷，没有高度。

// 解决方案：将来给父元素添加类名clearfix
.clearfix::before, 
.clearfix::after {
   content: "";
   display: table;
   clear: both;
}
.clearfix {   // 这个是解决ie6,ie7兼容问题
   *zoom: 1
}

06.行内块之间有空白缝隙

// 问题描述
两个img之间，往往会有空白缝隙，这是由于img与img之间在HTML中换行了，导致多出一个空格。

// 解决方案
方案1：让img之间只要不是基线对齐, 其他对齐方式都ok.
例如：vertical-align: bottom
        			 baseline (默认基线对齐)
        			 top
					 middle
        
方案2: 将img转成块元素。可以通过display、float、flex。

07.a标签添加样式失效

// 问题描述
有时候无论怎么给a标签的父元素添加样式，a标签始终就是不会受到其父元素的影响，
这是由于a标签在浏览器中有默认样式，这个涉及到css优先级问题，继承的优先级 < 默认样式的优先级。

// 解决方案
单独选中这个a标签，并给其添加样式。

 08.css三角形

// 用边框画（border）
{
	width: 0;
	height: 0;
	border-left:100px solid transparent;
	border-right:100px solid transparent;
	border-top:100px solid transparent;
	border-bottom:100px solid #ccc;
}

*****************************

 01.移动端适配的方式有哪些？

// 方案1：淘宝
使用rem作为单位，再配合淘宝flexible库（动态修改HTML的font-size大小达到响应式效果）

// 方案2：京东
用vw作为单位，代替px。


// 提供插件的安装方式
flexible库地址：https://github.com/amfe/lib-flexible
VSCode插件：pxtorem可以帮我们自动把px转为rem单位。
            xxx可以帮我们把px转为vw单位。

02.改变css层级（核心）

// 以下情况会提升层级
1.position：absolute | relative | fixed | sticky，且z-index不为auto。

2.display：flex

3.opactiy的属性值小于1

4.transform的属性值不为none

03.改变css图层（核心）

情况1：让元素单独的开启一个新的图层

通过给元素设置css属性，transform：translateZ（0）可以让这个盒子在新的图层中显示，
由于这个操作会使新图层由GPU渲染，不会引起回流的情况。

情况2：如果两个盒子是堆叠关系，一个盒子在开启了新的图层，会导致另一个盒子也开启图层

// 问题描述：
box2的z-index比box1高，这就会导致box2的层级比box1高，box2会压着box1，
我们知道box1开启transform: translateZ(0)就会让box1在一个新的图层中显示，
那么这会影响box1和box2的关系吗？

// 解决方案：
其实并不会，box1开启transform: translateZ(0)，由于box1和box2之间有堆叠关系，
就会导致box2也会隐式的开启一个新的图层中显示。

.box1 {
    position:absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    background-color: #666;
    transform: translateZ(0); // 开启一个新的图层
}

.box2 {
    position:absolute;
    z-index: 10;
    left: 180px;
    top: 180px;
    width: 200px;
    height: 200px;
    background-color: #333;
}

04.opacity和rgba的区别

// 共同点：
都会让元素实现透明效果。

// 区别：opacity会被继承、rgba不会。
（1）opacity会让元素本身，会影响到其子元素。
（2）rgba只会让元素本身变透明。

05.回流和重绘

回流

// 回流
// 1.引起回流的情况
（1）修改DOM的几何信息的大小、位置。（例如：width、height、margin、padding）
（2）读取DOM的几何信息的大小、位置。（例如：clientWidth、clientHeight）

// 2.浏览器对回流的优化：如果发生了连续回流，就只会回流一次。
dom.style.width = '100px'
dom.style.height = '200px'
dom.style.left = '100px'
dom.style.top = '100px'

// 3.强制回流
去看第一个引起回流的情况即可。

重绘

// 1.什么情况会引起重绘
（1）修改背景颜色、字体颜色
（2）修改圆角边框
（3）修改背景图片

回流和重绘哪个耗费性能?

// 回流
回流耗费性能，它需要利用CPU进行计算。

// 重绘
重绘几乎不会耗费性能，它是利用GPU工作的。

怎么解决回流问题？

使用transform来代替margin，但是transform本身其实是会导致回流的，
真正的解决方案是：给消耗性能的盒子设置【transform：translateZ(0px)】，开启三维空间，
此时该盒子就会被分配到另外一个图层，该图层完全由GPU进行管理，这就是所说的开启了GPU加速，
此时才不会发生回流，但是一定会发生重绘。

// 注意事项
另外需要注意的是：硬件加速不是万金油，单独创建合成层是有代价的，每创建一个合成层，
就要为其分配内存，内存大小取决于复合层的数量。复合层的大小、层的管理也更为复杂，
在一些低端和终端移动端设备中更为明显，滥用 GPU 加速会引起页面卡顿甚至闪退。

06.display和visibility的区别

1. 占用位置的区别
	display: none; 		 // 隐藏元素，“不”占用位置
	visibility: hidden;  // 隐藏元素，占用位置

2. 重绘和回流的问题
	visibility: hidden;	// 产生重绘
	display: none;     	// 产生一次回流、重绘

 07.css优先级

优先级比较：!important > 内联样式 > id > class > 标签 > 通配

08.CSS选择器、可继承属性

1. CSS选择符：
    通配（*）
    id选择器（#）
    类选择器（.）
    标签选择器（div、p、h1...）
    相邻选择器(+)
    后代选择器(ul li)
    子元素选择器（ > ）
    属性选择器(a[href])
    
2. 可以继承：
		1. font 相关属性：font-size、font-weight、line-height。
		2. color：控制文本颜色。
		3. text 相关属性：text-align、text-decoration、letter-spacing、word-spacing。
		4. visibility：控制元素是否可见。
		5. cursor：指定鼠标悬停在元素上时的光标样式。
		6. list-style 相关属性：包括 list-style-type、list-style-position、list-style-image。
        
3. 不可继承属性：border、padding、margin...

09.哪些css可以影响到层级

屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中，x 为水平方向，y 为垂直方向，z 为屏幕由内向外方向，我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

1. 层叠上下文 (Stacking Context)

    层叠上下文 (堆叠上下文, Stacking Context)，是 HTML 中一个三维的概念。在 CSS2.1 规范中，每个元素的位置是三维的，当元素发生层叠，这时它可能覆盖了其他元素或者被其他元素覆盖；排在 z 轴越靠上的位置，距离屏幕观察者越近。

   在层叠上下文中，其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有：

    1. position 值为 absolute|relative，且 z-index 值不为 auto；
    2. position 值为 fixed|sticky；
    3. z-index 值不为 auto 的 flex 元素，即父元素属性 display: flex|inline-flex；
    4. opacity 属性值小于 1 的元素；
    5. transform 属性值不为 none 的元素；
    6. mix-blend-mode 属性值不为 normal 的元素；
    7. filter、perspective、clip-path、mask、mask-image、mask-border、motion-path 值不为 none 的元素；
    8. perspective 值不为 none 的元素；
    9. isolation 属性被设置为 isolate 的元素；
    10. will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
    11. -webkit-overflow-scrolling 属性设置为 touch 的元素；

2. 层叠等级

   层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；

    普通元素的层叠等级优先由其所在的层叠上下文决定；
    层叠等级的比较，只有在同一个层叠上下文元素中才有意义；
    在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；

   另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。

3. z-index

    z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为 auto；
    ​
    元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

4. 层叠顺序：描述的是元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：

    1. 背景和边框：形成层叠上下文的元素的背景和边框。
    2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
    3. 块级盒：文档流中的块级、非定位子元素；
    4. 浮动盒：非定位浮动元素；
    5. 行内盒：文档流中行内、非定位子元素；
    6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
    7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；

5. 面试中 或 写面试题 的回答

    css可以影响层级的属性非常多，本身屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中。
    ​
    x为水平方向，y为垂直方向，z为屏幕由内向外方向。
    ​
    我们在看屏幕的时候是沿着 z 轴方向从外向内的，由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖。
    ​
    那么元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：
    1. 背景和边框：形成层叠上下文的元素的背景和边框。
    2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
    3. 块级盒：文档流中的块级、非定位子元素；
    4. 浮动盒：非定位浮动元素；
    5. 行内盒：文档流中行内、非定位子元素；
    6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
    7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；
    ​
    那么这里就说几个可以影响层级的css属性吧：比如：
    1. 可以给position值为absolute 或 relative的添加z-index；
    2. 也可以通过transform: translateY(-100px);
    3. opacity属性值小于 1 的元素；
    ​
    等等好多都可以做到，这里就不一一举例了。

10.对BFC的理解

// 是什么
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

// BFC
1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
    （1）float的值非none
	（2）overflow的值非visible
	（3）display的值为：inline-block、table-cell、flow-root、flex、grid。
	（4）position的值为:absoute、fixed
		......
4. 用法
		4.1 阻止相邻元素的 margin 合并
		4.2 包含浮动元素
		......

11.简述什么是伪元素和伪类，并列举一些自己知道的伪元素和伪类

// 伪元素：在元素节点中，创建一个不存在的元素，并为其添加样式。
::before：在元素内容之前插入内容
::after：在元素内容之后插入内容
::first-line：选择元素的第一个行
::first-letter：选择元素的第一个字母

// 伪类：是用于选择元素的特定状态或行为的关键词，它可以应用于已存在的元素。
:hover：当鼠标悬停在元素上时应用的样式
:active：元素正在被用户交互（如点击）时应用的样式
:focus：元素获得焦点（如键盘焦点或点击）时应用的样式
:nth-child(n)：选择父元素的第n个子元素
:not(selector)：选择不匹配给定选择器的元素

12.css精灵图的优缺点

// 是什么
	把多个小图标合并成一张大图片。

// 优缺点
	优点：减少了http请求的次数（减少了服务器和客户端之间的通信开销），提升了性能。
	缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

13.flex的属性

flex属性是：flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto。后两个属性可选。

一、flex-grow：
	1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
	2. 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

二、flex-shrink
	1. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
	2. 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
	
三、flex-basis
	1. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
	2. 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

14.简述px、em、rem的区别

1. px 是绝对单位（具有固定的大小：不会随着页面或元素的缩放而改变大小）
2. em 是相对单位，相对于“父元素的字体大小来计算元素的大小”。
3. rem 是相对单位，相对于根元素（html 元素）的字体大小来计算元素的大小。

总结：px 是绝对单位，em 和 rem 是相对单位，其中 em 相对于父元素的字体大小，
      而 rem 相对于根元素的字体大小。

15.响应式布局和弹性布局区别和应用

响应式布局和弹性布局是两种常见的网页布局技术，它们有一些区别和应用场景：

1. 响应式布局（Responsive Layout）：

   • 响应式布局是一种设计方法，通过使用媒体查询和弹性网格等技术，使网页能够根据用户设备的不同尺寸和分辨率进行自适应调整，以提供更好的用户体验。

   • 在响应式布局中，网页会根据设备的屏幕大小和方向，调整元素的布局、大小、位置等，以确保内容在不同设备上都能够正常显示。

   • 响应式布局通常会使用百分比、媒体查询、弹性盒子等技术来实现布局的自适应性，可以让网页在桌面、平板和手机等不同设备上都有良好的显示效果。

    /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
    @media screen and (max-width: 600px) {
      body {
        background-color: olive;
      }
    }
      
    /* 当页面宽度大于等于 900 像素时应用该样式 */
    <link rel="stylesheet" media="screen and (min-width: 900px)" href="a.css">
    /* 当页面宽度小于等于 600 像素时应用该样式 */
    <link rel="stylesheet" media="screen and (max-width: 600px)" href="b.css">  

2. 弹性布局（Flexible Layout）：

   • 弹性布局是一种基于相对单位（如百分比、em、rem）的布局方式，可以让布局中的元素相对于父元素或其他元素进行伸缩和调整。

   • 在弹性布局中，元素的大小和位置可以根据父元素或其他元素的尺寸和内容动态调整，使得页面的布局更加灵活和适应不同屏幕尺寸。

   • 弹性布局通常会使用相对单位和弹性盒子等技术来实现布局的弹性性，可以方便地实现元素的自适应和伸缩。

区别：

 - 响应式布局可以根据不同尺寸，展示不同样式、加载不同资源。
 - 弹性布局是布局方式，可以很好的等分空间等等，但是做不到，根据不同设备加载不同资源等内容。

应用场景：

 - 响应式布局适用于需要在不同设备上显示不同布局的情况，如桌面、平板和手机等。
 - 弹性布局适用于需要实现元素的相对大小和位置调整的情况，比如根据父元素尺寸自适应的布局。

16.媒体查询可以写if判断吗？

虽然媒体查询本身不支持传统的 if 判断语句，但可以通过组合不同的媒体特性和逻辑运算符，
如 and、or、not；来实现类似条件判断的效果。例如，可以使用以下方式来组合不同的媒体特性：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 在屏幕宽度在 768px 到 1024px 之间应用的样式 */
}