4 前端溢出定位模态框透明度 JavaScript简介

最新推荐文章于 2023-02-14 10:41:06 发布

Jianhao92

最新推荐文章于 2023-02-14 10:41:06 发布

阅读量679

点赞数

分类专栏：前端学习文章标签： html javascript js css

本文链接：https://blog.csdn.net/qq_36565509/article/details/106124079

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端

1 溢出属性overflow

标签内部的内容超出了标签自身的范围会造成内容的溢出。
overflow属性规定当内部内容溢出元素框时发生的事情。

overflow: visible （默认值）内容不会被修剪，会呈现在元素框之外。
overflow: hidden 内容会被修剪，并且其余内容是不可见的。
overflow: scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow: inherit 规定应该从父元素继承overflow属性的值。

案例：制作圆形头像

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
			background-color: #4e4e4e;
		}
		#d1 {
			height: 200px;
			width: 200px;
			border-radius: 50%;  /* 圆形 */
			border: 5px solid white;
			margin: 0 auto;
			overflow: hidden;  /* 超出的图片部分会被修剪。*/
		}
		#d1>img {
			width: 100%;  /* 图片在div中间，大小合适。*/
		}
	</style>
</head>
<body>
	<div id="d1">
		<img src="2.png">
	</div>
</body>
</html>

2 定位

position属性

position: static 静态（默认值）按照标准文档流定位，无法改变位置；
position: relative 相对定位相对于标签原来的位置做移动；
position: absolute 绝对定位相对于已经定位过的父标签做移动，如果没有父标签那么就以body为参照；
position: fixed 固定定位相对于浏览器窗口做移动。

如果标签的position属性设置为非静态的，可以使用属性 left / right / top / bottom 修改位置。
即使没有移动，仅将标签的position属性设置为非静态，例如relative，该标签的性质也已经改变了，从没有定位过的标签变为了已经定位过的标签。

 #d4 {
	position: fixed;  /* fixed，定位依据浏览器窗口 */
	bottom: 10px;
	right: 20px;
    height: 50px;
    width: 100px;
    background-color: white;
    border: 3px solid black;
}

3 浮动和定位是否脱离文档流

可以通过标签原来的位置是否还保留来判断。

不脱离文档流
相对定位
脱离文档流
浮动
绝对定位
固定定位

4 z-index和模态框

模态框（Modal）是覆盖在父窗体上的子窗体，用于在不离开父窗体的情况下显示一些内容，进行一些互动操作等。

z-index属性用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

案例：三层结构登陆页面

最底部是正常父窗体的内容 z=0 底层
灰色的半透明区域 z=99 中间层
白色的注册区域 z=100 模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .model {
            background-color: white;
            width: 400px;
            height: 200px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;  /* width/2 */
            margin-top: -100px;  /* height/2 */

        }
    </style>
</head>
<body>
	<div>这是最底层的页面内容</div>
	<div class="cover"></div>
	<div class="model">
	    <h1>登陆页面</h1>
	    <p>username:<input type="text"></p>
	    <p>password:<input type="text"></p>
	    <button>点击登录</button>
	</div>
</body>
</html>

5 透明度 opacity

opacity属性设置元素的不透明级别。

rgba只能修改颜色的透明度；
opacity可以修改颜色和字体的透明度。

6 JavaScript

6.1 介绍

JavaScript也是一门编程语言，是一种轻量级的脚本语言。
nodejs支持js代码在后端服务器上运行。
JavaScript与java没有任何关系。
ECMAScript与JavaScript的关系。
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现。

6.2 注释

// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/

6.3 两种引入方式

script标签内部直接书写js代码；
script标签的src属性引入外部js代码。

6.4 语法结构

js是以分号作为语句的结束，通常可以省略分号，但建议使用分号。

6.5 变量 var let

使用关键字 var 和 let 声明变量。

var 和 let 的区别：
var：存在变量提升现象，即无论声明在何处，都会被提至其所在作用域的顶部；
let：无变量提升现象，即未到let声明时，是无法访问该变量的。

使用未声明的变量，表现不同

console.log(varTest);  // 输出undefined (注意要注释掉下面一行才能运行)
console.log(letTest);  // 直接报错：ReferenceError: letTest is not defined.

var varTest = 'Test var.';
let letTest = 'Test let.';

重复声明同一个变量时，表现不同

var varTest = 'Test var.';
let letTest = 'Test let.';

var varTest = 'varTest changed.';
let letTest = 'letTest changed.';  // 直接报错：SyntaxError: Identifier 'letTest' has already been declared.

变量作用范围不同

var varTest = 'Test var.';
let letTest = 'Test let.';

{
	var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
}

console.log(varTest);  // 输出"varTest changed."，内部"{}"中声明的varTest变量会覆盖外部声明的varTest变量。
console.log(letTest);  // 输出"Test let."，内部"{}"中声明的letTest和外部声明的letTest不是同一个变量。

6.6 常量 const

const pi = 3.14

7 练习

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的主页</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="sidebar">
		<div class="avatar">
			<img src="avatar.jpg" alt="">
		</div>
		<div class="blog-info">
			<p class="blog-title">放逐之刃的博客</p>
			<p class="blog-info">曾担任诺克萨斯军队剑士长的锐雯，如今在那片她曾要征服的土地上流浪。她通过自己信念的力量和野蛮的行事风格在军中不断晋升，因此获得了一把传奇的符文之刃和自己的战团作为奖赏——然而在艾欧尼亚的前线上，锐雯对祖国的信仰遭到了考验，并最终粉碎。她切断了与帝国的一切关联，在分崩离析的世界中找寻自己的归宿，即使纷飞的谣言传说着诺克萨斯已经重铸.…</p>
		</div>
		<div class="blog-link">
			<ul>
				<li><a href="#">关于我</a></li>
				<li><a href="#">微博</a></li>
				<li><a href="#">微信公众号</a></li>
			</ul>
		</div>
		<div class="blog-tag">
			<ul>
				<li><a href="#">折翼之舞</a></li>
				<li><a href="#">镇魂怒吼</a></li>
				<li><a href="#">勇往直前</a></li>
				<li><a href="#">放逐之锋</a></li>
			</ul>
		</div>
	</div>
	<div class="main">
		<div class="article">
			<div class="article-head">
				<span class="article-title">中单盖伦</span>
				<span class="article-date">2017-02-06</span>
			</div>
			<div class="article-body">
				<p>一代版本一代神，代代版本玩盖伦。</p>
				<p>文能挂机喷队友，武能越塔送人头；</p>
				<p>进可孤身一挑五，退可坐等二十投；</p>
				<p>前能飞脚救残敌，后能放墙堵队友；</p>
				<p>静则百年不见人，动则千里送超神；</p>
				<p>英勇闪现送一血，卖起队友不回头；</p>
				<p>顺风浪，逆风投；</p>
				<p>问君能有几多愁，恰似五人四坑二十投。</p>
			</div>
			<div class="article-foot">
				<span>#光速QA</span>
				<span>#二十投</span>
			</div>
		</div>
		<div class="article">
			<div class="article-head">
				<span class="article-title">小黑刷新球</span>
				<span class="article-date">2017-02-06</span>
			</div>
			<div class="article-body">
				<p>跳刀躲梅肯，塔下意识粉；</p>
				<p>残血A回复，反补世界树；</p>
				<p>推推吃盲压，疯脸A刃甲；</p>
				<p>TP切假腿，一级冲泉水；</p>
				<p>山岭憋蝴蝶，巨魔买羊刀；</p>
				<p>地精合大炮，宙斯出辉耀。</p>
				<p>黑暗游侠刷新球，深渊领主输出流；</p>
				<p>一个红血五人撵，死在地图同一点；</p>
				<p>羊刀巨魔祭品猴，大炮光法狂战牛；</p>
				<p>手持达贡火枪手，胸怀黯灭撼地牛；</p>
				<p>问君能有几多愁，敌法幻刺坚韧球；</p>
				<p>开局无鸡无眼球，火枪电魂裸鞋流；</p>
				<p>奶妈疯狂把兵补，潮汐留大拿人头；</p>
				<p>屠夫钻野打后期，幽鬼开大送人头；</p>
				<p>复仇之魂脑进水，换进一只撼地牛；</p>
				<p>还有那个骷髅王，不出狂战不露头；</p>
				<p>火枪自称很牛比，被人打成提款机；</p>
				<p>电魂自命很风流，被人日的像猪头；</p>
				<p>幻刺敌法曰莫愁，保我后期救地球；</p>
				<p>龙骨鬼狗未出手，三路老家已没有；</p>
				<p>越塔杀人被塔杀，奶妈无耻抢人头；</p>
				<p>千辛万苦开一场，莫名秒退是七楼。</p>
				<p>君不见，</p>
				<p>家中起火火烧楼，队友都没回城轴；</p>
				<p>孤身独挡三军路，队友遥望喊加油；</p>
				<p>遗产流，速推流，不敌自家内讧流；　</p>
				<p>四人黑，六人黑，路人一进九人黑；</p>
				<p>三路走，三路刷，三路被抓三路挂；</p>
				<p>五人打，五人差，五人团战都没大；</p>
				<p>对面隐形不插眼，真视掉了没人拣；</p>
				<p>一个红血五人撵，死在地图同一点；</p>
				<p>潮汐团战不放大，他说他在抠鼻屎；</p>
				<p>后来团战又不放，他说抠完要擦纸。</p>
				<p>Dota能有几多愁，恰似一人独守，</p>
				<p>两眼相望，三路天兵，四人皆掉，</p>
				<p>对五员猛将，诸葛再世也无谋。</p>
			</div>
			<div class="article-foot">
				<span>#网吧五连坐</span>
				<span>#从来没赢过</span>
			</div>
		</div>
	</div>
</body>
</html>

/*这是博客园首页的样式文件*/

/*通用样式*/
html {
    height: 100%;
}
body {
    margin: 0;
    background-color: #000;
    height: 100%;
    color: white;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

/*左侧样式*/
.sidebar {
    width: 30%;
    height: 100%;
    float: left;
    position: fixed;
    background-color: #101010;
}
.avatar {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 10px solid #ff9900;
    margin: 0 auto;
    overflow: hidden;
}
.avatar>img {
    width: 100%;
}
.blog-info>.blog-title {
    margin: 20px auto;
    text-align: center;
    font-weight: bolder;
    font-size: 24px;
}
.blog-info>.blog-info {
    margin: 10px;
    text-indent: 2em;
}
.blog-link {
    margin: 10px 0px;
}
.blog-tag {
    margin-top: 100px;
    left: 10px;
}
.blog-link ul li, .blog-tag ul li {
    text-align: center;
    margin-top: 20px;
}

.blog-link a:link, .blog-link a:visited, .blog-tag a:link, .blog-tag a:visited {
    color: white;
}
.blog-link a:hover, .blog-link a:active, .blog-tag a:hover, .blog-tag a:active {
    color: #ff9900;
    font-weight: bolder;
}
/*右侧样式*/
.main {
    width: 70%;
    height: 100%;
    float: right;
    font-weight: bolder;

}
.article {
    margin: 30px;
    box-shadow: 5px 5px 5px rgba(255, 153, 0, 0.9);
}
.article-title {
    font-size: 36px;
    border-left: 10px solid #ff9900;
    padding-left: 10px;
}
.article-date {
    float: right;
    margin: 20px 20px;
    font-weight: bolder;
}
.article-body {
    padding-left: 10px;
}
.article-foot {
    padding: 10px;
    border-top: 1px solid #ff9900;
}
.article-foot span {
    padding-right: 20px;
}

在这里插入图片描述

8 知识回顾

8.1 什么是python的垃圾回收机制

垃圾回收机制，是解释器专门用来回收不可用的变量值所占用的内存空间的一种处理方法。
包括引用计数，标记-清除和分代回收。

8.2 单例模式

单例模式是一个软件的设计模式，为了保证一个类，无论调用多少次产生的实例对象都指向同一个内存地址，仅仅只有一个实例(对象)。

五种单例:
模块
装饰器
元类
__new__
类方法: classmethod

# 方式一: @classmethod 通过类方法来实现单例
class Foo(object):
    # 定义了一个类的数据属性,
    # 用于接收对象的实例，判断对象的实例是否只有一个
    _instance = None  # obj1

    def __init__(self, name, age):
        self.name = name
        self.age = age

    @classmethod
    def singleton(cls, *args, **kwargs):
        # 判断类属性_instance是否有值，有代表已经有实例对象
        # 没有则代表没有实例对象，则调用object的__init__获取实例对象
        if not cls._instance:
            # object.__new__(cls): 创造对象
            # 没有参数情况下
            # cls._instance = object.__new__(cls, *args, **kwargs)

            # 有参数的情况下
            cls._instance = cls(*args, **kwargs)  # Foo()

        # 将已经产生的实例对象  直接返回
        return cls._instance


obj1 = Foo.singleton('tank', '123')
obj2 = Foo.singleton('tank', '123')

# 方式二: 元类
class MyMeta(type):

    # 1、先触发元类里面的__init__
    def __init__(self, name, base, attrs):  # self --> Goo
        # *** 造空的对象, 然后赋值给了Goo类中的_instance类属性
        self._instance = object.__new__(self)
        # 将类名、基类、类的名称空间，传给type里面的__init__
        super().__init__(name, base, attrs)
        # type.__init__(self, name, base, attrs)

    # 2、当调用Goo类时，等同于调用了由元类实例化的到的对象
    def __call__(self, *args, **kwargs):
        # 判断调用Goo时是否传参
        if args or kwargs:
            init_args = args
            init_kwargs = kwargs

            # 1)通过判断限制了用于传入的参数必须一致，然后返回同一个对象实例
            if init_args == args and init_kwargs == kwargs:
                return self._instance

            # 2) 若不是同一个实例，则新建一个对象，产生新的内存地址
            obj = object.__new__(self)
            self.__init__(obj, *args, **kwargs)
            return obj

        return self._instance


class Goo(metaclass=MyMeta):  # Goo = MyMeta(Goo)
    # _instance = obj
    def __init__(self, x):
        self.x = x


g1 = Goo('1')
g2 = Goo('1')

# 方式三: __new__实现 通过调用类方法实例化对象时，自动触发的__new__来实现单例
class Aoo(object):
    _instance = None

    def __new__(cls, *args, **kwargs):
        if not cls._instance:
            cls._instance = object.__new__(cls)

        return cls._instance


a1 = Aoo()
a2 = Aoo()

# 方式四: 装饰器实现 通过调用类方法实例化对象时，自动触发的__new__来实现单例
# 单例装饰器
def singleton_wrapper(cls):  # cls ---> Too
    # 因为装饰器可以给多个类使用，所以这里采用字典
    # 以类作为key, 实例对象作为value值
    _instance = {
        # 伪代码: 'Too': Too的示例对象
    }

    def inner(*args, **kwargs):
        # 若当前装饰的类不在字典中，则实例化新类
        # 判断当前装饰的Too类是否在字典中
        if cls not in _instance:
            # obj = cls(*args, **kwargs)
            # return obj
            # 不在，则给字典添加 key为Too， value为Too()---> 实例对象
            # {Too: Too(*args, **kwargs)}
            _instance[cls] = cls(*args, **kwargs)

        # return 对应的实例对象cls(*args, **kwargs)
        return _instance[cls]

    return inner


@singleton_wrapper  # singleton_wrapper(Too)
class Too(object):
    pass


t1 = Too()
t2 = Too()

# 方式五: 模块导入实现
import cls_singleton

s1 = cls_singleton.instance
s2 = cls_singleton.instance

print(s1 is s2)  # True

8.3 Python中常用模块及主要功能

1. 时间模块
time模块，datetime模块
时间戳 格式化时间 结构化时间
2. random模块 
用于产生随机值。
3. os模块
os模块主要提供与操作系统相关的功能。
4. sys模块
sys模块主要提供与Python解释器相关的功能。
5. shutil模块
对文件，文件夹提供了许多高级操作，包括压缩包等，特别是提供了支持文件复制和删除的函数。
6. json&pickle模块
用于序列化与反序列化操作。
7. configparser模块
用来解析配置文件的模块。
8. hashlib模块
用于哈希算法加密操作。
9. subprocess模块
subprocess模块允许你启动一个新的进程，连接输入/输出/错误的管道， 获得子进程的返回码。
10. 日志模块
用于记录日志。
11. re模块
操作正则表达式，可以用来检查检查一个字符串是否与某种模式匹配。