前端知识复习（一）
1.CSS 中的盒子模型
画出对应的content, margin, padding, and border 边界
图片.png
2.元素 span, img, video 可以设置宽高吗？
span不可以，img和video可以 span 属于行内非替换元素不能设置宽高，img, video 属于行内替换元素，可以设置宽高
3.描述 CSS 层叠样式优先级
图片.png
4.CSS 水平居中元素,CSS 垂直居中元素
水平居中元素
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
文档所有资源加载完成。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录