CSS面试题常用知识总结day02

大家好我是没钱的君子下流坯，用自己的话解释自己的知识
前端行业下坡路，甚至可说前端已死，我还想在前段行业在干下去，所以从新开始储备自己的知识。
从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>VUE3——>pinia、Vite把前端基本的从新顺一遍，找出自己的不足。再去把一些组件给仔细研究一些自己以前没有发现的细节使用方法。
希望大家都能找到自己的出路。

11.让一个元素在页面中隐藏的方法

在上一篇day01中说了三种属性可以实现但是我们要究其本质

真的隐藏：就是从页面中删除或消失了，页面不再加载(渲染)这个元素了
只是看不见了(视觉)：在页面中看不到了，但是页面需要加载(渲染)这个元素占据着空间
页面不可读(嘴上说的语义)：页面上加载，但是读屏软件不能加载(我的理解是浏览器不去不加载忽略过去)，占据页面空间

真的隐藏两种方法：display: none;和HTML5中新增的<div hidden> </div>
看不见了：position:absolute;left: -99999px;或者margin-left:-99999px;
语义上的只有一个属性很少用到<div aria-hidden="true"> </div>

12.层叠上下文

我看到这个问题的时候想到的就是定位或者浮动相关的知识点，因为浮动为出现高度坍塌造成遮盖其他的元素，那触发层叠的原因也可以是定位或者是浮动，我去了解后发现并不是。而是只有给元素设置position属性但属性值不是static的时候并且去设置z-index属性值为具体数值的时候才会触发，下面的侧跌顺序图是我盗用的别人的。

如果向深了去解释，css是一个盒子模型但是这个模型不是浏览器看到的下图那种平面的，而是一个三维的盒子，有xyz轴距，如果我们从三维的角度给解释这个就很简单了，层叠发生的的地方就是Z轴，自己在脑子想象一下，换个角度去想一下积木，一层一层的，再去理解这个层叠。

13.png8，png16，png32的区别和压缩原理

我看到这个问题的时候我是崩溃的，前端还要去管图片怎么压缩？怪不得自己一直工资上不去。

PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^{8（2的8次方）大小来存储一张图片的颜色种类，2}8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。

PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0-255),G(0-255),B(0-255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。

PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0_255),G(0255),B(0_255),A(0255)。比PNG 24多了一个A（透明），也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。

压缩的原理我们去分析一下：

• 预解析（Prediction）：第一步需要去把这个文件或者图片需要去解析打散，就像项目上线一样把所有的代码压缩，我们写得代码就是被打散的看起来方便有很多换行和空格。
• 压缩（Compression）：第二步我们就是去压缩，压缩代码一样把所有没用的东西全部删除掉换行、空格之类的，那图片压缩使用的是Deflate算法结合了LZ77和Huffman算法，这算法就不去了解了我感觉我没那个智商哈哈。

14.渐进增强和优雅降级

是不是高大上的词汇，其实就是兼容问题。

• 渐进增强：就是开发的低版本功能能够兼容支持以前的高版本。针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
• 优雅降级：就是开发的高版本功能能够兼容支持以前的低版本。一开始就构建完整的功能，再针对低版本浏览器进行兼容

注意：绝大部分公司都是采用渐进增强，请记住永远都是业务开发第一，用户体验第二。比如说，一个产品去服务一些车，是先服务劳斯莱斯呢还是先服务一些大众都在用的车呢，一定是先去满足大众都在用的车需要的服务，然后在去服务劳斯莱斯。受众群众的量决定了使用渐进增强还是优雅降级。

15.position的使用

可以说position在css中是非常重要的。

position 属性主要用来定位，常见的属性值如下：

• absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。相对自己的上一级去定位的

• relative 相对定位，相对于其自身正常位置进行定位。
  在这批注一下：absolute和relative是有关联的子绝父相，通过子级元素的定位方式要去设置父级元素定位的方式，这个地方可以去看看教学讲解视频。

• fixed 固定定位，相对于浏览器窗口进行定位。

• static 默认值。没有定位，元素出现在正常的流中。

• inherit 规定应该从父元素继承 position 属性的值。

• sticky 粘性定位，当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置

16.使用css画一个三角形

我这里直接画出来一个三角形，一通则百通
原理就是border属性

div{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}

div{
//方法二
width: 0;
height: 0;
border-left: 10px solid red;
}

把宽高设置为0就通过设置border的宽度来撑出来一个三角形。

17.画一个自适应的正方形

自适应就是随着页面可视窗口大小变化，自己画的正方形也会变大变小
讲一个知识点长度单位

• px我们写pc端常用的也是最早接触的长度单位
• rem通常也是默认的1rem=14px，是随着不同的屏幕尺寸中默认的font-szie的大小来变化的。html { font-size: 16px; /* 默认16px */}这时候1rem=16px.
• rpx一般用于移动端开发的长度单位。这个单位会随着设备宽度不同自己去适应改变。
• vw、vh 窗口视图大小就是宽100vw、100vh，把整个浏览器视图分成100份。

方法1：利用 CSS3 的 vw 单位

vw 会把视口的宽度平均分为 100 份

.square {
 width: 10vw;
 height: 10vw;
 background: red;
}

方法2：利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性

.square {
 width: 10%;
 padding-bottom: 10%; 
 height: 0; // 防止内容撑开多余的高度
 background: red;
}

18.三栏布局实现方法

其实就是把浏览器页面分成三份，左右固定，中间自适应。其实到最后发现css布局大部分都需要使用display或者position或者float，能布局的就这几种

第一种：flex

<div class="container">
 <div class="left">left</div>
 <div class="main">main</div>
 <div class="right">right</div>
</div>
.container{
 display: flex;
}
.left{
 flex-basis:200px;
 background: green;
}
.main{
 flex: 1;
 background: red;
}
.right{
 flex-basis:200px;
 background: green;
}

第二种：position + margin

<div class="container">
 <div class="left">left</div>
 <div class="right">right</div>
 <div class="main">main</div>
</div>
body,html{
 padding: 0;
 margin: 0;
}
.left,.right{
 position: absolute;
 top: 0;
 background: red;
}
.left{
 left: 0;
 width: 200px;
}
.right{
 right: 0;
 width: 200px;
}
.main{
 margin: 0 200px ;
 background: green;
}

第三种：float + margin

<div class="container">
 <div class="left">left</div>
 <div class="right">right</div>
 <div class="main">main</div>
</div>
body,html{
 padding:0;
 margin: 0;
}
.left{
 float:left;
 width:200px;
 background:red;
}
.main{
 margin:0 200px;
 background: green;
}
.right{
 float:right;
 width:200px;
 background:red;
}

19.import 和 link 区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。

4. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

20.清除浮动的方法

• clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式： {clear:both;height:0;overflow:hidden;}

• 给浮动元素父级设置高度

• 父级同时浮动（需要给父级同级元素添加浮动）

• 父级设置成inline-block，其margin: 0 auto居中方式失效

• 给父级添加overflow:hidden 清除浮动方法

• 万能清除法 after 伪类清浮动（现在主流方法，推荐使用）