面试题-1（来自b站千峰教育）

rem em vw vw 百分比区别

相同点：
- rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别
不同点：
- px：是像素单位，属于绝对单位，是一个具体的大小
- rem：相对于根元素进行设置
- em：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。
- vw：1vw相当于浏览器窗口宽度的百分之一
- vh：1vh相当于浏览器窗口高度的百分之一
- 百分比：相对于父元素宽度或者高度的百分之几
- 注意：vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的

<!--注意里面的代码解释说明--> 
  <style>
       *{margin:0;padding:0}
       html,body{
           height: 100%;
       }
       .box1{
           width: 100%;
           height:500px;
           background-color: red;
       }
       .box2{
           width: 100vw;
           height:500px;
           background-color: green;
       }
  </style>
  <div class="box1"></div>
  <div class="box2"></div>

750的设计图，20px为多少rem

首先设计图是UI设计提供给前端开发工程师的设计稿，750的设计图出自于手机屏幕为375px*667px的iphone678手机屏幕的设计稿，这里也可以称之为2倍图。20px的字体大小涉及到了单位的转换，页面中默认的字体大小为16px，那么此时的1rem = 16px;
那么20px通过计算得出公式 1rem = 16px; ?rem = 20px; 得出结果为:1.25rem

扩展1：
因为他的设备像素比（dpr=物理像素/CSS像素）是2；dpr是一个固定的比值；不同的手机型号比值不应：
物理像素：可以理解成你ps里面测量的距离的大小
CSS像素：你编写开发代码的时候CSS里面给定的像素值；
dpr固定值如下如：

app怎么做适配的

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

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的高度时，浮动元素也参与计算

boder实现0.5像素

实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如下：

<div class="border3">
    <div class="content">伪类设置的边框</div>
</div>  
<style>
*{
     margin:0;padding:0
}
.border3{
     position: relative;         
}
.border3:before{
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
 }
</style>

场景题（两个盒子，左边固定宽，右边自适应，你能想到几种方法）

公共HTML代码部分

<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

方法一：float来和BFC实现

<style>
.content {
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
}
.left {
    width: 200px;
    height: 100%;
    background: red;
    float: left;
}
.right {
    height: 100%;
    background: pink;
    overflow: hidden;
}
</style>

方法二：absolute定位和margin值实现

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        position: absolute;
    }
    .right {
        height: 100%;
        background: pink;
        margin-left: 200px;
    }
</style>

方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值

<style>
 .content {
     border: 1px solid #000;
     height: 800px;
     padding: 20px;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        float: left;
    }
    .right {
        height: 100%;
        background: pink;
        float: left;
        width: calc(100% - 200px);
    }
</style>

方法四：flex布局轻松搞定

<style>
    .content {
        border: 1px solid #000;
        height: 800px;
        padding: 20px;
        display: flex;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
    }
    .right {
        height: 100%;
        background: pink;
        flex: 1;
    }
</style>

方法五：使用table和table-cell实现

 <style>
     .content {
         border: 1px solid #000;
         width: 100%;
         height: 800px;
         display: table;
     }
     .left {
         width: 200px;
         height: 100%;
         background: red;
         display: table-cell;
     }
     .right {
         height: 100%;
         background: pink;
         display: table-cell;
     }
</style>

方法六：使用inline-block携手calc函数设置宽度

<style>
    .content {
        border: 1px solid #000;
        width: 100%;
        height: 800px;
        font-size: 0;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        display: inline-block;
        vertical-align: top;
    }
    .right {
        height: 100%;
        background: pink;
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 200px);
        font-size: 16px;
    }
</style>

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

选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。
常用的选择器有以下内容：

ID　　#id
class　　.class
标签　　p
通用　　*
属性　　type=”text”
伪类　　:link :visited :hover :active
伪元素　　::first-line :first-letter
子选择器 div>p
后代选择器 div p
相邻兄弟 div+p
通用兄弟 div~p
结构伪类 :nth-child :first-child :last-child

权重计算规则：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、*权值为0000。
继承的样式没有权重值。

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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。