专栏首页技术综合前端知识复习(一)

前端知识复习(一)

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

文档所有资源加载完成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML中p标签中插入div标签会发生什么

    问题: <p>中能不能插入<div>? 插入<div>会如何? 先试验一下

    治电小白菜
  • 移动端下拉筛选

    治电小白菜
  • CSS实现简易翻书效果

    治电小白菜
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • APICloud开发者进阶之路|【案例源码】简单时间轴

    因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:

    APICloud
  • jQuery第二十一篇 scrollTop

    用户7873631
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程
  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券