day53 html收尾

一、解决浮动带来的影响
二、溢出属性
三、定位
四、验证浮动和定位是否脱离文档流
五、z-index模态框
六、透明度opacity
七、js简介

一、解决浮动带来的影响

块级标签内的浮动如果该块级标签本身没有大小，浮动造成的结果就是父标签塌陷

Q：什么是父标签塌陷？

A：块级标签本身只有width（页面宽度），默认height为0，块级标签的高度是根据标签内的标签的大小决定的，如下图

外层边框表示一个div，这个标签本身没有高度，它的高度是被它所包含的标签撑起来的。这个时候我们把里面两个标签设置浮动，如下图

两个方块由于设置了浮动，它们本身已经不占div的空间了，只是显示在这上面，div内部没有支撑，所以塌陷了。

解决这个问题有三个方法：

方式一、父标签设定高度

给父标签设置一个能容纳浮在上面标签的大小的高度即可

方式二、利用clear属性

在父标签内部最后加一个div，只给他设置一个属性clear：left

这个属性表示，这个标签的左边不能有任何浮动元素，它会把父标签扩展到能容纳浮动标签的大小。

方式三、提前写好解决的css代码（最好的方式）

.clearfix:after{  # 标签：after表示在这个标签后面加

	content:''; # 加的内容

	display:block; # 把这个标签设置成块级标签（块级才有宽度）

	clear:both;  #左右两边都不能有浮动元素

}

# 给父标签继承这个类即可

二、溢出属性

当文字内容超过我们标签大小时，会造成溢出效果，如下图

解决方法有两种

方案一、隐藏溢出部分

设置标签的overflow：hidden

方案二、设置成滚动条形式

设置标签的overflow：scroll/auto

三、定位

静态
- 所有的标签默认都是静态的（static），无法改变位置
相对定位（了解）
- 相对于标签原来的位置做移动（relative）
绝对定位（常用）
- 相对于已经定位过的父标签做参照移动，如果没有父标签默认参照body（absolute）
固定定位（常用）
- 相对于浏览器窗口固定在某个位置（fixed）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    #d1{

        height: 100px;

        width: 100px;

        background-color: red;

        position:relative;

        top: 50px;

        left: 50px;

    }

    #outer{

        border: 1px black solid;

        height: 50px;

        width: 50px;

        position: relative;

    }

    #d2{

        height: 100px;

        width: 100px;

        background-color: lightcoral;

        position:absolute;

        top: 50px;

        left: 50px;

    }

    #d4{

        position: fixed;

        width: 50px;

        height: 50px;

        border: 1px blue solid;

        bottom: 10px;

        right: 10px;

    }

</style>

<body>

<!--<div id="d1">相对定位</div>-->

<div id="outer">

    <div id="d2">绝对定位</div>

</div>

<div style="height: 1000px;background-color: lightcoral"></div>

<div></div>

<div id="d4">go!</div>

</body>

</html>

四、验证浮动和定位是否脱离文档流

判断是否脱离文档流就看原来的空间能不能被其他标签占用

脱离
- 浮动、绝对定位、固定定位
不脱离
- 相对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #d1{

            height: 50px;

            width: 50px;

            float: left;

            background-color: blue;

        }

        #d2{

            height: 50px;

            width: 59px;

            /*float: left;*/

            background-color: black;

        }

        #d3{

            height: 50px;

            width: 50px;

            background-color: blue;

            position: fixed;

            /*position: absolute;*/

            /*position: fixed;*/

            top: 50px;

            left: 50px;

        }

        #d4{

            height: 50px;

            width: 50px;

            background-color: black;

        }

    </style>

</head>

<body>

<!--<div id="d1"></div>-->

<!--<div id="d2"></div>-->

<div id="d3"></div>

<div id="d4"></div>

</body>

</html>

五、z-index模态框

就是根据不同的z-index值表示所处的层级，越高越优先，默认为0

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #cover {

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: rgba(0,0,0,0.5);

            z-index: 99;

        }

        #login{

            position: fixed;

            left: 390px;

            top:180px;

            z-index: 100;

            border: 1px solid palegoldenrod;

            background-color: #ffffee;

            width: 200px;

            height: 150px;

        }

    </style>

</head>

<body>

<div style="background-color: red">

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

    <p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>

</div>

<div id="cover"></div>

<div id="login">

    <p>

        姓名：<input type="text">

    </p>

    密码：<input type="text">

</div>

</body>

</html>

六、透明度opacity

可以修改颜色的透明度也可以修改字体的透明度，取值范围0~100%

注意在标签中使用透明的是整个标签

七、js简介

js是一款可以编写后端和前端的编程语言

ECMAScript和JavaScript的关系：前者是后者的规格，后者是前者的一种实现。

JS版本：主要还是用的5.1和6.0

js的特点

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

js的注释

// 单行注释

/*

多行注释

多行注释

多行注释

*/

js学习流程

变量
数据类型
流程控制
函数
对象
内置方法/模块

变量

/* js中 首次定义一个变量名的时候需要关键字声明

	1 var

		var name='hz'

	2 let(js6推出的新语法)

		let name='hz'

		js6才能使用，之前不行

*/

// var与let的区别

n = 10

for n in range(5):

  print(n)

print(n)

// var 5		let 10

//var在for循环里定义会影响全局，let只在局部生效

常量

// js中用const关键字定义常量

const pi = 3.14