前端进阶之路

# CSS

# 1.如何实现图片在某个容器中居中？

父元素display: flex; justify-content: center;
父元素text-align: center;子元素display:inline-block;
父元素position:relative 子元素position:absolute;left:50%;translateX(-50%);

# 2.如何实现元素的垂直居中？

父元素display:flex,align-items:center;
未知高度父元素position：relative;子元素position:absolute;top:50%;translateY(-50%);
父元素 display: flex;flex-direction: column;justify-content: center;

# 3.水平垂直居中？（高频）

已知父元素宽高，未知子元素宽高

父元素display:flex;justify-content:center;align-items:center;
父元素display:flex;margin:auto;
父元素position:relative,子元素position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
父元素display:grid;place-content:center;
父元素display:grid;justify-content: center;align-content:center;

已知父子元素宽高

父元素display:relative;子元素position:absolute;top:50%;left:50%;height:100px;width:100%; margin-left:-50px;margin-top: -50px;(上外边距和左外边距都是高度和宽度的一半)
父元素display:relative;子元素position:absolute;height:100px;width:100px;top:0,left:0,right:0,bottom:0;margin:auto; (上下左右都是0,外边距auto)

# 4.什么是BFC？

BFC指块级格式化上下文。具有BFC特性的元素可以看作是一个独立的盒子，修改盒子内的布局不会影响到外面的元素。(BFC属于普通流)

# BFC解决了什么问题？

高度坍塌-清除浮动。不给父元素设置高度，只设置子元素的高度，再给子元素设置浮动，此时父元素就会变成一条线。通过清除浮动解决
外边距重叠。两个盒子各设置外边距20px，页面显示的两盒子间距是20px，而不是40px。=>两个重叠会取边距大的-BFC

# 清除浮动的三种方式=》元素设置浮动后，其元素的兄弟元素都会受到影响，需要清除浮动

.clearfix{clear:both;} 额外增加一个标签
伪元素after

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

1
2
3
4
5

父元素增加overflow:hidden;原理是触发BFC。

满足任一条件即可触发BFC

body根元素
浮动元素：(float:left,float: right)float除none以外的值
position为absolute,fixed
display为inline-block table-cell flex等
overflow为hidden,scroll等等

# *IFC(inline formatting contexts) 內联格式化上下文

高度由行内元素的最高高度决定

# 作用？

水平居中:一个块元素要水平居中，可以设置其为inline-block，会再外层产生IFC，通过text-align将其水平居中
垂直居中:创建一个IFC，用其中一个元素撑开父元素高度，设置其为vertical-align:middle，其他行内元素可以在这个父元素中垂直居中

# 5.隐藏一个元素？

opacity=0，元素被隐藏起来了，但不改变页面布局，点击触发绑定事件
visibility=hidden，该元素隐藏起来了，不改变页面布局，点击不触发绑定的事件
display=none，该元素隐藏起来了，会改变页面布局(可理解为被删除) 前两种都不改变页面布局，display:none会改变页面布局 opacity隐藏后点击还会触发绑定的事件，另外两个不会

# 6.css预处理器有哪些？

(less，sass，stylus=》均不需要考虑浏览器兼容问题，因为最终编译输出的还是css)
sass(c++): (文件后缀是.sass和.scss) 可以省去大括号和分号。声明变量用$，用冒号：赋值。=>node上的实现是node-sass，现在推荐用dart-sass
less: 声明变量用@，用冒号：赋值
stylus: 可以省去大括号,可以直接声明变量(stylus不能用@声明变量会编译但不会赋值)，用等号=赋值

# 总结

sass和stylus可以省去大括号
sass声明变量用$，less声明变量用@，stylus直接声明变量
sass和less都是直接用冒号赋值，stylus用等号赋值

# sass和scss区别

scss是sass3引入新的语法，可以认为是sass升级版

# 7.css盒模型？

有标准盒模型和ie盒模型（怪异盒模型）
box-sizing:content-box 标准盒模型（content的大小）
box-sizing:border-box ie盒模型（content+padding+border的大小）
盒模型有四部分，从内到外content->padding->border->margin
inherit(继承父元素的box-sizing值)

# 8.flex如何使用？

flex-direction(row,row-reverse,column,column-reverse) 改变主轴方向。
flex-wrap(nowrap,wrap,wrap-reverse)控制元素是否换行。默认nowrap不换行。宽度不足导致显示不全时可以通过这个来换行
justify-content(flex-start,flex-end,center,space-between,space-around)用来控制元素在主轴上对齐方式。常用来控制元素的两端对齐
align-items(flex-start,flex-end,center)用来控制元素在交叉轴上的对齐方式。配合justify-content实现元素的垂直水平居中 flex: grow(扩展比例) shrink(缩小比例) basis(子项的占用空间) basis优先级比width高 grow默认0(不放大)=》值越大越大 shrink默认1=》值越大越小

# flex常用用法和场景？

经常用作自适应布局，父元素display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间

# flex:1代表什么？

flex:auto; => flex: 1 1 auto;
flex: none; => flex: 0 0 auto;
flex: 0%; => flex: 0 1 0%(basis);
flex: 100px; => flex: 1 1 100px;
flex: 1; => flex: 1 1 0%;
flex:initial默认值0 1 auto;

# 9.自适应和响应式区别？

自适应根据不同大小(适口分辨率Viewport)的设备返回不同的页面。（百分比布局）
响应式是一个页面根据屏幕大小自动适应，自动调整布局。（栅格布局，@media）

# 10.css动画，translate，animation？

transform: translate(50px, 100px) // translate 移动 rotate旋转和scale放大缩小 rotate(30deg)
transition过渡 transition: width 2s(持续) ease 0s(延迟)
animation常与keyframe搭配使用 animation:mymove 5s infinite(无限次); @keyframes mymove { from {top:0px;} to {top:200px;} } @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }

# *11.canvas和svg区别，使用场景？

canvas是位图，svg是矢量图。canvas逐像素渲染
svg适合做地图，因为是矢量图，放大缩小不会失真
canvas适合做图表和做游戏(做游戏比flash更加立体和精巧，可以用JS控制每一个像素在上面绘画，提供多种绘制路径，矩形的方法)

# 12.如何实现毛玻璃效果？

通过filter的blur属性

# 13.link和@import标签的区别？

link是html标签，@import是css提供的
页面加载时link会同时加载，@import引用的css会等到页面加载结束后加载
link样式的权重高于@import

# 14.position属性比较？

fixed 固定定位元素相对浏览器窗口是固定位置，即使窗口滚动位置也不改变(固定定位与文档流无关，不占据空间)
relative 相对定位相对正常位置进行定位
absolute 绝对定位如果没有已定位的父元素，位置相对于html(绝对定位与文档流无关，不占据空间)=>absolute或float相当于给元素上了display:block
sticky 粘性定位吸顶
static 默认定位没有定位 =>保持文档流给的位置

# 15.css选择器优先级？

样式选择器优先级：id选择器>class选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>(关系选择器=通配符选择器>继承>浏览器默认属性)
样式表优先级：内联样式表>内部样式>外部样式>(浏览器用户自定义样式)>默认样式

组合选择器(对优先级无影响)

- 匹配相邻兄弟元素
～匹配随后的所有兄弟元素

子选择器 > 后代选择器 .user .username

通配符选择器(* 对优先级无影响)

总优先级:!important=>内联样式/行内样式=>(id选择器>class选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器)=>关系选择器(子类选择器和兄弟选择器)/通配符选择器

# @layer级联 =》@(at-rule) =>试验性功能MDN

同一层内的规则将级联在一起=》同一元素样式做级联层后的会覆盖前的=>一旦建立级联层顺序，选择器优先级就会被忽略 =>这样不用确保每个选择器都有足够高的优先级去覆盖其他的规则，只要确保在最后一个级联层中即可

@layer utilities {
  /* 创建一个名为 utilities 的级联层 */
}

1
2
3

# 16.float元素的display属性值是什么？｜ html默认的display是什么？

block

# 17.p元素和div元素区别？

p元素自带margin-top和margin-bottom和div这两个属性值都是0。也就是说默认情况下两个p元素存在间距而两个div之间不存在间距

# 18.单双行样式？

:nth-child(even)(双行)，:nth-child(odd)(单行)
:nth-child(2n),:nth-child(2n+1)

# css斑马线效果如何实现？

表格中通过nth-child来实现控制奇数行一种颜色，偶数行一种颜色
文本中的斑马线通过渐变来实现 background：linear-gradient（颜色开始位置，颜色结束位置）

# 19.伪类和伪元素的区别？

伪类是单冒号，伪元素是双冒号
伪类操作的是dom树中已有的元素，而伪元素则创建了一个原本dom树之外的元素
伪类:hover上浮,:active点击,:nth-child()
伪元素::before,::after，::selection =>before,after作用主要是在元素前后加上指定内容

# 20.flex和grid区别？

flex是一维布局，grid是二维布局所以flex一次只能处理一个纬度上的布局，比如一行或一列 grid可以处理多行多列的布局

# 21.如何理解position: sticky？

可以理解为relative和fixed的结合体。假设把元素设置sticky固定在页面中间，上下滚动页面。在超过一定高度后，会变成类似fixed固定在顶部

# 22.如何匹配n个子元素和最后n个子元素？

:nth-child(-n+3) :nth-last-child(-n+3)

# 23.flex中的align-content和align-items有什么区别？

align-content 作用于纵轴多行元素，一行元素不起作用 align-items 作用域纵于单行元素

# 24.rem,em,vw,vh，px有什么区别？

rem根据根元素的font-size em根据自己的font-size vw视宽 vh视高 px在任何设备大小都一致

# 25.如何实现页面文本不可复制？

css：user-select:none 移动端有兼容问题 js：监听selectStart事件，e.preventDefault()即可禁止选中

# 26.左侧固定右侧自适应？

父容器display:flex; 左侧容器固定宽度右侧flex:1

# 27.文档流分为哪些？

普通流，定位流，浮动流 =>自上而下，自左而右，依次排放元素就是普通文档流

# 什么是脱离文档流？

元素不在文档流中占据空间

# 有哪些方式？

float => 浮动流
absolute => 定位流
fixed => 定位流 => 基于浏览器窗口定位

# *28.你对css3有哪些了解？(transition过渡transform转换keyframes动画)

transform: translateX() X轴移动元素
transform: translateY()Y轴移动元素
translate: (x,y)沿着x,y轴移动元素
rotate(90deg)旋转
transition: css属性名称过渡时间效果() 何时开始
transition: width 1s linear(linear匀速ease从慢到快) 2s @keyframes动画动画通过keyframe进行声明，通过animation引用动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
或者 都是从开始到结束
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
div 把keyframes绑定到选择器上 常用animation: 动画名称 动画时长
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 29.精灵图作用？

将多个图片拼接到一个图片中，通过background-position选择图片优点是能减少HTTP请求，提高页面加载速度

# 30.js动画和css动画区别？

css动画相对比较简单，js动画相对比较复杂
css动画性能比较高，浏览器内部有做处理。

# 31.响应式布局有哪些方式？

媒体查询@media
百分比需要花时间根据设计稿去计算宽高比
css3引入的vw/vh 1vw等于视宽1%
rem布局相对于字体大小的元素，如果根元素font-size为16px，拿1rem就是16px
flex布局

# 32.说说三栏布局？=》(双飞翼和圣杯都是三栏全部float浮动)

1.双飞翼:通过中间新建的div外边距来隔离每个列 2.圣杯：通过父容器的内边距来隔离每个列(三个全部用float浮动，左右相对布局配合left，right，中间设置padding-left和padding-right) =》main部分比左右宽度小的时候，布局会乱=》才有了双飞翼布局 3.flex 父元素display:flex 设置左右宽度，中间flex:1自适应 4.绝对定位:父元素相对，子元素一个left向左浮动，一个right向右，中间绝对定位，通过设置左右距离进行撑开。(高度通过top，bottom为0撑开)

# 33.transition和animation区别？动画和过渡区别

transition是模拟动画效果，功能有效 animation可以用来设计比较复杂的动画

# 34.如何实现网页内容置灰？

filter:grayscale(1);=>filter就是给元素增加滤镜，通过grayScale设置灰度的比例，1就是灰度图像，0无变化

# 35.css如何实现一个幻灯片效果？

可以定一个盒子，里面放四张大小和盒子一样大的图片，然后通过animation和keyframe 定义一个动画每25%切换一张图片。keyframe里面通过transform：translateX（-图片大小）实现的效果是图片一张张从右往左滚动

# 36.说说层叠上下文｜层叠顺序？

当元素在某个位置重叠时，部分元素显示的优先级高，部分元素显示的优先级低，这样就形成了层叠上下文
层叠上下文的background/border<z-index为负数<block块级水平盒子<float浮动盒子<inline/inline-block水平盒子<z-index:auto/0<z-index为正数

# z-index:999的元素一定会置于z-index:0元素之上吗(z-index不一定都有效)

不一定。要考虑是否在同一个元素层级中

# 37.display:inline的元素设置margin和padding会生效吗？

inline元素的margin和padding左右生效，上下不生效

# 38.为什么会发生样式抖动？

没有指定元素的具体宽高。比如当数据还没加载完成时，高是100px，数据加载后超出限制，元素被撑大，就出现了抖动。

# 39.textarea如何禁止拉伸？

textarea { resize: none; }

# 40.如何画一个正方形/长宽固定的长方形？

aspect-ratio: 1 => 宽高比1:1 aspect-ratio: 2/1 => 宽高比2:1 aspect-ratio: auto => 保持原来的宽高比

# 41.如何自定义滚动条样式？

滚动条相关样式都是伪元素(兼容性不太好)

::-webkit-scrollbar 整个滚动条
::-webkit-scrollbar-button 滚动条上下箭头
::-webkit-scrollbar-thumb 滚动条上的滚动滑块
::-webkit-scrollbar-track 滚动条轨道
::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条交叉的部分
::-webkit-resizer 某些元素的corner部分的部分样式，如textarea的可拖动按钮

# 42.flex布局中order作用?

order定义子元素的排列顺序，值越小越靠前，默认为0

# 43.如何设置方格背景？

{
background: linear-gradient(90deg, rgba(200, 200, 200, 0.1) 3%, transparent 0),
linear-gradient(rgba(200, 200, 200, 0.1) 3%, transparent 0);
background-size: 20px 20px;
}

1
2
3
4
5

# 44.如何实现响应式布局大屏幕三等分，中屏幕二等分，小屏幕一等分？

// 通过grid布局 repeat设置N等分，auto-fill代表自动填充，minmax设置最小宽度 fr是grid特有的单位 1fr代表100%剩余的空间
.container {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

1
2
3
4
5

# 45.如何实现三列均分布局？

flex：

.flex-container {
  display: flex;
  // flex-wrap: wrap;
  // gap: 1rem;

  .item {
    flex: 0 0 calc(100% / 3); =>缺陷是不好为子元素设置左右间隙
  }
}

1
2
3
4
5
6
7
8
9

grid:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  // gap: 1rem;
}

1
2
3
4
5

# 46.css实现文本的单行和多行溢出省略？

// 单行文本
.text {
  overflow: hidden; // 隐藏超出的内容
  text-overflow: ellipsis; // 不换行
  white-space: nowrap; // 用省略号替代溢出的文本
}
// 多行文本
.text {
  display: -webkit-box; // 设置成弹性伸缩盒子
  -webkit-line-clamp: 2; // 限制显示的行数 目前是最多2行
  -webkit-box-orient: vertical; // 弹性伸缩盒子的元素的排列方式
  overflow: hidden; // 隐藏超出的内容
  text-overflow: ellipsis; // 用省略号替代溢出的文本
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 47.用过tailwind吗？

css框架可以理解为在类上直接定义样式框架本身已经提供好了对应的样式如=> w-32就是width:8rem 可以省去类的命名 css文件体积更小

# 在main.js里可以写公共样式

@layer components { .btn {@apply px-6 py-2 inline-block} }

# 在main.js写原生css

@layer utilities { .btn {width: 100px;height: 100px} } 单位换算：框架内1=0.25rem=4px

# 在main.js给标签加上默认属性

@layer base { a{background-color: red} }

# 48.css可以继承的属性有那些？

color,font,font-size,line-height,word-spacing

# 49.css module了解吗？

在构建的时候解决CSS全局作用域的问题

react默认开启了，样式表文件以xxx.module.css/less/sass命名即可
webpack可以在css-loader的options里设置

{
  test: /\.css$/i,
  loader: "css-loader",
  options: {
    modules: true,
    localIdentName: "[name]_[local]__[hash:base64:5]"
  }
}

1
2
3
4
5
6
7
8

# 原理

通过自动生成唯一的class类名

# 存在问题

如果需要改第三方库的类名，需要通过:global全局作用域，才可以覆盖样式

:global(.antdr-btn) {
  color: red;
}

1
2
3

# 组合和继承=>通过composes

.title {
  composes: back; // 组合
  color: green;
}
.title {
  composes: other from "./other.module.css"; // 继承
  color: green;
}

1
2
3
4
5
6
7
8

# 如何避免样式冲突？

bem=> .home-page .home-page-btn
css scoped => 会对当前组件下的所有元素生产唯一的类名 => .btn 编译后 .btn .jsx-xxxxx
css module

# 50.css变量？

通过--定义变量，var()来读取变量可以在全局定义某些颜色，然后在具体css中只要引入变量即可。比如按钮颜色primary

:root{
  --bgcolor: blue;
  --color: red;
}
p {
  color: var(--color);
}

1
2
3
4
5
6
7

# 51.浏览器最小多少像素？

12px

# 怎么实现10px？

通过scale属性进行缩放 font-size:20px transform: scale(0.5) => 就是10px
通过zoom属性(兼容性不好) zoom:50%

# 52.css如何实现模块化？

通过BEM命名规则=>模块名+元素名+修饰器名

.block__element {
    display: none;
}
.block__element--active {
    display: block;
}

1
2
3
4
5
6

css module => 在webpack配置里要开启modules: true=>只会控制类选择器和ID选择器

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        // path 样式相对根目录的路径 name 样式表文件名称 local样式表的类名 hash:length 表示hash值
        localIdentName: '[path][name]-[local]-[hash:base64:5]'
    }
}

1
2
3
4
5
6
7
8

css in js => 主要是react有应用(styled-components是代表) =》通过js的方式去定义样式，被解析执行的时候styled-components会动态生成css，以style标签的形式插入到head里

// 封装第三方组件库
const AntdButtonWrapper = styled(Button)`
  color: 'red';
`;

1
2
3
4
5