面试题（CSS）

一、CSS考题

1. 介绍一下CSS的盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
	标准盒子模型：margin、border、padding、content
	IE盒子模型 ：margin、content（ border +  padding  + content ）
通过CSS如何转换盒子模型：
	box-sizing: content-box;	/*标准盒子模型*/
	box-sizing: border-box;	  /*IE盒子模型*/

2. CSS优先级算法如何计算？

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

3. 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(none,underline,line-through)、letter-spacing(normal,2px,-1px)、word-spacing(同letter-space)。
		4. visibility：控制元素是否可见。
		5. cursor：指定鼠标悬停在元素上时的光标样式。
		6. list-style 相关属性：包括 list-style-type、list-style-position、list-style-image。
        
3. 不可继承属性：border、padding、margin...

4. 如何用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;
}
// 等边三角形
{
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 0 solid transparent;   /* 建议改为 0，避免上方留白 */
    border-bottom: 173px solid #ccc;   /* 关键：调整为左右边框的 1.732 倍 */
}

5. 单行文本溢出

在 CSS 中，当单行文本内容超出其容器的宽度时，可以通过设置 overflow 属性来处理文本溢出的情况。常用的方法包括使用 white-space 和 text-overflow 属性。

div{
	width: 200px; /* 容器宽度 */
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

6. ⚠ 多行文本溢出

处理多行文本溢出的情况相对复杂一些，但也可以通过 CSS 来实现。常用的方法是结合 display: -webkit-box;、-webkit-line-clamp 和 overflow: hidden; tips: clamp 意为限制

.text-container {
    display: -webkit-box; /* 使用弹性盒子布局 */
    -webkit-box-orient: vertical; /* 垂直方向排列 */
    -webkit-line-clamp: 3; /* 限制显示行数 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 兼容性处理 */
.text-container {
    display: -webkit-box;
    display: -webkit-flex;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

7. position有哪些值？分别是根据什么定位的？

static [默认]  没有定位
fixed  		固定定位，相对于浏览器窗口进行定位。	
relative  相对于自身定位，不脱离文档流。
absolute	相对于第一个有relative的父元素，脱离文档流。


relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
	 absolute如果有left、right、top、bottom ==》left、right、top、bottom

8. 有哪些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 的元素；
   
   等等好多都可以做到，这里就不一一举例了。
   

9. 对BFC规范的理解？

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

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

10. 子元素设置margin-top父元素也会跟着移动，是怎么回事？

经典问题：垂直外边距叠加

原因：普通文档流盒子间，只要垂直外边距直接接触，就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。

发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

解决办法：触发BFC就可以解决。

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

1. 伪元素

   什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。
   

   ::before：在元素内容之前插入内容
   ::after：在元素内容之后插入内容
   ::first-line：选择元素的第一个行
   ::first-letter：选择元素的第一个字母
   

2. 伪类

   什么是伪类：是用于选择元素的特定状态或行为的关键词，它可以应用于已存在的元素。
   

   :hover：当鼠标悬停在元素上时应用的样式
   :active：元素正在被用户交互（如点击）时应用的样式
   :focus：元素获得焦点（如键盘焦点或点击）时应用的样式
   :nth-child(n)：选择父元素的第n个子元素
   :not(selector)：选择不匹配给定选择器的元素
   

12. 清除浮动的方式有哪些？

1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both; (不推荐使用，很老的处理方式了)
3. after方式
	ul::after{
			content: '';
			display: block;
			clear: both;
	}

13. css sprite是什么,有什么优缺点

1. 是什么
	把多个小图标合并成一张大图片。
2. 优缺点
	优点：减少了http请求的次数（减少了服务器和客户端之间的通信开销），提升了性能。
	缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

14. 什么是CSS reset？

reset.css   		是一个css文件，用来重置css样式的。
normalize.css 	为了增强跨浏览器渲染的一致性，一个CSS重置样式库。

15. 回流和重绘

15.1 浏览器渲染流程

浏览器是向服务端发送请求，下载资源进行解析，将网页内容展示到浏览器上的过程，这其实就是渲染引擎完成的。渲染引擎有很多种，比如webkit（Safari浏览器）Blink（Chrome,edge）Gecko(Firefox)Trident(Internet Explorer,已停止支持)。

1. 解析 HTML Source，生成 DOM 树。
2. 解析 CSS，生成 CSSOM 树。
3. 将 DOM 树和 CSSOM 树结合，去除不可见元素，生成渲染树( Render Tree )。
4. Layout (布局)：根据生成的渲染树，进行布局( Layout )，得到节点的几何信息(宽度、高度和位置等)。
5. Painting (重绘)：根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上

拓展：
CSSOM（CSSObjectModel）：
     解析CSS代码，并将每个选择器构建为树状结构，对CSS样式表进行对象
化表示，同时还提供了相关API用来操作CSS样式

在W3C标准中，CSSOM包含两部分：
    A. Model：描述样式表和规则的模型部分；
    B. View：和元素视图相关的API部分    
    
    a. Model部分是CSSOM的本体，用style或者link标签即可创建：<style></style>或者<link rel="stylesheet"href="Xxx">
    b. View部分是CSSOM的核心，可分为三类：窗口、滚动和布局相关API。
        1. 窗口API用于操作浏览器窗口的位置、尺寸等 window.innerWidth window.open
        2. 滚动可分为视口滚动和元素滚动，window.scrollY window.scrollTo container.scrollTop
        3. 布局API总体上使用的最多，可以轻松获特定元素的位置和尺寸信息。 element.getBoundingClientRect() 操作top/left/...

15.2 什么是回流和重绘

1. 回流：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，"并不包含位置和大小信息"。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可以理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

2. 重绘：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

15.3 什么样情况会造成回流和重绘

要知道：回流一定会造成重绘，重绘不一定会造成回流。

结合上面说的：
1. 造成回流的情况有：回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。一个 DOM 元素的几何属性变化，常见的几何属性有 width、height、padding、margin、left、top、border 等等。
2. 造成重绘的情况有：例如改变 visibility、outline、background-color 等属性，这些属性只是影响元素的外观，风格，并且没有影响几何属性的时候，会导致重绘 ( repaint )

15.4 ⚠ 如何减少回流与重绘

开启GPU加速：开启 GPU 加速元素会被单独提升到一层。
WebKit 内核的浏览器中，CSS3 的 transform、opacity、filter 这些属性就可以实现合成的效果，浏览器会将渲染层提升为合成层。

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

可以把：top left 使用 transform 代替。

15.5 ⚠ 面试回答：

回流就是：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，并不包含位置和大小信息。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

造成回流就是可能改变了盒子的大小和位置。

重绘就是：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

造成重绘就是可能改变了盒子的颜色，背景颜色等等之类的。

那么要避免回流和重绘：

css方面
 * 使用transform替代top等位移 ; 
 * 使用visibility替换display: none;
 * 避免使用table布局 ;
 * 尽可能在DOM树的最末端改变class；
 * 避免设置多层内联样式，尽量层级扁平；
 * 将动画效果应用到position属性为absolute或fxed的元素上；
 * 避免使用CSS表达式；
 * 将频繁重绘或者回流的节点设置为图层，比如 video, iframe ；
 * CSS3硬件加速(GPU加速) ，可以是transform: translateZ(0)、opacity、 flters、 Will-change提前告诉浏览器元素会发生什么变化;
 
JS方面：
* 避免频繁操作样式，合并操作；
* 避免频繁操作DOM，合并操作；
* 防抖节流控制频率；
* 避免频繁读取会引发回流/重绘的属性，比如上面的C、O、S属性
* 对具有复杂动画的元素使用绝对定位。

16. display-none;与visibility-hidden;的区别

1. 占用位置的区别

	display: none; 				隐藏元素，“不”占用位置
	visibility: hidden;   隐藏元素，占用位置

2. 重绘和回流的问题

	visibility: hidden;	产生重绘
	display: none;     	产生一次回流、重绘

17. opacity和rgba区别

共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba   R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别
opacity 会作用于元素及其子元素的透明度，整个元素及其内容都会变得透明。
rgba() 只会作用于元素的颜色，而不会影响元素本身的透明度。

18.⚠ 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），则项目将占据固定空间。
四、总结
    一切始于 flex-basis,如何每个 basis的总和大于容器总宽度，进入收缩 shrink 模式，如果 每个 basis 综合小于容器总宽度，进入扩张模式
    1. 收缩模式 
       【a(basis) + b(basis) 】- e(容器总宽) = d(总共收缩空间)
        c(总权重) = a(basis) * a(shrink) + b(basis) * b(shrink) 
        a应当收缩： d * 【a(basis)/ c】
        b应当收缩： d * 【b(basis)/ c】
    2. 扩张模式
        e（容器总宽）- 【a(basis) + b(basis) 】= d（总共扩展空间）
        c（总权重）= a（grow）+ b(grow)
        a应当扩张：d * 【a(grow) / c】
        b应当扩张：d * 【b(grow) / c】

19. 实现一个左边固定宽度、右边自适应布局（flex）

// 不要写width 500px，右边100%，这样不会自适应
<style type="text/css">
	*{margin: 0;padding: 0;}
	.container{
		display: flex;
		width: 100%;
		height: 100vh;
	}
	.left{
		width: 300px;
		background: red;
	}
	.right{
		flex: 1;
		background: blue;
	}
</style>

<div class='container'>
	<div class='left'>left</div>
	<div class='right'>right</div>
</div>

20. 一个盒子如何在页面中水平垂直居中

方式一：flex

<style type="text/css">
	*{margin: 0;padding: 0}
	.container{
		display: flex;
		justify-content: center;
		align-items: center;

		width: 1000px;
		height: 700px;
		border: 5px solid #ccc;
	}
	.main{
		background: red;
	}
</style>
	
<div class='container'>
	<div class='main'>main</div>
</div>

方式二：transform

<style type="text/css">
	*{margin: 0;padding: 0}
	.container{
		position: relative;

		width: 1000px;
		height: 700px;
		border: 5px solid #ccc;
	}
	.main{
		position: absolute;
		left: 50%;
		top: 50%;

		transform: translate3d(-50%,-50%,0);

		background: red;
	}
</style>
	
<div class='container'>
	<div class='main'>main</div>
</div>

21. 简述px、em、rem、rpx的区别

1. px 是绝对单位（具有固定的大小：不会随着页面或元素的缩放而改变大小）。
2. em 是相对单位，相对于“父元素的字体大小来计算元素的大小”。
3. rem 是相对单位，相对于根元素（html 元素）的字体大小来计算元素的大小。
4. rpx是相对于屏幕宽度的相对单位，它专为小程序等场景的屏幕适配而生，不同屏幕rpx的宽度不同，一次设计，多端自适应。

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

移动端适配是指：在不同移动设备上（如手机、平板）显示网页时，保证页面内容可以适应不同屏幕大小和分辨率的技术方法。

方案一：rem单位 + 动态改变html的font-size （某宝使用的方案）

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。

在开发中，我们只需要考虑两个问题：

问题一：针对不同的屏幕，设置html不同的font-size
问题二：将原来要设置的尺寸，转化成rem单位

方法一：编写js代码 或 使用

方法二：flexible库

flexible库地址：https://github.com/amfe/lib-flexible

关于设计图给出的px，要转成rem可以使用：编辑器提供插件，例如：

VSCode插件：px to rem & rpx & vw (cssrem) 的插件，在编写时自动转化

方案二：vw 适配方案（某东使用的方案）

1vw等于屏幕的1%，vw我们只面临一个问题：将尺寸换算成vw的单位即可。

vw相比于rem的优势：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size

关于设计图给出的px，要转成vw可以使用：编辑器提供插件，例如：

VSCode插件：px to rem & rpx & vw (cssrem)，在编写时自动转化

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

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

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">	
   

   • 不同屏幕宽展示不同的图片

     // 小于等于800px 展示1.png 大于 800px 小于等于 1000px 展示 2.png 大于1000px 展示 3.png
     <picture>
       <source media="screen and (max-width: 800px)" srcset="./img/1.png">
       <source media="screen and (max-width: 1000px)" srcset="./img/2.png">
       <img src="./img/3.png" alt="">
     </picture>
     

   • 不同屏幕宽展示不同的样式

     <style>
         @media screen and (max-width: 600px) {
           div {
             background-color: red;
           }
         }
         @media screen and (min-width: 750px) {
           div {
             background-color: blueviolet;
           }      
         }
         @media screen and (min-width: 1000px) {
           div {
             background-color: blue;
           }
         }
       </style>
     

   • 不同屏幕宽展示不同的tab

       <style>
         .container {
           display: flex;
           list-style: none;
           width: 1000px;
           border: 2px solid #ccc;
         }
         ul li {
           flex: 1;
         }
         /* 屏幕尺寸超过1000px展示4个tab,低于1000px展示2个tab */
         @media screen and (max-width: 1000px) {
           li:nth-child(2n) {
             display: none;
           }
         }
       </style>
     

   • 阈值取值范围多少能够满足各种设备的要求

     // 手机（竖屏）768px以下
     // 平板（大手机）768px - 1024px
     // 笔记本电脑/小桌面  1024px - 1280px
     // 大桌面显示器 1280px - 1536px
     // 超大桌面显示器 1536px 以上
     

   • 具体媒体查询的使用的例子 blog.csdn.net/qq_42371932…

2. 弹性布局（Flexible Layout）：

   • 弹性布局是一种基于相对单位（如百分比、em、rem）的布局方式，可以让布局中的元素相对于父元素或其他元素进行伸缩和调整。
   • 在弹性布局中，元素的大小和位置可以根据父元素或其他元素的尺寸和内容动态调整，使得页面的布局更加灵活和适应不同屏幕尺寸。
   • 弹性布局通常会使用相对单位和弹性盒子等技术来实现布局的弹性性，可以方便地实现元素的自适应和伸缩。

区别：

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

应用场景：

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

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

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

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

通过合理组合不同的媒体特性和值，可以实现根据不同设备条件应用不同样式的效果，虽然语法上不是传统的 if 判断，但能够达到类似的效果。

25.⚠ 随着屏幕缩放，图片能够自适应保持长宽等比为16:9或者1:1，图片不能压缩

原理：让比如某div盒子具有16:9或者1:1的比例，然后通过object-fit的设置，让图片适应容器的高度与宽度。

要实现在屏幕缩放时，图片能够自适应并保持长宽比为 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类似，但它不依赖于其容器的长宽比。
...

26. transform 有哪些值？

1. translate(x,y) 将元素向指定的方向移动，类似于position中的relative translateX()translateY()
2. scale()让元素根据中心原点对对象进行缩放，默认的值1
3. rotate() 通过指定的角度参数对元素根据对象原点指定一个2D旋转
   • rotateX() 方法,元素围绕x轴,以给定的角度进行旋转
   • rotateY() 方法,元素围绕y轴,以给定的角度进行旋转
   • rotateZ() 方法,元素围绕z轴,以给定的角度进行旋转 rotateZ === rotate
   • transform-origin 修改旋转的原点 left top bottom right skew() 能够让元素倾斜显示.它可以将一个对象以其中心位置围绕着x轴和y轴按照一定的角度倾斜

27. 使元素消失的方法有哪些？

1. display: none 彻底隐藏。元素从渲染树中移除，影响文档流，性能较好
2. visibility: hidden 隐藏但留位。元素不可见但空间保留，适合需要保持布局的场景,事件交互不生效
3. opacity: 0 完全透明。元素不可见但仍在位，可交互，非常适合做淡入淡出动画
4. transform: scale(0) 缩放至无。元素被缩放到不可见，空间保留，常用于缩放动画
5. height: 0 / width: 0 / overflow: hidden 折叠尺寸。通过将尺寸设为 0 实现隐藏
6. position: absolute; left: -9999px 移出屏幕。将元素定位到视窗外，可用于仅对屏幕阅读器可见的内容
7. DOM移除（如 remove()） 物理删除。元素从DOM树中彻底删除，需要时可重新添加

28. src与href的区别？

1. 运行原理 src 用于嵌入资源，替换当前元素，作为页面的一部分 href 建立链接或关系，指向外部资源
2. 加载方式 src 会暂停处理当前内容，等待资源加载（如脚本） href 资源与当前文档，并行加载
3. 常见标签 src ,

29. ⚠web浏览器的兼容性问题？

1. CSS兼容性问题是前端开发中的常见挑战，主要由于不同浏览器使用的渲染引擎对Web标准的解析存在差异。
   1. 默认样式差异： 如标签的默认 margin、padding、行高不同 ，使用 CSS Reset（如 *{margin:0;padding:0;}）或 Normalize.css
   2. CSS3新特性支持 如新属性（如动画、变形、渐变）不被早期浏览器识别，添加浏览器私有前缀，如 -webkit-, -moz-, -ms-, -o-
   3. 布局与盒模型
      1. 浮动元素 margin 加倍 为浮动元素设置 display:inline;
      2. IE盒模型差异（width包含padding和border） 使用 <!DOCTYPE html>声明标准模式，统一使用 box-sizing: border-box;
      3. 设置小高度（<10px）失效 设置 overflow:hidden;或更小的 line-height
   4. 行内元素与间距：如img等行内元素默认有间距 为 img设置 float: left;
   5. 伪类与状态：如 超链接访问后 :hover或 :active样式不出现 遵循 LVHA 顺序定义伪类：:link``:visited``:hover``:active
2. 可以采用一些现代工作流能从根源上减少兼容性烦恼：
   1. 自动化工具：使用构建工具（如Webpack、Gulp）搭配 Autoprefixer 插件，它可以自动为CSS规则添加所需的前缀，无需手动编写。
   2. 渐进增强与优雅降级：
      1. 先为所有浏览器构建基本功能和样式，再为高级浏览器提供增强体验。
      2. 优雅降级：先在现代浏览器实现完整效果，再为旧浏览器提供基础回退方案。
   3. 特性检测：使用 Modernizr 等库检测浏览器是否支持某项特性，从而按条件加载对应的CSS或JS代码
   4. 合理选择兼容范围：了解你的用户群体，如果不需要支持非常陈旧的浏览器（如IE8及以下），可以放心使用更多现代CSS特性，提升开发效率。

30. ⚠移动端兼容性问题？

IOS

1. 当设置样式overflow:scroll/auto时，IOS上的滑动会卡顿，
   • 为滚动容器设置明确的 height或 max-height
   • 备用方案测试-webkit-overflow-scrolling: touch;是否可用
2. ios下input按钮设置了disabled属性为true显示异常 input[type=button]{ opacity:1 }
3. IOS下取消input输入框在输入引文首字母默认大写 <input autocapitalize='off' autocorrect='off'/>
4. 禁止IOS弹出各种窗口 -webkit-touch-callout:none
5. 禁止IOS识别长串数字为电话 添加meta属性 <meta content='telephone=no' name='format-detection'>

Andriod

1. 在安卓环境下placeholder文字设置行高时会偏上 input有 placeholder 属性的时候不要设置行高，如遇问题，尝试设置 line-height: normal
2. 安卓手机下取消语音输入按钮 input::-webkit-input-speech-button{ display:none }

共有

1. 移动端字体小于12px时异常显示 应该先把在整体放大一倍，然后再用transform进行缩小

   .small-text {
     font-size: 24px; /* 1. 先设置为目标大小的2倍 */
     transform: scale(0.5); /* 2. 再缩放至目标大小 */
     transform-origin: 0 0; /* 3. 设定缩放原点，通常为左上角 */
     width: 200%; /* 4. 可选：缩放后元素占据空间减半，需调整宽度以补全空间 */
   }
   

2. 禁用IOS和安卓用户选中文字 添加全局CSS样式：-webkit-user-select: none;user-select: none;
3. 小程序如何适配苹果和安卓底部的黑色导航条？

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 标准写法，兼容 iOS >= 11.2 及现代安卓 */

• constant()和env()是iOS 11.2前后的兼容写法,这种适配场景时 iPhone X 及以上是重点适配对象
• 通过 JS 动态获取
  • wx.getSystemInfoSync()
  • iPhone全面屏返回34px，安卓全面屏返回48px
  • 设置 padding-bottom 距离