前端必会面试题

最新推荐文章于 2021-06-07 17:06:57 发布

深度鸟

最新推荐文章于 2021-06-07 17:06:57 发布

阅读量6k

点赞数 5

分类专栏： JS基础

本文链接：https://blog.csdn.net/weixin_41767962/article/details/103661453

版权

1.类的创建和继承(1)原型链的继承function Animal(){ this.name="猫"; this.sex="雌性"; } Animal.prototype.say="您好"; function Cat(){ this.a="123"; th...

摘要由CSDN通过智能技术生成

1.类的创建和继承
(1)原型链的继承

function Animal(){
   
           this.name="猫";
           this.sex="雌性";
         }
         Animal.prototype.say="您好";
        function Cat(){
   
           this.a="123";
           this.b="456";
         }
        Cat.prototype.k="k"; 
        Cat.prototype=new Animal();
        Cat.prototype.c="789";
        var d=new Cat();
        console.log(d.a)//123
        console.log(d.name);//猫
        console.log(d.c);//789
        console.log(d.k);//undefined
        console.log(d.sex);//雌性
        console.log(d.say);//您好
        console.log(d instanceof Cat);//true
        console.log(d instanceof Animal);//true

优点：
实例即能够是子类的实例也能够是父类的实例，父类上的原型属性和方法都能够访问到。
缺点：1.虽然原型链继承很强大, 但是存在一个问题, 最主要的问题是包含引用类型值的原型, 因为包含引用类型值的原型属性会被所有的实例共享, 而在通过原型来实现继承的时候, 原型实际变成了另外一个函数的实例(这里边就有可能存在引用类型)，无法实现多继承。

function Parent() {
   
  this.newArr = ["heyushuo", "kebi"];
}

function Child() {
   
  this.name = "kebi";
}
Child.prototype = new Parent();
var Person1 = new Child();
Person1.newArr.push("kuli");
console.log(Person1.newArr); // ["heyushuo","kebi","kuli"]
var Person2 = new Child();
console.log(Person2.newArr); // ["heyushuo","kebi","kuli"]

2.无法向父类构造函数传参。
(2)构造函数的继承

function Animal(method){
   
           this.name="猫";
           this.sex="雌性";
           this.method=method;
           this.eat=function(){
   
           	console.log("eat");
           }
         }
         Animal.prototype.say="您好";
        function Cat(method,level){
   
           Animal.call(this,method)
           this.a="123";
           this.b="456";
           this.level=level;
         }
         var c=new Cat("学习","优秀")
         var e=new Cat("学习2","良好")
         console.log(c.name)//猫
         console.log(c.sex)//雌性
         console.log(c.a)//123
         console.log(c.b)//456
         console.log(c.say)//undefined
         console.log(c.method==e.method)//false
         console.log(c.method)//学习
         console.log(e.method)//学习2
         console.log(c.say)//undefiend
         console.log(e.say)//undefined

优点：1.实现了多继承
2.能够向父类构造函数传参数
缺点：只能继承父类构造函数的属性和方法，但是无法继承其原型上的属性和方法
(2)组合继承

function Animal(method){
   
           this.name="猫";
           this.sex="雌性";
           this.method=method;
           this.eat=function(){
   
           	console.log("eat");
           }
         }
         Animal.prototype.say="您好";
        function Cat(method,level){
   
           Animal.call(this,method)
           this.a="123";
           this.b="456";
           this.level=level;
         }
         Cat.prototype=new Animal();
         var c=new Cat("学习","优秀")
         var e=new Cat("学习2","良好")
         console.log(c.name)//猫
         console.log(c.sex)//雌性
         console.log(c.a)//123
         console.log(c.b)//456
         console.log(c.method==e.method)//false
         console.log(c.method)//学习
         console.log(e.method)//学习2
         console.log(c.say)//您好
         console.log(e.say)//您好
         console.log(c instanceof Cat)//true
         console.log(c instanceof Animal)//true

优点：实例能够是子类的实例的也是父类的实例，实现多继承，也可以向父类进行传参数。
缺点：调用了两次父类构造函数，生成了两份实例。
(3)寄生式组合继承

unction Animal(method){
   
           this.name="猫";
           this.sex="雌性";
           this.method=method;
           this.eat=function(){
   
           	console.log("eat");
           }
         }
         Animal.prototype.say="您好";
        function Cat(method,level){
   
           Animal.call(this,method)
           this.a="123";
           this.b="456";
           this.level=level;
         }
         (function () {
   
         	var Super=function(){
   }
         		Super.prototype=Animal.prototype;
         		Cat.prototype=new Super();
         	
         })();
         var c=new Cat("学习","优秀");
         var e=new Cat("学习2","良好");
         console.log(c.name)//猫
         console.log(c.sex)//雌性
         console.log(c.a)//123
         console.log(c.b)//456
         console.log(c.method==e.method)//false
         console.log(c.method)//学习
         console.log(e.method)//学习2
         console.log(c.say)//您好
         console.log(e.say)//您好
         console.log(c instanceof Cat)//true
         console.log(c instanceof Animal)//true

2.取消默认事件

function cancel(event){
   
   var event=event||window.event;
   if(event.preventDefault)  event.preventDefault();
   if(event.returnValue)  event.returnValue=false;
}

3.图片的懒加载和预加载

4.函数的节流与防抖
防抖：

function debounce（func，delay）{
   
     delay=delay||300;
     var timer=null;
     return function(){
   
         var _self=this;
         var args=arguments;
         clearTimeout=(timer);
         timer=setTimeout(function(){
   
           func.apply(_self,args)
         },delay)
     }
 }

节流：

function throttle(func,delay){
   
     var delay=delay||300;
     var lastTime=0;
     return function(){
   
       var _self=this;
       var arg=arguments;
       var nowTime=new Date().getTime();
       if(nowTime-lastTime>delay)
          func.apply(_self,arguments);
          lastTime=nowTime;
     }
}

5.拷贝
深拷贝

1.var deepClone=function(obj){
   
     if(typeof obj !="object") return;
     var newObj=obj instanceof Array？[]:{
   };
     for(var key in obj){
   
          if(obj.hasOwnProperty(key)){
   
            newObj[key]=typeof obj[key]==='object'?deepClone(obj[key]):obj[key];
          }
      }
      return newObj；
 }

缺点：这里只是针对Object引用类型的值的循环迭代，而对于Array，Date，RegExp，Error，Function引用类型
无法正确拷贝
浅拷贝

var shallowClone=function(obj){
   
   if(typeof obj!="object") return;
   var newObj=obj instanceof Array?[]:{
   };
   for(var key in obj){
   
      if(obj.hasOwnProperty(key)){
   
          newObj[key]=obj[key];
       }
   }
   return newObj;
}
深拷贝：
2.JSON.parse(JSON.stringify())
缺点：
1.拷贝的对象的值中如果有函数，undefined则经过JSON.stringify()序列化后的
JSON字符串中这个键值对会消失。
```javascript
var obj={
   
       a:1,
       b:"str",
       c:function(){
   console.log("abc")},
       d:undefined
       
   }
   console.log(JSON.parse(JSON.stringify(obj)))

在这里插入图片描述
2.拷贝Date引用类型会变成字符串
3.对象中含有NaN、Infinity和-Infinity，则序列化的结果会变成null

var obj={
   
       a:1,
       b:"str",
       c:function(){
   console.log("abc")},
       d:undefined,
       e:NaN,
       f:Infinity,
       g:-Infinity
   }
   console.log(JSON.parse(JSON.stringify(obj)))

在这里插入图片描述
4.拷贝RegExp引用类型会变成空对象

var obj={
   
       a:1,
       b:"str",
       c:function(){
   console.log("abc")},
       d:undefined,
       e:NaN,
       f:Infinity,
       g:-Infinity,
       h:new RegExp(/\d/g)
       
   }
   console.log(JSON.parse(JSON.stringify(obj)))

在这里插入图片描述 6.传入函数参数只执行一次

function ones(func){
   
    var tag=true;
    return function(){
   
       if(tag==true){
   
          func.aplly(null,arguments);
          tag=false;
       }
       else
       return undefined;
    }
  }

7.将原生的ajax封装成promise

var myAjax=function(url){
   
    return new Promise(resolve,reject){
   
         var xhr=new XMLHttpRequest();
         xhr.open('get',url);
         xhr.send();
         xhr.onreadystatechange=function(){
   
            if(xhr.status==200&&xhr.readyState==4){
   
                 var json=JSON.parse(xhr.responseText);
                 resolve(json);
             }
             else if(xhr.status!=200&&xhr.readyState==4){
   
                 reject("error")
             }
         }
    }
}

8.requestAnimationFrame
requestAnimationFrame是不需要设置时间间隔的，大多数电脑显示器的刷新频率为60hz，每秒钟刷新60次，最佳的时间间隔是1000/60=16.6ms
特点：
(1).requestAnimationFrame会把每一帧中所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流时间隔紧紧跟随浏览器的刷新速率。
(2).在隐藏或不可见的元素中，requestAnimalFrame将不会进行重绘或回流，这当然就意味着更少的CPU，GPU和内存使用量。
9.js判断类型
判断方法：typeof(),instanceof,Object.prototype.toString.call()等
运算符结果
undefined “undefined”
null “object”
布尔值 “boolean”
数字 “number”
函数 “function”
其他都是object
typeof(nan)//number
typeof(nan==undefined)//boolean
Object.prototype.toString.call(dd)//[object Function]
Object.prototype.toString.call(Array)//[object Function]
Object.prototype.toString.call(new Array)//[object Array]
Object.prototype.toString.call(new Object)//[object Object]
Object.prototype.toString.call(new Date)//[object Date]
Object.prototype.toString.call(undefined)//[object Undefind]
Object.prototype.toString.call(null)//[object Null]
Object.prototype.toString.call(“123”)//[object String]
Object.prototype.toString.call(123)//[object Number]
9.实现add(1)(2)(3)(4)

function add(num){
   
   var sum=num;
  var fn=function(v){
   
        sum+=v;
        return fn;
  }
  fn.toString=function(){
   
       return sum;
  }
  return fn;
}
console.log(add(1)(2)(3))

10.实现add(1)(1,2,3)(4)

function add(){
   
   var args=[...arguments];
   var fn=function(){
   args.push(...arguments);return fn}
   fn.toString=function(){
   return args.reduce(function(arr,cur){
   return arr+cur;},0)}
   return fn
}
console.log(add(1)(1,2,3)(2))

11.JS的全排列

var permute=function (nums){
   
          result=[];
          arr=[];
          for(let j=0;j<nums.length;j++){
   
            arr.push(nums[j]);
          }
          find(arr,[])
          return result
       }
       function find(arr,templateList){
   
          if(arr.length==0){
   
             // var t=templateList.join("");//这个是转换为字符
              //result.push(t);
              result.push(templateList.slice());//返回的是数组
          }
          for(let i=0;i<arr.length;i++){
   
            templateList.push(arr[i]);
            let copy=arr.slice();
            copy.splice(i,1);
            find(copy,templateList);
            templateList.pop();
          }
       }
       console.log(permute("abc"));

12.比较判断
1.如果一个运算符是Boolean值，在检查相等之前，把转换为数字值，false为0，true为1.
2.如果一个运算数是字符串，另一个数字，则把字符串转换为数字
3.如果一个是对象，另一个数字，则把对象转换为数字 valueOf（）
4.如果一个是对象，另一个字符串，则把对象转换为字符串toString()
5.如果两个都是对象，则比较它们的引用值，指向同一个对象为true，否则为false
“NaN"NaN//false
5NaN//false
NaNNaN//false
NaN!=NaN//true
[]0//true
[]false//true
[]undefined//false
[]=null//false
[]’’//true
[]" "//false
0undefined//false
0null//false
0” “//true
false==” “//true
false==”"//true
[]==false//true
[0]==false//true
[00]false//true
[0,0]false//false
console.log(“10”*“20”)//200输出的类型都是number
console.log(“10”-“2”)//8
console.log(“10”-2)//8
console.log([] == ![]) // true
console.log([] == []) // false
console.log([] == {}) // false
console.log(new String(‘a’) == new String(‘a’)) // false
console.log(isNaN(NaN)) // true
console.log(isNaN(‘32131dsafdas’)) // true
console.log(NaN === NaN) // false
console.log(NaN === undefined) // false
console.log(undefined === undefined) // true
console.log(typeof NaN) // number
console.log([][])//false
console.log([]{})//false
console.log([]!=[])//false
console.log({} + []) // 0
console.log([] + {}) // “[object Object]”
console.log({} + {}) // “[object Object][object Object]”
console.log([]+ []) // “”
console.log({} + 1) // 1
console.log([] + 1) // “1”
类型转换的总结
1.Boolean()函数
以下值转换为false:
false,Null,undefined,NaN,0,""
其余都是true
逻辑与（&&）操作符，如果一个操作值不是布尔值时，遵循以下规则进行转换：
如果第一个操作数经Boolean()转换后为true，则返回第二个操作值，否则返回第一个值（不是Boolean()转换后的值
如果有一个操作值为null，返回null
如果有一个操作值为NaN，返回NaN
如果有一个操作值为undefined，返回undefined

console.log(null&&undefined)//null
console.log(undefined&&null)//undefined
console.log(NaN&&undefined)//NaN
console.log(undefined&&NaN)//undefined

逻辑或（||）操作符，如果一个操作值不是布尔值，遵循以下规则：
如果第一个操作值经Boolean()转换后为false，则返回第二个操作值，否则返回第一个操作值（不是Boolean()转换后的值
对于undefined、null和NaN的处理规则与逻辑与（&&）相同

console.log(NaN||null)//null
console.log(null||NaN)//NaN
console.log(null||undefined)//undefined
console.log(undefined||null)//null

2.关系操作符（<, >, <=, >=）
如果两个操作值都是数值，则进行数值比较
如果两个操作值都是字符串，则比较字符串对应的字符编码值
如果只有一个操作值是数值，则将另一个操作值转换为数值，进行数值比较
如果一个操作数是对象，则调用valueOf()方法（如果对象没有valueOf()方法则调用toString()方法），得到的结果按照前面的规则执行比较
如果一个操作值是布尔值，则将其转换为数值，再进行比较
注：NaN是非常特殊的值，它不和任何类型的值相等，包括它自己，同时它与任何类型的值比较大小时都返回false
3.Number(mix)函数
（1）如果是布尔值，true和false分别被转换为1和0
（2）如果是数字值，返回本身。
（3）如果是null，返回0.
（4）如果是undefined，返回NaN。
（5）如果是字符串，遵循以下规则：
1、如果字符串中只包含数字，则将其转换为十进制（忽略前导0）
2、如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）
3、如果是空字符串(""," “)，将其转换为0
4、如果字符串中包含非以上格式，则将其转换为NaN
（6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则(5)转换返回的字符串值。
4.parseInt(string,radix)函数//最后的输出都是10进制，radix表示目前这个数是几进制//parseInt(“033”,8),parseInt(“0x33”,16)
将字符串转换为整数类型的数值。它有一定的规则:
（1）忽略字符串前面的空格，直至找到第一个非空字符
（2）如果第一个字符不是数字符号或者负号，返回NaN
（3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
（4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以x开头，则将其当作十六进制来解析
（5）如果指定radix参数，则以radix为基数进行解析
5.parseFloat(string)函数
parseFloat(“10”)//10
parseFloat(“10.00”)//10
parseFloat(“10.33”)//10.33
parseFloat(“34 45 66”)//34
parseFloat(” 60 ")//60
parseFloat(“40 years”)//40
parseFloat(“He was 40”)//NaN
6.toString(radix)方法。
除undefined和null之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示。
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔，且连接起来。
Boolean 如果 Boolean 值是 true，则返回 “true”。否则，返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误信息的字符串。
Function 返回如下格式的字符串，其中 functionname 是被调用 toString 方法函数的名称：function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认返回 “[object objectname]”，其中 objectname 是对象类型的名称。
7.String(mix)函数。
将任何类型的值转换为字符串，其规则为：
（1）如果有toString()方法，则调用该方法（不传递radix参数）并返回结果
（2）如果是null，返回”null”
（3）如果是undefined，返回”undefined”
8. 如果是Infinity+(-Infinity)=NaN
+0+(+0)结果为+0
(-0)+(-0)结果为-0
(+0)+(-0)结果为+0
13.按需加载
当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几种情况:鼠标点击，输入文字，拉动滚动条，鼠标移动，窗口大小更改等。加载的文件，可以是JS、图片、css、HTML等。
13.什么是虚拟dom
用js对象结构表示dom树的结构；然后用这个树构建一个真正的dom树，插到文档当中，当状态变更时，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树的差异应用到所构建的真正的dom树上，视图就更新了。虚拟dom本质上就是在js和dom之间做了一个缓存。
14.实现一个bind函数
Function.prototype.bind=function(obj,arg){
var arg=Array.prototype.slice.call(arguments,1)
var content=this;
return function(newArg){
arg=arg.concat(Array.prototype.slice.call(newArg));
return context.apply(obj,arg);
}
}
15.一些主流浏览器对http1.1和http1.0的最大并发连接数目
浏览器 http1.1 http1.0
IE11 6 6
IE10 6 6
IE9 10 10
IE8 6 6
火狐 6 6
chrome 6 6
safari 4 4
16.head方式响应信息
1.content-length：http 的消息体传输长度
2.content-encoding：数据使用的编码类型
3.content-type：媒体资源类型
4.age:该响应在缓存机制存放多久
5.expires：过期时间
6.last-modified：修改时间
7.set-cookie：设置cookie
8.status：状态码
17.http 常用请求头
1.Accpet-encoding：所能接受的编码方式(compress,gzip)
2.cache-control:是否使用缓存机制
3.connection：连接类型
4.cookie
5.if-modified-since
6.if-none-match
7.referer：表示浏览器所访问的前一个页面
8.upgrade：服务器升级到一个高版本协议
18.http 请求方法
1.put:向指定资源位置上传其最新内容。
2.delete:请求服务器删除request-uri所标识的资源
3.trace：回显服务器收到的请求，主要用于测试或诊断。
4.connect：预留能够将连接改为管道方式的代理服务器，将服务器作为代理，让服务器代替用户访问其他网页，之后将数据返回给用户。(翻墙)
19.浏览器的内核有哪些？
1.IE：trident内核
2.火狐：gecko内核
3.safari：webkit内核
4.Opera：blink 内核
5.谷歌：blink 内核
20.介绍一下你对浏览器内核理解？
1.渲染引擎：负责取得网页的内容，整理讯息，计算网页的显示方式，然后输出至显示器。
2.js引擎：解析和执行js实现逻辑和控制dom进行交互。
21.常见的http的头部
可以将http首部分为通用首部,请求首部，响应首部，实体首部
通用首部表示一些通用信息，比如date表示报文创建时间
请求首部就是请求报文中独有的，如cookie，和缓存相关的如if-modified-since
响应首部就是响应报文中独有的，如set-cookie和last-modified
实体首部用来描述实体部分，如content-type描述主题类型，content-encoding描述主题类型，content-encoding描述主体的编码方式。
22.有继承性的属性
1.字体系列属性(font-size,font-weight,font-family)
2.文体类型属性(text-indent,text-align,line-height,color)
所有元素可以继承的属性
元素可见性：visilility
光标属性：cursor
23.js动画和css3动画的差异性
1.功能涵盖面，js比css大。
2.实现难度不一样，css比js更加简单。
3.对帧速表现不好的低版本浏览器，css3可以做到自然降级（css3优雅降级，从高版本降低到低版本，css3的渐进增强，从低版本提升到高版本）
24.css的伪类和伪元素
伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
伪元素：用于创建一些不在dom树中的元素，并为其添加样式。
伪类：
1.:link选择未访问的链接
2.:visited选择已访问的链接
3.:hover选择鼠标指针浮动在其上元素
4.:active选择活动的链接
5.:focus获取焦点的输入字段
伪元素：
:after
:before
在这里插入图片描述
25.line-height和height
line-height是指布局里面一段文字上下行之间的高度，是针对字体的设置，height一般是指容器的整体高度
注意：
1.如果标签没有定义height属性，那么其最终的表现的高度为line-height定。
2.line-height指下一行的基线到上一行的基线距离。
3.父元素的行高为1.5，子元素的字体为18px，子元素的行高为1.5*18px；
26.多行元素的文本省略号

display:-webkit-box
-webkit-box-orient:vertical//框的子元素应该被水平或垂直排列
-webkit-line-clamp:3
overflow:hidden

27.单行文本溢出

text-overflow：ellipsis
overflow：hidden
white-wrap：nowrap//如何处理空白，不换行

28.已知父元素宽高，子元素宽高
1.

.container{
   
  width:200px;
  height:200px;
  border:2px solid red;
  position:relative;
}
.son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  margin:auto auto;
}

.container{
   
  width:200px;
  height:200px;
  border:2px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}
.son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
}

.container{
   
  width:200px;
  height:200px;
  border:2px solid red;
  position:relative;
}
.son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
}

.container{
   
  width:200px;
  height:200px;
  border:2px solid red;
  position:relative;
}
.son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

29.未知父元素宽高，子元素宽高
1.

 <div class="son">
  </div>
  .son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  left:0px;
  right:0px;
  bottom:0px;
  top:0px;
  margin:auto auto;
}

  <div class="son">
  </div>
  .son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
}

  <div class="son">
  </div>
  .son{
   
  width:100px;
  height:100px;
  border:2px solid blue;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
//如果以浏览器为父级元素
<div class="center">
</div>
.center{
   
  margin: 50vh auto;
  transform: translateY(-50%);
}
.center{
   
   width:20%;
   height:20%;
   border:2px solid red;
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
}

30.已知父元素宽高，子元素宽高未知(跟子元素知道宽高一样)
1.

.container{
   
  width:200px;
  height:200px;
  border:2px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}
.son{
   
  width:20%;
  height:20%;
  border:2px solid blue;
}

31.三栏布局
1.

*{
   
  margin:0;
  padding:0;
}
.container{
   
  display:flex;
}
.left{
   
  width:100px;
  height:100px;
  background-color:red;
}
.center{
   
  flex-grow:1;
  height:100px;
  background-color:blue;
}
.right{
   
  width:100px;
  height:100px;
  background-color:yellow;
}

*{
   
  margin:0;
  padding:0;
}
.ex-center{
   
  width:100%;
  height:100px;
  background-color:red;
  float:left;
}
.left{
   
  width:100px;
  height:100px;
  background-color:blue;
  float:left;
  margin-left:-100%;
}
.right{
   
  width:100px;
  height:100px;
  background-color:yellow;
  float:left;
  margin-left:-100px;
}
.center{
   
  height:100px;
  margin:0px 100px;
  background-color:green;
}

*{
   
  margin:0;
  padding:0;
}
.left{
   
  position:absolute;
  left:0px;
  top:0px;
  background-color:red;
  width:100px;
  height:100px;
}
.right{
   
  position:absolute;
  right:0px;
  top:0px;
  background-color:yellow;
  width:100px;
  height:100px;
}
.center{
   
  position:absolute;
  left:100px;
  right:100px;
  top:0px;
  height:100px;
  background-color:green;
}

4.父元素是浏览器

.container{
   
  display:flex;
}
.A{
   
  width:100px;
  background:red;
  height:100%;
}
.B{
   
  flex-grow:1;
  background:yellow;
  height:100%;
}
.C{
   
  width:100px;
  background:black;
  height:100%:
}
//第二种
.container{
   
}
.A{
   
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  height:100%;
  background:red;
}
.B{
   
  position:absolute;
  top:0px;
  left:100px;
  height:100%;
  right:100px;
  background:yellow;
}
.C{
   
   position:absolute;
   top:0px;
   right:0px;
   width:100px;
   height:100%;
   background:blue;
}
//第三种
.container{
   
}
.A{
   
  width:100%;
  height:100%;
  background:red;
  float:left;
}
.B{
   
  width:100px;
  height:100%;
  background:blue;
  float:left;
  margin-left:-100%;
}
.C{
   
  width:100px;
  height:100%;
  background:yellow;
  float:left;
  margin-left:-100px;
   
}
.D{
   
  height:100%;
  margin:0 100px;
  background:pink;
}

两列自适应

*{
   
  margin:0;
  padding:0;
}
.container{
   
  display:flex;
}
.left{
   
    flex-grow:1;
     height:100px;
     background-color:red;
}
.right{
   
   flex-grow:1;
   height:100px;
    background-color:blue;
}
2.
.container{
   
  position:relative;
}
.left{
   
   position:absolute;
   width:50%;
   height:100px;
   background-color:red;
}
.right{
   
  position:absolute;
  left:50%

最低0.47元/天解锁文章

深度鸟

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端必会面试题

1.类的创建和继承(1)原型链的继承function Animal(){ this.name="猫"; this.sex="雌性"; } Animal.prototype.say="您好"; function Cat(){ this.a="123"; th...
复制链接

扫一扫

专栏目录