1.CSS 中的盒子模型

画出对应的content, margin, padding, and border 边界

图片.png

2.元素 span, img, video 可以设置宽高吗？

span不可以，img和video可以 span 属于行内非替换元素不能设置宽高，img, video 属于行内替换元素，可以设置宽高

3.描述 CSS 层叠样式优先级

图片.png

4.CSS 水平居中元素,CSS 垂直居中元素

具体：https://css-tricks.com/centering-css-complete-guide/

水平居中元素

1）

<div style="text-align:center;">
  <div>元素</div>
</div>

2）

margin:0 auto;

3）

.father{
  text-align:center;
}
.child{
  display:inline-block;
}

4）

.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中元素

1）单行文字垂直居中使用padding，使用line-height

2）table中使用

vertical-align: middle;

5.页面有 5 个 div 元素，使用 for 遍历，实现点击对应的 div 时，分别 alert 出 div 内的文本内容

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div>test4</div>
    <div>test5</div>
</body>
<script>
    var divs= document.getElementsByTagName('div')
    for(let i=0,len=divs.length;i<len;i++){
        (function(){
            divs[i].onclick=function(){
                alert(divs[i].innerText)
            }
        })(i)
    }
</script>
</html>

6.实现一个 DOM ready 函数

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

document.readyState有三种状态：

loading

文档正在加载

interactive

文档结束加载，文档已经解析但是像图片，样式和框架还在加载

complete

文档所有资源加载完成。

前端知识复习（一）

1.CSS 中的盒子模型

2.元素 span, img, video 可以设置宽高吗？

3.描述 CSS 层叠样式优先级

4.CSS 水平居中元素,CSS 垂直居中元素

水平居中元素

垂直居中元素

5.页面有 5 个 div 元素，使用 for 遍历，实现点击对应的 div 时，分别 alert 出 div 内的文本内容

6.实现一个 DOM ready 函数

document.readyState有三种状态：

loading

interactive

complete