前端练习总结(1)

前端实习练习题

visibility:hidden display:none

visibility: hidden; 与 display: none; 两者没有本质上的区别：错误。visibility: hidden; 保留空间，只是隐藏视觉效果，而 display: none; 则完全移除元素，不保留空间。

visibility: hidden; 隐藏元素，但该元素仍然占据空间，只是视觉上不可见。

display: none; 会将元素完全从文档流中移除，不会为它保留任何物理空间。

visibility: hidden; 产生 reflow 和 repaint(回流与重绘)：正确。visibility: hidden; 由于元素还占据空间，浏览器需要重新计算布局（reflow）和重新绘制页面（repaint）。

把鼠标移到按钮并点击时 hover active focus的顺序

当用户将鼠标移到按钮并点击时，CSS 伪类 hover、active 和 focus 的触发顺序如下：

hover: 当鼠标悬停在按钮上时，首先触发 hover 状态。该状态表示鼠标在按钮上方但尚未进行点击。

active: 当用户按下鼠标按钮时（点击但未释放），按钮进入 active 状态。此时按钮看起来像是被“按下”了。

focus: 如果按钮是可以获得焦点的元素（如 或 ），在用户点击后释放鼠标时，按钮会进入 focus 状态。focus 表示该元素现在具有键盘或其他交互设备的焦点。

代码输出结果1

function func() {
   
	var n = 1;
	add = function() {
    n += 1 } // add 定义在全局
	function innerFunc() {
   
        alert(n)
    }
    return innerFunc; // 这里不调用 innerFunc，而是返回它
}

var result = func(); // result 是 innerFunc 函数
result(); // 弹出 1
add();    // n 增加 1
result(); // 弹出 2

输出是 1，2

第一次result，add 函数被定义为全局函数，它会将 n 的值增加 1，但是在这里并没有调用它，因此此时 n 仍然是 1。

代码输出结果2

for(var i=5; i>0; i--) {
   
	setTimeOut(function(){
   
		console.log(i)
    }, 1000*i)
}

答案是 0 0 0 0 0

CSS中哪些属性可以继承

• 盒模型
  content padding border margin
• 两种盒模型模式
  ① 标准模型（默认行为，content-box&#