前端面试准备学习记录

2.1、CSS基础

选择器：id > 类 = 属性 = 伪类 > 标签

优先级：内联样式 > id > 类、伪类、属性 > 标签

!important优先级最高
block：独占一行；inline：width、height属性无效，水平方向的margin和padding有效；inline—block：将对象设置为inline对象，对象内容作为block对象呈现，之后的内联对象会被排列在同一行内
隐藏元素的方法：
```
display: none;  不占位置，不响应绑定事件
position: absolute;  不占位置，不响应事件，移出可视区域
visibility: hidden;  占据位置，不响应事件
opacity: 0;  占据位置，响应事件（唯一可以响应事件的）
transform: scale(0,0);  占位置，不响应绑定事件，将元素缩放为0
clip-path: circle(10%);  占位置，，不响应事件，元素剪切
```
display: none与visibility: hidden的区别：

渲染树：浏览器获取HTML文件进行解析后形成DOM Tree，同时解析CSS形成Style Rules，两者合成为Render Tree。。。display: none 的元素会出现在 DOM树中，但不会出现在 render 树中
1. 前者在渲染树中消失，不占据任何空间；后者不会让其在渲染树中消失，占据相应空间
2. 子孙节点随父节点消失；后者可以通过设置visibility: visible;使子孙节点显示
3. 修改常规文档流中的display会造成文档重排；但是后者只会使本元素进行重绘
4. 使用读屏器，前者不会被读取，后者会
link与@import的区别
- link：XHTML标签，除加载css还可以加载RSS其他业务；引入CSS时，页面载入同时加载；无兼容问题；使用JS控制DOM改变样式
- @import：只能加载css；页面完全再入后再加载；
transition和animation的区别
- transition：过度属性，需要触发事件，设置一个开始关键帧，一个结束关键帧
- animation：动画属性，不需要触发事件，可以循环，可以设置多个关键帧
伪类与伪元素

前者：将特殊的效果加到特定的容器上，在已有的元素上添加类别，不会产生新的元素；后者在内容元素前后插入额外的元素或者样式，不在文档中，但在外部可见

伪类通过在元素选择器上加入伪类改变元素的状态，伪元素通过对元素操作进行元素的改变
盒模型

分为两种：标准盒模型、IE盒模型，前者的width和height属性的范围只包含了content，IE的width和height属性包含了border、padding和content；都是由四个部分组成：margin、border、padding、content
```
通过设置box-sizing属性可以改变元素的盒模型
box-sizing:content-box  表示标准盒模型(默认值)
box-sizing:border-box  表示IE盒模型(怪异盒模型)
```
Css3新特性：新增各种Css选择器（:not(.input)）、圆角、多列布局、阴影反射、线性渐变、旋转等
常见图片格式以及使用场景
1. BMP：无损的、支持索引色和点阵色的点阵图，通常体积较大
2. DIF：无损的、采用索引色的点阵图，文件小
3. JPEG：有损的、采用直接色的点阵图
4. PNG-8：无损的、采用索引色的点阵图
5. PNG-24：无损的、采用直接色的点阵图
6. SVG：无损的矢量图
7. WebP
CSS Sprites（精灵图）

优点：将一个页面中所用到的所有图片都整合到一张大图中去；可以减少网页HTTP请求、减少图片的字节

缺点：开发麻烦、需要测量位置；维护麻烦
物理像素、逻辑像素、像素密度

物理像素：即为屏幕上的实际像素点

逻辑像素：根据不同的显示器尺寸而不同

像素密度：密度越高越清晰；像素密度（dpi）= 分辨率宽度像素数 / 屏幕宽度英寸数
margin与padding的使用场景：

margin：需要在border外侧添加空白，且空白处不需要背景色

padding：需要在border内侧添加空白，且空白处需要背景色
css优化与提高性能的方法

加载性能：压缩；单一样式；减少使用@import，建议使用link

选择器性能：减少通配符*的使用；减少后代选择器的使用；避免对继承过来的属性重复指定规则

渲染性能：谨慎使用浮动，定位；减少页面重拍，重绘；

可维护性：样式与内容分离，将cssdiamante定义到外部css中
Sass、Less

Css的预处理器，实现多重继承，结构清晰，便于扩展

单行、多行文本溢出隐藏

// 单行文本溢出
overflow:hidden  //溢出隐藏
text-overflow:ellipsis  //溢出用省略号表示
white-space:nowarp  //规定段落中的文本不进行换行

// 多行文本溢出
overflow:hidden  //溢出隐藏
text-overflow:ellipsis  //溢出用省略号表示
dispaly:-webkit-box  //作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical  //设置伸缩盒子的子元素排列方式：重上到下垂直排列
-webkit-line-clamp:3  // 显示的行数

媒体查询

可以针对不同的屏幕尺寸大小，设计不同的样式，特别是需要设计响应式的页面
CSS工程化

解决了CSS代码的组织、拆分、处理、打包以及维护的问题，常见的有使用Sass、Less、PostCss、Webpack loader等，Webpack是一个只能处理JS代码的模块化打包工具，在loader的帮助下，可以处理CSS

2.2、页面基础

常见单位：px、%、em、rem、vw/vh

vw：相对于视窗的宽度，总共为100vw；vh：相对于视窗的高度，总共为100vh；vmin/vmax：vw和vh中较小/大值

em、rem的区别：em是相对于其父元素来设置字体大小；rem是相对于根元素，只需要在根元素确定一个参考值
两栏布局

一般为左边一栏宽度固定，右边一栏宽度自适应
三栏布局

一般为左右两栏宽度固定，中间自适应布局

水平垂直居中的实现

利用绝对定位，然后再用translate来调整元素

<body><div class="parent"><div class="child"></div></div>
</body><style>.parent{position: relative;width: 200px;height: 200px;background-color: bisque;}.child{width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: aqua;}
</style>

利用绝对定位，上下左右都设置为0，并且将margin设置为auto，盒子有宽高适用

<body><div class="parent"><div class="child"></div></div>
</body><style>.parent {position: relative;width: 200px;height: 200px;background-color: bisque;}.child {width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: aqua;}
</style>

flex布局

.parent {display: flex;justify-content: center;align-items: center;
}

根据设计稿进行移动端适配

适配不同像素密度，使用css媒体查询，选择不同的图片，以保证图片不会失帧；适配不同的屏幕大小，使用rem，em，vw，vh等相对单位
flex布局

也叫弹性盒布局，使用后，子元素的float，clear和vertical-aligns属性将失效
- 容器的六个属性：
  1. flex-direction：主轴方向
  2. flex-warp：是否换行
  3. flex-flow：flex-direction和flex-warp的简写形式
  4. justify-content：定义主轴对齐方式
  5. align-items：定义了交叉轴上如何对齐
  6. align-content：定义多跟轴线的对齐方式
- 项目上的属性：
  1. order：定义项目排列顺序，数值越小排列越靠前，默认为0
  2. flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  3. flex-shrink：定义项目缩小比例，默认为1，即如果空间不足，项目将缩小
  4. flex-basis：定义了分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本来的大小
  5. align-self：允许单个项目与其他项目有不一样的对齐方式，可以覆盖align-item属性
响应式设计概念及基本原理

通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理

2.3、定位与浮动

浮动：容器不设高度，子元素浮动溢出容器外边影响布局，这种现象称为浮动；脱离文档流、不占据空间，浮动元素只影响内联元素布局，不影响块级元素

引起的问题：若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动：父级div定义height；最后一个浮动元素后加空的div标签，并添加clear：both样式；包含浮动元素的父级标签添加overflow：hidden或overflow：auto；使用伪元素::after

clear清除浮动原理：元素盒子的边不能和前面的浮动元素相邻，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动

一般使用伪元素的方式清除浮动：
```
.clear::after{content:'';dispaly:block;clear:both;
}
```
clear属性只有块级元素才有效，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因
BFC

一个独立的布局环境，类似于一个容器，在该容器中的物品摆放不会影响其他环境中的物品

创建条件：根元素（body）；元素设置浮动（float除none以外的值）；元素设置绝对定位（absolute、fixed）；display值为：inline-block、table-cell、table-caption、flex等；overflow值为：hidden、auto、scroll
margin重叠问题

问题描述：两个块级元素的上外边距和下外边距可能会合并为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠，脱离文档流的元素不会折叠，重叠只会出现在垂直方向

解决办法：
- 兄弟之间折叠：底部元素变为行内盒子：dispaly：inline-block；底部设置浮动：float；底部元素的position：absolute/fixed
- 父子之间重叠：父元素overflow：hidden；子元素变为：dispaly：inline-block；父元素添加透明边框：border：1px solid transparent；子元素加入浮动属性或定位
position的属性
1. absolute：相对于static定位以外的一个父元素进行定位。浏览器会查找设置absolute元素的父元素，如果找到了一个设置了relative、absolute、fixed的元素会以该元素为基准，没找到就会以浏览器边界为基准
2. relative：相对于原来位置进行定位。元素的定位永远相对于元素自身位置，和其他元素无关，也不会影响其他元素
3. fixed：相对于屏幕视口的位置指定元素的位置。元素定位相对于window（或者iframe），与其他元素无关，但具有破坏性，会导致其他元素位置的改变
4. static：默认值，没有定位
5. sticky：粘性定位，设定一个阈值，指top、left、bottom、right其中之一，粘性定位生效，否则与相对定位相同
6. inherit：规定从父元素继承position属性的值

2.4、场景应用

1、三角形

主要用到border属性，总体原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div>
</body><style>div{width: 0;height: 0;border: 100px solid;border-color: orange blue red green;}
</style></html>

2、扇形

思路与三角形基本一致，只不过多了一个圆角样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div>
</body><style>div{border: 100px solid transparent;width: 0;height: 0;border-radius: 100px;border-top-color: red;}
</style></html>

3、0.5px的线

利用transform：scale（）的方式，用来定义元素的2D缩放转换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div>
</body><style>div{border: 1px solid #000000;transform: scale(.5,.5);}
</style></html>