<!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. express 路由匹配和数据获取

    express配置路由只需要通过app.method(url,func)来配置,其中url配置和其中的参数获取方法不同 直接写全路径 路由中允许存在. get请求传入的参数 router.get(&q ...

  2. oracle 基础SQL语句 版本5.7.29

    一.表与用户介绍 oracle安装完成后默认会有很多用户,大致分为2类用户:一类是必需的帐户,一类是存储各种应用的帐户,默认密码如下: oracle自带的也会有很多默认表存在: 二.创建用户.创建表空 ...

  3. Java_正则表达式和文本操作

    正则表达式语法 普通字符 字母.数字.汉字.下划线.以及没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的一个字符. 简单的转义字 ...

  4. Python3入门系列之-----内置的文件操作模块OS

    前言 在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量文件和大量路径进行操作,这个时候就需要用到os模块. 使用前 ...

  5. Unity 刚体问题 解决相互作用力

    在进行开发过程中,当两个都具有碰撞体和刚体的 游戏物体进行接触之后,或多或少都会出现相互作用力,对于体验有一定的影响. 需要在FixedUpdate(间隔固定的时间调用,不受游戏帧率的影响)  当中  ...

  6. GKCTF 2021 Reverse Writeup

    前言 GKCTF 2021所以题目均以开源,下面所说的一切思路可以自行通过源码对比IDA进行验证. Github项目地址:https://github.com/w4nd3r-0/GKCTF2021 出 ...

  7. Apache ShardingSphere 元数据加载剖析

    唐国城 小米软件工程师,主要负责 MIUI 浏览器服务端研发工作.热爱开源,热爱技术,喜欢探索,热衷于研究学习各种开源中间件,很高兴能参与到 ShardingSphere 社区建设中,希望在社区中努力 ...

  8. java笔记（一直更新）

    .equals()调用时,最好把equals前面放常量或者是确定有的,如果是前面是null,则会报空指针错误 也可以在调用前判断是否为null

  9. 分布式应用开发 | SpringBoot+dubbo+zookeeper实现服务注册发现 | 远程服务调用

    前言 通过新建两个独立服务--提供者.消费者,模拟两个独立分布的应用,通过使用dubbo+zookeeper来实现远程服务调用. 目录 项目搭建 provider-server consumer-se ...

  10. UI BLOCK自定义枚举控件的宽度

    三步: 1.修改PresentationStyle属性为Radio Box 2.修改NumberOfColumns属性为指定的宽度(显示字符的个数) 3.将PresentationStyle属性改回O ...