<!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. jquery 设置django全局token

    通过JQUEYR中的ajaxSetup,来设置django中的token,即不需要再每次都去引用: 第一步: 先django中的html中设置 {%  csrf_token %} 第二步: 新一个js ...

  2. python二级 第9套

    1. prInt.默认输出空格 2. 我的这种想法也行不通啊 format() 一次只能有一个未知量 2. 分割的结果就是列表 3. 对比"大学"    上一套的split('&q ...

  3. CF835E-The penguin‘s game【交互】

    正题 题目链接:https://www.luogu.com.cn/problem/CF835E 题目大意 长度为\(n\)的序列中有两个\(y\)其他都是\(x\),给出\(n,x,y\).你每次可以 ...

  4. Jave Hbase AP

    Hbase API 类和数据模型的对应关系 HBaseAdmin 类:org.apache.hadoop.hbase.client.HBaseAdmin 作用:提供了一个接口来管理 HBase 数据库 ...

  5. Knativa 基于流量的灰度发布和自动弹性实践

    作者 | 李鹏(元毅) 来源 | Serverless 公众号 一.Knative Knative 提供了基于流量的自动扩缩容能力,可以根据应用的请求量,在高峰时自动扩容实例数:当请求量减少以后,自动 ...

  6. Django对表单进行增删改查

    查 首先在url中写好路径 其次在后面参数的views里写函数类xxxxxxx的基本逻辑 定义一个函数xxxxxxx,继承request,注意这个request对数据库操作结果都会存放在request ...

  7. scratch塔罗牌的制作

    首先,这个程序的流程是洗牌->占卜,很简单的一个程序.那个程序的组成是什么呢? 该程序由22张大卡.开始洗牌按钮.占卜按钮和说出占卜结果的角色组成. 先来说说开始洗牌按钮吧. 开始的时候移动到相 ...

  8. GoLang设计模式11 - 备忘录模式

    备忘录模式是一种行为型设计模式.这种模式允许我们保存对象在某些关键节点时的必要信息,以便于在适当的时候可以将之恢复到之前的状态.通常它可以用来帮助设计撤销/恢复操作. 下面是备忘录设计模式的主要角色: ...

  9. 【UE4 C++】学习笔记汇总

    UE4 概念知识 基础概念--文件结构.类型.反射.编译.接口.垃圾回收.序列化[导图] GamePlay架构[导图] 类的继承层级关系[导图] 反射机制 垃圾回收机制/算法 序列化 Actor 的生 ...

  10. 【c++ Prime 学习笔记】第16章 模板与泛型编程

    面向对象编程(OOP)和泛型编程(GP)都能处理在编写程序时类型未知的情况 OOP能处理运行时获取类型的情况 GP能处理编译期可获取类型的情况 标准库的容器.迭代器.算法都是泛型编程 编写泛型程序时独 ...