<!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. ecshop不同的文章分类使用不同的模板的方法

    ecshop文章模板做的太简单,页面很丑,怎么才能实现不同的文章使用不同的模板呢,方法是有的,就是没有shopex那么方便,但还可以实现,只要能用就行. 1.打开article_cat.php文件,在 ...

  2. 什么是云效 Projex，云效Projex企业级高效研发项目管理平台

    云效项目协作Projects是一款企业级高效研发项目管理平台, 提供了快速实践的敏捷研发项目管理机制,提供对需求.迭代.缺陷各个维度的协同管理以及相关的统计报告,让研发团队高效协作.践行敏捷并持续交付 ...

  3. PHP统计当前网站的访问人数，访问信息，被多少次访问。

    <?php  header('Content-type:text/html;charset=utf-8'); //统计流量(人数,访问次数,用户IP) //假设用户访问,得到IP地址 $remo ...

  4. p3c 插件，是怎么检查出你那屎山的代码？

    作者:小傅哥 博客:https://bugstack.cn 原文:https://mp.weixin.qq.com/s/RwzprbY2AhdgslY8tbVL-A 一.前言 你会对你用到都技术,好奇 ...

  5. Winform 控件命名规范

    前言 最近 Winform 项目做得比较多,控件命名规范上常用的能记住,但是有些总要查,写个记录吧.方便以后自己用,大家也可以参考. 标准控件 序号 控件类型简写 控件类型 1 btn Button ...

  6. 突破GD渲染的图片马

    <?php /* The algorithm of injecting the payload into the JPG image, which will keep unchanged aft ...

  7. 🚴‍♂️全套MySQL数据库教程_Mysql基础入门教程，零基础小白自学MySQL数据库必备教程☔ #002 # 第二单元 MySQL数据类型、操作表#

    二.本单元知识点概述 (Ⅰ)知识点概述 二.本单元教学目标 (Ⅰ)重点知识目标 1.Mysql的数据类型2.如何选择数据类型3.创建表4.修改表5.删除表 (Ⅱ)能力目标 1.熟练创建数据库及删除数据 ...

  8. 使用CSS选择器（第一部分）

    目录 使用CSS选择器(第一部分) 使用CSS基本选择器 选择所有元素 通用选择器 代码清单1 使用通用选择器 根据类型选择元素 元素类型选择器 代码清单2 使用元素类型选择器 提示 根据类选择元素 ...

  9. 2020.11.14-pta天梯练习赛补题

    7-7 矩阵A乘以B 给定两个矩阵A和B,要求你计算它们的乘积矩阵AB.需要注意的是,只有规模匹配的矩阵才可以相乘.即若A有R​a​​行.C​a​​列,B有R​b​​行.C​b​​列,则只有C​a​​ ...

  10. Java（5）输入和输出

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201515.html 博客主页:https://www.cnblogs.com/testero ...