<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/login.css"/>

        <script type="text/javascript">

            window.onload=function(){

            var btn=document.querySelector("button");

                btn.onclick=function(){

                    var box=document.querySelector(".box");

                    box.style.display="flex";

                }

                var close=document.querySelector(".close");

                close.onclick=function(){

                    var box=document.querySelector(".box");

                    box.style.display="none";

                }

            }

            //    document.querySelectorAll()    找全部

            //    配合 遍历使用  找到所以button

            //    document.querySelector()找一个

        </script>

    </head>

    <body>

        <button type="button">显示登录框</button>

            <div class="box">

                <div class="content">

                  <span class="close">&times;</span>

                </div>

            </div>

    </body>

</html>
*{

    margin: 0;

    padding: 0;

}

body,

.box{

    width: 100%;

    height: 600px;

}

body {

    position: relative;

}

.box{

    position: absolute;

    top: 0;

    left: 0;

    background-color: rgba(0,0,0,0.333);

    display: flex;

    justify-content: space-around;

    align-items: center;

    display: none;

}

.box .content .close{

    float: right;

    width: 16px;

    display: block;

}

.box .content{

    width: 750px;

    height: 380px;

    background-color: #FFFFFF;

}
 //    document.querySelectorAll()    找全部

            //    配合 遍历使用  找到所以button

            //    document.querySelector()找一个
面试题：
26. 行内元素有哪些?块级元素有哪些?CSS 的盒模型
(1) 块级元素：div p h1 h2 h3 h4 form ul
(2) 行内元素: a b br i span input select
(3) Css 盒模型:内容，border ,margin，padding
27. 列出 display 的值，说明他们的作用。
(1) block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
(2) none 元素不显示，并从文档流中移除。
(3) inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
(4) inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
(5) list-item
象块类型元素一样显示，并添加样式列表标记。
(6) table 此元素会作为块级表格来显示。
(7) inherit 规定应该从父元素继承 display 属性的值。
28. position 的值，relative 和 absolute 定位原点
(1) absolut 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
(2) fixed （老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
(3) relative 生成相对定位的元素，相对于其正常位置进行定位。
(4) static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index
声明）。
(5) inherit 规定从父元素继承 position 属性的值。
29. 页面导入样式时，使用 link 和@import 有什么区别
(1) link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范
畴，只能加载 CSS。
(2) link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
(3) link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器（IE5 以
下）不支持。
(4) link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。30. 解释下浮动和它的工作原理
(1) 浮动出现的最开始出现的意义是用来让文字环绕图片而已。
(2) float 可以自动包裹元素。float 会导致高度塌陷。
(3) float 为什么会导致高度塌陷：元素含有浮动属性 –> 破坏 inline box –> 破坏 line box 高度
–> 没有高度 –> 塌陷。
(4) 什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产
生自己的块级格式化上下文。

js点击事件 登录的更多相关文章

  1. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  2. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  3. IOS的UIWebView中JS点击事件，需要加入cursor：pointer;属性才可以

    IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.

  4. js点击事件防止用户重复点击执行

    点击事件里给button标签加一个自定义属性,存上次点击时间 追问: 求详细代码,JS 真心的没怎么做过 追答:   <input type="button" id=&quo ...

  5. js点击事件，数字累加

    <!doctype html><html lang="en"><head>    <meta charset="utf-8&qu ...

  6. JS 点击事件学习总结

    废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...

  7. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  8. JS点击事件的重叠处理（多个点击事件出现冲突）

    最近开发遇见了一个这个样的情况,一个button在一个div中,点击buton是一个事件,点击大的div也是一个事件,但是由于button在div中,点击button会把两个事件都执行了,但是我们想点 ...

  9. js点击事件在苹果端失效的问题

    在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定 ...

随机推荐

  1. Linux系列（25） - 常用快捷键（未更新完）

    快捷键 说明 Ctrl+L 清屏 tab tab按一次自动补全目录文件名称/tab按二次将目录下带有补全前面字段的所有文件目录展示出来,例子: cd /   tab键按两次将根目录下所有文件展示出来 ...

  2. python编码问题：UnicodeDecodeError: 'gbk' codec can't decode

    在获取yaml文件数据时,提示:UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 2: illegal multib ...

  3. mysql8 navicat远程链接失败

    原因:mysql 8加密规则问题 更改加密规则: ALTER USER 'ycc'@'%' IDENTIFIED BY 'you password' PASSWORD EXPIRE NEVER; 修改 ...

  4. 定要过python二级 选择题第5套

    1. 2.. 3. https://zhidao.baidu.com/question/1952133724016713828.html 4. 5. 6. 7. 8. 9. 10. 11.

  5. 鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的 | 百篇博客分析OpenHarmony源码 | v20.04

    百篇博客系列篇.本篇为: v20.xx 鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的 | 51.c.h .o 精读内核源码就绕不过汇编语言,鸿蒙内核有6个汇编文件,读不懂它们就真的很难理解 ...

  6. 服务器使用matplotlib绘图

    Two points: 1. change backend of matplotlib: import matplotlib.pyplot as plt plt.switch_backend('agg ...

  7. Python：PNG图像生成MP4

    Python:PNG图像生成MP4 需求 需要将多张*.PNG图像,生成mp4格式的视频文件. 实现 利用Python中image库生成*.gif格式图像,但是图片未经压缩,文件体量较大. movie ...

  8. 10.7 URI

    URI:   Uniform Resource Identifier  统一资源标识符 URL:  Uniform Resource Locator    统一资源定位符 URN: Uniform R ...

  9. 从零入门 Serverless | Serverless Kubernetes 应用部署及扩缩容

    作者 | 邓青琳(轻零) 阿里云技术专家 导读:本文分为三个部分,首先给大家演示 Serverless Kubernetes 集群的创建和业务应用的部署,其次介绍 Serverless Kuberne ...

  10. 从零入门 Serverless | Knative 带来的极致 Serverless 体验

    作者 | 冬岛 阿里巴巴高级技术专家 Serverless 公众号后台回复"knative",即可免费下载<Knative 云原生应用开发指南>电子书! 导读:Serv ...