<!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. 在PHP中灵活使用foreach+list处理多维数组

    先抛出问题,有时候我们接收到的参数是多维数组,我们需要将他们转成普通的数组,比如: $arr = [ [1, 2, [3, 4]], [5, 6, [7, 8]], ]; 我们需要的结果是元素1变成1 ...

  2. Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'.

    HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的. Mixed Content: T ...

  3. Jmeter系列（30）- 性能指标(3) | 性能指标峰值

    性能指标峰值 简述 彻底理解了性能指标(1)(2)的内容,这一篇随笔其实就不用看了,而且大家也能猜到这一篇内容是啥:二八原则 性能指标不要硬性的往那些性能指标上去靠,要根据业务来,熟悉业务,明白了解你 ...

  4. 大前端快闪：package.json文件知多少？

    最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...

  5. linux帐户安全管理与技巧

    实验环境 CentosOS5.6试验台. 任务一:建立与删除普通用户账户,管理组 1)创建一个新用户user1 useradd user1 查看用户是否创建成功 2)创建一个新组group1 grou ...

  6. [转载]SELinux安全系统基础

    链接:http://www.cnblogs.com/xiaoluo501395377/archive/2013/05/26/3100444.html 本篇随笔将记录一下学习SELinux的一些心得与体 ...

  7. HTML 网页开发、CSS 基础语法——十一. CSS常用样式

    文字三属性 1.颜色color 2.字体font-family ① 常用字体 常用的中文字体: 宋体  SimSum 微软雅黑 Microsoft YaHei 常用的英文字体: 如果不设置字体属性,不 ...

  8. P7854-「EZEC-9」GCD Tree【构造】

    正题 题目连接:https://www.luogu.com.cn/problem/P7854 题目大意 给出\(n\)数字的一个序列\(a\). 现在要求构造一棵树,使得对于任意的\((x,y)\)都 ...

  9. 基于 Vuex 的时移操作（撤回/恢复）实现

    最近做了一个 BI 平台的可视化看板编辑器,项目刚做完一期,各方面的功能都还能粗糙,但该有的也都有了,比如编辑器场景下最基本的两类时移操作-撤回(undo) 和恢复 (redo). 用 vuex 实现 ...

  10. 熬夜整理小白入门与提升分布式版本管理软件：Git，图文并茂(建议收藏)

    @ 目录 什么是Git SVN VS Git 什么是版本控制 安装Git 谁在操作? Git本地仓库 本地仓库构造 重点 Git常用基本操作 git add git commit git diff g ...