前端2020年9.20考核题总结

客官°小女子只卖身不卖艺 2022-12-11 01:24 185阅读 0赞

#### 1.选择器权重 ####

！important > 行内样式 > id > class / 属性选择器 > 标签选择器 > 通配符选择器

#### 2.什么是Margin塌陷/合并？ ####

margin塌陷：  
父子元素使用margin时，垂直方向的margin会合并，当父元素没有设置内边距或边框时，子元素大于父元素时，它会带着父元素一起偏移，此时子元素是相对除了它父级之外的离它最近的元素偏移的。当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷。  
margin合并（适用普通文档流，浮动框或绝对定位不会）:  
（1）两个元素是兄弟关系，外边距发生合并为高度中的较大者  
（2）两个元素是父子关系（没有内边距或边框把外边距分隔开），外边距发生合并为高度中的较大者  
（3）一个空元素，没有边框和填充，外边距合并成一个外边距，如果这个外边距遇到另一个元素的外边距，还会发生合并

#### 3.什么是bfc？列举出几种触发bfc的方式 ####

bfc:块级格式化上下文  
bfc触发方式：  
float属性不为none  
position为absolute或fixed  
display为inline-block, table-cell, table-caption, flex, inline-flex  
overflow不为visible

#### 4.position的属性有哪几个，relative与absolute的用法和区别 ####

position:absolute、fixed、relative、static、inherit

absolute:相对于 static 定位以外的第一个父元素进行定位。  
relative:生成相对定位的元素，相对于其正常位置进行定位。  
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。

#### 5.只用一条CSS代码表示浏览器一半的宽度 ####

width:50%vm;

vm,vh,vmin,vmax  
vm是相对于视口宽度百分比的单位，1vw = 1% viewport width。vh是相对于视口高度百分比的单位。1vh = 1% viewport height。vmin是相对当前视口宽高中较小的一个的百分比单位。vmax是相对当前视口宽高中较大的一个的百分比单位。

#### 6.form中的input可以设置为readonly和disable，请问二者有什么区别？ ####

disabled:指当input元素加载时禁用此元素，disabled=true时，无法修改内容，input内容不会随着表单被提交。  
readonly:规定输入字段为只读，readonly=true时，页面上无法修改内容，但是可以通过JavaScript修改，input内容会随着表单提交.  
区别：  
disabled设为true，该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。  
readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

#### 7.transform有哪些用法？（至少写出两个） ####

translate(x,y):水平移动Xpx，垂直移动Ypx。  
scaleX(x)：通过设置 X 轴的值来定义缩放转换。  
rotate(angle)：定义 2D 旋转，在参数中规定角度。  
rotate3d(x,y,z,angle)：定义 3D 旋转。

#### 8.在标准盒模型和ie盒模型下两个盒子的宽度和高度是多少？ ####

(1)  
标准盒模型：width:200px;height:200px  
ie盒模型：width:262px;height:242px;  
(2)  
标准盒模型：width:200px;height:100px;  
Ie盒模型：width:102px;height:102px;

#### 9.阻止冒泡和默认事件的方法 ####

1）阻止冒泡：  
w3c:e.stopPropagation()  
IE:e.cancelBubble = true。  
依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

window.event?event.cancelBubble=true:event.stopPropagation();

（2）默认事件  
reventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。如链接< a>，提交按钮< input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
    var a = document.getElementById("testA");
    a.onclick =function(e){
    	if(e.preventDefault){
    		e.preventDefault();
    	}else{
    	window.event.returnValue == false;
    	}
    }

#### 10.写出下列打印的值 ####

function fn(a){
    console.log(a);
    var a = 123;
    console.log(a);
    function a(){};
    console.log(a);
    var b = function(){};
    console.log(b);
    function c(){};
    }
    fn(1);

f a(){}
    123
    123
    f (){}

#### 11.写出下列函数的i的返回值 ####

10、10、10、10、10、10、10、10、10、10

#### 12.写出下列结果： ####

var a = [34,4,3,54],
        b = 34,
        c = 'adsfas',
        d = function(){console.log('我是函数')},
        e = true,
        f = null,
        g;
     console.log(typeof(a));                //object
     console.log(typeof(b));                //number
     console.log(typeof(c));          	    //string         
     console.log(typeof(d));                //function	
     console.log(typeof(e));                //boolean
     console.log(typeof(f));                //object
     console.log(typeof(g));                //undefined
     console.log(typeof(j));                //undefined
     alert(h);								//报错error

#### 13. 写出获取DOM元素的方法（至少写出4种） ####

document.getElementById();
        document.getElementsByClassName()[0];
        document.getElementsByTagName()[0];
        document.querySelectorAll();

#### 14.以下代码的结果是？ ####

var a = 10; 
    var b = 20; 
    var c = 10;
     alert(a = b); 
    alert(a ==  b);
    alert(a == c);

10  
true //此时a是20了，和b一样  
false

#### 15.js中SetInterval与setTimeout的区别？ ####

SetInterval：间歇调用，按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。  
setTimeout：用于在指定的毫秒数后调用函数或计算表达式。

#### 16.Get和post的区别？ ####

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。  
GET在浏览器回退时是无害的，而POST会再次提交请求。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET请求在URL中传送的参数是有长度限制的，而POST么有。

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

#### 17.写出下列代码的打印值 ####

function Person(person){
    person.age = 18;
    person ={
    name:‘xxxxx’,
    age:10
    }
    return person
    }
    
    let person = {
    name:‘yyyyy’,
    age:12
    }
    console.log(Person(person))

{name:"XXXXX"age:10}

#### 18.写出下列http状态码的含义 ####

1\*\*：信息，服务器收到请求，需要请求者继续执行操作  
2\*\*：成功，操作被成功接收并处理  
3\*\*：重定向，需要进一步的操作以完成请求  
4\*\*：客户端错误，请求包含语法错误或无法完成请求  
5\*\*：服务器错误，服务器在处理请求的过程中发生了错误

#### 19.只用css实现一个如图所示的三角形（不用css3） ####

.arrow{
                width:0; 
                height:0; 
                border-left:30px solid transparent;
                border-right:30px solid transparent;
                border-bottom:30px solid red;
                border-top:0;
            }
    
    <div class="arrow"></div>

#### 20.用js递归的方式写1到100求和？ ####

function sum(n){
            	if(n==1) return 1;
                return sum(n-1)+n;
            }
            alert(sum(100));		//5050