一、解决浮动带来的影响
块级标签内的浮动如果该块级标签本身没有大小，浮动造成的结果就是父标签塌陷
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;
100px;
background-color: red;
position:relative;
top: 50px;
left: 50px;
}
#outer{
border: 1px black solid;
height: 50px;
50px;
position: relative;
}
#d2{
height: 100px;
100px;
background-color: lightcoral;
position:absolute;
top: 50px;
left: 50px;
}
#d4{
position: fixed;
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;
50px;
float: left;
background-color: blue;
}
#d2{
height: 50px;
59px;
/*float: left;*/
background-color: black;
}
#d3{
height: 50px;
50px;
background-color: blue;
position: fixed;
/*position: absolute;*/
/*position: fixed;*/
top: 50px;
left: 50px;
}
#d4{
height: 50px;
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;
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