• 前端面试题集锦（1）

    1、 rem em vw vw 百分比区别

    2、app怎么做适配的

    3、bfc是什么，清除浮动的原理

    4、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

    5、css 选择器有哪些，权重是什么样的

    6、CSS选择符有哪些？哪些属性可以继承？优

    先级算法如何计算？

    CSS选择符（就是选择器）

    基础选择器

    结构选择器

    属性选择器

    结构伪类选择器

    目标伪类

    UI状态伪类

    否定伪类E:

    动态伪类

    属性继承

    选择器优先级的算法

    7、css引入的方式有哪些，link和@import的

    区别是什么

    1、 rem em vw vw 百分比区别

    🌈  相同点：
           rem， em ， vw ， vh ， vw 属于前端开发除了 px单位之外的另外几种单位取值；但是具体含义存在区别
    🌈  不同点：
           px：是像素单位，属于绝对单位，是一个具体的大小
           rem：相对于根元素进行设置
           em：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小 设置，那么就相当于父元素进行设置。
           vw： 1vw相当于浏览器窗口宽度的百分之一
           vh： 1vh相当于浏览器窗口高度的百分之一
           百分比：相对于父元素宽度或者高度的百分之几
           注意：vw 和 vh 是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成 100vw和100%的时候实现的效果一直；如               果有滚动的话，则100vw 中不是包括滚动条的， 100%是包括 滚动条的距离的 
    1. <style>
    2. *{margin:0;padding:0}
    3. html,body{
    4. height: 100%;
    5. }
    6. .box1{
    7. width: 100%;
    8. height:500px;
    9. background-color: red;
    10. }
    11. .box2{
    12. width: 100vw;
    13. height:500px;
    14. background-color: green;
    15. }
    16. style>
    17. <div class="box1">div>
    18. <div class="box2">div>750的设计图，20px为多少rem

    2、app怎么做适配的

    🌈  基于手机系统开发的app( 原生 Android/IOS) ，另外一种是webapp
    🌈  设置以下标签：
    🌈  具体的含义为：app 完成的页面的宽度等于设备的宽度，页面的缩放比例为 1.0 ，不允许最大缩放；
    🌈  使用媒体查询和响应式做适配
    🌈  使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大不易操作
    🌈  使用单位自己单位中经常使用的封装好的flexble.js 文件做适配
    🌈  封装好的flexble.js 文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于webapp开发

    3、bfc是什么，清除浮动的原理

    🌈  BFC含义：
    块格式化上下文（Block Formatting Context， BFC ） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
    🌈  BFC触发条件：
         根元素
         float 属性不为 none （脱离文档流）
         position 为 absolute 或 fixed
         display 为 inline-block,table-cell,table-caption,flex,inine-flex
         overflow 不为 visible
    🌈  BFC布局规则：
          内部的 Box 会在垂直方向，一个接一个地放置。
          Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（按照 最大margin 值设置）
          每个元素的 margin box 的左边， 与包含块 border box 的左边相接触
          BFC 的区域不会与 float box 重叠。
          BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
          计算 BFC 的高度时，浮动元素也参与计算

    4、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果

    🌈  方法一：使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置 
    1. <style>
    2. *{margin:0;padding:0}
    3. div{
    4. float: left;
    5. }
    6. .box1{
    7. width: 200px;
    8. height:200px;
    9. background-color: red;
    10. }
    11. .box2{
    12. width: 100px;
    13. height:100px;
    14. background-color: green;
    15. transition: all linear 1s;
    16. }
    17. .box1:hover+.box2{
    18. transform: translateX(-100px);
    19. }
    20. style>
    21.  
    22. <div class="box1">div>
    23. <div class="box2">div>
    🌈  方法二：使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现 
    1. <style>
    2. *{margin:0;padding:0}
    3. div{
    4. float: left;
    5. }
    6. .box1{
    7. width: 200px;
    8. height:200px;
    9. background-color: red;
    10. }
    11. .box2{
    12. width: 100px;
    13. height:100px;
    14. background-color: green;
    15. animation: mover linear 1s;
    16. }
    17. @keyframes mover{
    18. 0%{
    19. transform: translateX(0px);
    20. }
    21. 100%{
    22. transform: translateX(-100px);
    23. }
    24. }
    25. style>
    26.  
    27. <div class="box1">div>
    28. <div class="box2">div>
    🌈  方法三：复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动 
    1. <style>
    2. *{margin:0;padding:0}
    3. div{float:left}
    4. .box1{width:300px;height:300px;background-color:red}
    5. .box2{width:100px;height:100px;background-color:green}
    6. style>
    7.  
    8. <div class="box1">div>
    9. <div class="box2">div>
    10.  
    11. <script>
    12. //获取元素
    13. //设置x和y的值
    14. //绑定鼠标移入事件==缓慢移动 x的位置进行移动 自减
    15. 6、boder实现0.5像素
    16. 实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如
    17. 下：
    18. 7、场景题（两个盒子，左边固定宽，右边自适
    19. 应，你能想到几种方法）
    20. 公共HTML代码部分
    21. 方法一：float来和BFC实现
    22. //绑定鼠标移出事件==缓慢移动 x的位置进行移动 自增
    23. script>

    5、css 选择器有哪些，权重是什么样的

    选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。
    常用的选择器有以下内容：
    1 、 ID #id
    2 、 class .class
    3 、标签 p
    4 、通用 *
    5 、属性 type="text"
    6 、伪类 :link :visited :hover :active
    7 、伪元素 ::first-line :first-letter
    8 、子选择器 div>p
    9 、后代选择器 div p
    10 、相邻兄弟 div+p
    11 、通用兄弟 div~p
    12 、结构伪类 :nth-child :first-child :last-child
    权重计算规则：
    1 、第一等：代表内联样式，如 : style=”” ，权值为 1000 。
    2 、第二等：代表 ID 选择器，如： #content ，权值为 0100 。
    3 、第三等：代表类，伪类和属性选择器，如 .content ，权值为 0010 。
    4 、第四等：代表类型选择器和伪元素选择器，如 div p ，权值为 0001 。
    5 、通配符、 * 权值为 0000 。
    6 、继承的样式没有权重值。

    important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符

    6、CSS选择符有哪些？哪些属性可以继承？优

    先级算法如何计算？

    CSS选择符（就是选择器）

    基础选择器

    通配符选择器 *{}
    标签选择器标签名 p{}
    class 类选择器 .class 属性值 {}
    多类名选择器 . 类名 n{} 标签中 class 属性为 class=" 类名 1 类名 2 ... 类名 n"
    id 选择器 #id 属性值 {}
    群组选择器 选择器 1, 选择器 2,...{}

    结构选择器

    子元素选择器 E>F{} F 必须是 E 的子元素
    后代选择器 E F{} F 必须是 E 的后代
    相邻兄弟选择器 E+F{} F 是紧挨这 E 后面的兄弟元素
    通用选择器 E~F{} F 是 E 后面所有的兄弟元素

    属性选择器

    [Eattr] 元素 E 中存在 attr 属性
    [Eattr="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value
    [Eattr~="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value 或者 "value value1 ..." 的形式
    [Eattr^="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值以 value 开始
    [Eattr$="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值以 value 结尾
    [Eattr*="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值存在 value
    [Eattr|="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value 或者 value- 的形式

    结构伪类选择器

    X:first-child 匹配子集的第一个元素
    X:last-child 匹配父元素中最后一个 X 元素
    X:nth-child(n) 用于匹配索引值为 n 的子元素。索引值从 1 开始
    X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是 div 下的有且仅有一个的 p ，也就是说，如果
    div 内有多个 p ，将不匹配。
    X:root 匹配文档的根元素。在 HTML （标准通用标记语言下的一个应用）中，根元素永远是 HTML
    X:empty 匹配没有任何子元素（包括包含文本）的元素

    目标伪类

    E:target 选择匹配 E 的所有元素，且匹配元素被相关 URL 指向

    UI状态伪类

    E:enabled 匹配所有用户界面（ form 表单）中处于可用状态的 E 元素
    E:disabled 匹配所有用户界面（ form 表单）中处于不可用状态的 E 元素
    E:checked 匹配所有用户界面（ form 表单）中处于选中状态的元素 E
    E:selection 匹配 E 元素中被用户选中或处于高亮状态的部分

    否定伪类E:

    not(s) （ IE6-8 浏览器不支持 :not() 选择器。）匹配所有不匹配简单选择符 s 的元素 E

    动态伪类

    E:link 链接伪类选择器 选择匹配的 E 元素，而且匹配元素被定义了超链接并未被访问过。常用于链接
    描点上
    E:visited 链接伪类选择器 选择匹配的 E 元素，而且匹配元素被定义了超链接并已被访问过。常用于链接
    描点上
    E:active 用户行为选择器 选择匹配的 E 元素，且匹配元素被激活。常用于链接描点和按钮上
    E:hover 用户行为选择器 选择匹配的 E 元素，且用户鼠标停留在元素 E 上。 IE6 及以下浏览器仅支持
    a:hover
    E:focus 用户行为选择器 选择匹配的 E 元素，而且匹配元素获取焦点

    属性继承

    继承： html 元素可以从父元素那里继承一部分 css 属性，即使当前元素没有定义该属性。
    1. 字体系列属性 font ， font-family ， font-weight ， font-size ， font-style
    2. 文本系列属性 text-indent ， text-align ， line-height ， word-spacing ， letter-spacing ，
    text-transform ， color
    3. 元素可见性 visibility
    4. 表格布局属性 caption-side ， border-collapse ， border-spacing ， empty-cells ， table
    layout
    5. 列表布局属性 list-style-type ， list-style-image ， list-style-position ， list-style

    选择器优先级的算法

    优先级就近原则，同权重情况下样式定义最近者为准 ;
    载入样式以最后载入的定位为准 ;
    优先级为：同权重 : 内联样式表（标签内部） > 嵌入样式表（当前文件中） > 外部样式表（外部
    文件中）。
    !important > id > class > tag important 比 内联优先级高

    7、css引入的方式有哪些，link和@import的

    区别是什么

    区别1 ： link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
    区别2 ：当一个页面被加载的时候（就是被浏览者浏览的时候）， link 引用的 CSS 会同时被加载，而
    @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时
    开始会没有样式（就是闪烁），网速慢的时候还挺明显。
    区别3 ： @import 是 CSS2.1 提出的，所以老的浏览器不支持， @import 只有在 IE5 以上的才能识别，而
    link 标签无此问题。
    区别4 ：使用 dom(document object model 文档对象模型 ) 控制样式时的差别：当使用 javascript 控制
    dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的 .
  • 相关阅读:
    关于iterm2的美化
    vue3 封装公共弹窗函数
    【力扣LCP】速算机器人
    【kotlin】Kotlin学习：run、with、apply、also、let的区别
    点亮一个LED+LED闪烁+LED流水灯——“51单片机”
    Java BufferedReader类简介说明
    python创建虚拟环境（非anaconda）并打包环境在另一台机器离线移植安装
    Dubbo框架实现RPC远程调用包括nacos的配置和初始化
    IPQ6010-Fast, reliable and secure wireless connectivity
    【vue】vue前端、生产（线上）环境请求unicloud云服务空间axios报错
  • 原文地址：https://blog.csdn.net/weixin_48649246/article/details/128104617