实验室考核总结

最新推荐文章于 2024-03-25 16:35:02 发布

weixin_45925177

最新推荐文章于 2024-03-25 16:35:02 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/weixin_45925177/article/details/108802650

版权

                       前端2020年9.20考核题

1、选择器权重。

！Important>行内样式>id>class>标签>通配符

2、什么是Margin塌陷/合并？

Margin合并

《1》~两个元素是兄弟关系：

《2》~两个元素是父子关系（没有内边距或边框把外边距分割开）

《3》~一个空元素，没有边框和填充

如果这个外边距遇到另一个元素的外边距，还会发生合并：

解决方法
兄弟元素：
可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)
BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)
父子元素：
使用margin时，会出现另一个bug，这里称为margin塌陷（就是垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的）。
可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局)
使用BFC解决: 将父元素的渲染模式改为BFC渲染模式.

Margin塌陷

在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。
margin的塌陷现象分两种情况：1，兄弟关系的盒子 2 ，父子关系的盒子
1，兄弟关系的盒子margin塌陷的解决方法：
给上面的盒子加个margin-bottom（这个距离等于两个盒子之间的距离）或者给下面的盒子加个margin-top（这个距离等于两个盒子之间的距离）。
2 ，父子关系的盒子margin塌陷的解决方法：
给父盒子加上下边框或者给父盒子添加上下padding。

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

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发bfc
只要满足以下任意一条件,将会**触发BFC.**
body根元素
浮动元素：float：除none以为的值
绝对定位元素：position：absolute/fixed
display：inline-block/table-cells/flex
overflow：除了visible以外的值（hidden/auto/scroll)

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

属性：
Relative；absolute；static；fixed；sticky(粘性定位)
Relative和absolute区别：
absoleute绝对定位的意思是说，它的定位不受父元素中其他元素的影响
relative相对定位，就是会受到父元素中其他元素影响
1、都脱离普通的文档流，relative——原位置空间还在
absolute——原位置空间不在
2、相对于的元素，
relative——相对于父级，无论父级的position属性是什么，无父级，则相对于浏览器左上角
absolute——相对于position为absolute/relative的父级，也许此父级并不是直接父级（爷级）。无父层，则相对于body

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

vw
说明：相对于视口的宽度，视口被均分为100单位的vw
viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

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

相同点
- readonly和disabled都是可以禁止用户更改表单中的内容。比如都设为true，则form属性将不能被编辑
不同点
- readonly只针对input（text/password）和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio,checkbox等。
- 表单在使用GET或POST方式提交时，表单元素在使用了readonly后，值可以传递到后台；而表单元素在使用disabled后值不可以传递到后台。
- 所有控件都有disabled 属性，但是不一定有readonly属性；点击被readonly掉的按钮照样可以触发事件，但是被disabled掉的按钮就无法使用了不管上面有没有事件。

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

https://c.runoob.com/codedemo/3391
移动旋转倾斜缩放
1、rotate（旋转）
transform:rotate(10deg):旋转10度。“deg”表示度，正数为顺时针旋转，负数为逆时针旋转
2、scale（缩放）
transform:scale(0.4):水平和垂直方向同时缩放0.4倍
transform:scale(0.4,0.5):水平方向缩放0.4倍，垂直方向缩放0.5倍
transform:scaleX(0.4):水平方向缩放0.4倍
transform:scaleY(0.4):垂直方向缩放0.4倍
3、skew（倾斜）
transform: skew(30deg, 45deg)：水平方向以skew的默认原点transform-origin为中心点倾斜30度，垂直方向以skew的默认原点transform-origin为中心点倾斜45度
transform: skewX(30deg) ：水平方向以skew的默认原点transform-origin为中心点倾斜30度
transform: skewY(30deg) ：：垂直方向以skew的默认原点transform-origin为中心点倾斜30度
4、==translate（移动）==左负右正
transform: translate(45px, 150px)：水平移动45像素，垂直移动150像素
transform: translateX(45px) ：水平移动45像素
transform: translateY(45px) ：垂直移动45像素
transform-origin（中心点）

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

标准盒模型实际大小:
宽 = width +padding2+border2
高 = height +padding2 + border2
IE盒模型实际大小:
宽 = width
高 = height

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

原文链接：查看更多实例
防止冒泡和捕获
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true·
取消默认事件
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
还有return false只会阻止默认行为

10、写出下列打印的值<变量提升问题>

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

所有的声明都会提升到作用域的最顶上去。同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。函数声明的优先级高于变量声明并且函数声明和函数定义的部分一起被提升。

函数声明 
    bar()function bar() {
  console.log(1);}//输出结果1

变量声明
bar()
var bar = function() {
  console.log(1);}// 报错：TypeError: bar is not a function

其它例子

console.log(a);  //undefined
var a = 123;

console.log(v1);var v1 = 100;function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);}foo();
console.log(v1);// undefined  undefined 200  100

11、写出下列函数的i的返回值（函数闭包）

function  createFunctions() {
      var result = new Array();

            for (var i = 0;i<10;i++){
                result[i] = function () {
                    return i;
                }
            }
          return result;
        }

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 除了基本数据类型，其它都是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种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。

14、以下代码的结果是？

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

a=20;
True;
False;

15、js中SetInterval与setTimeout的区别？

setTimeout运行代码需要缓存，只执行一次
Setinterval运行代码隔一段时间，是反复的，类似循环
假设，执行这段代码需要12秒钟，设定的循环时间是5秒钟，
setTimeout :每循环一次需要17秒
setInterval : 一定是每隔5秒执行一次（可能会前面的代码没执行完，就执行这段函数，造成冲突）

16、Get和post的区别？

POST和baiGET都是向服务器提交数据，并且都会从服du务器获取数据。

区别：

1传送方式：get通过地址栏传dao输，post通过报文传输。
2传送长度：get参数有长度限制（受限于url长度），而post无限制
3GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包
4.
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）

在这里插入图片描述

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

<script>
var sum = 0;
for(var i = 1 ; i <= 100; i++){
 sum += i;
}
document.writeln("1~100的累加和为：", sum);
</script>

weixin_45925177

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实验室考核总结

前端2020年9.20考核题1、选择器权重。！Important>行内样式>id>class>标签>通配符2、什么是Margin塌陷/合并？Margin合并《1》~两个元素是兄弟关系：《2》~两个元素是父子关系（没有内边距或边框把外边距分割开）《3》~一个空元素，没有边框和填充如果这个外边距遇到另一个元素的外边距，还会发生合并：解决方法兄弟元素：可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用...
复制链接

扫一扫