* 解决浮动带来的影响
* 溢出属性
* 定位
* 验证浮动和定位是否脱离文档流
* z-index模态框
* 透明度opacity
* JavaScript编程语言开头
### 解决浮动带来的影响
```python
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
```
### 溢出属性
```css
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/ !*设置成上下滚动条、左右滚动条的形式*!*/
}
```
### 定位
* 静态
所有的标签默认都是静态的static，无法改变位置
* 相对定位(了解)
相对于标签原来的位置做移动relative
* 绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
* 固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
```python
<!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;
}
#d1 {
height: 100px;
width: 100px;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 200px;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div id="d1"></div>-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<div style="height: 500px;</div>
<div style="height: 500px;</div>
<div style="height: 500px;</div>
<div id="d4">回到顶部</div>
</body>
</html>
```
**ps:**浏览器是优先展示文本内容的
### 验证浮动和定位是否脱离文档流(原来的位置是否还保留)
```python
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
<!--<div style="height: 100px;width: 200px;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;</div>-->
<!--<div style="height: 100px;width: 200px;"></div>-->
<!--<div style="height: 100px;width: 200px;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;"></div>-->
<div style="height: 100px;width: 200px;"></div>
<div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;"></div>
```
### z-index模态框
```python
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的 z 坐标
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(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;
z-index: 99;
}
.modal {
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
```
### 透明度opacity
```python
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
```
### 书写
```python
"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""
```
### Js简介
```python
1.js也是一门编程语言 它也是可以写后端代码的
用js一统天下 前后端都可以写
nodejs 支持js代码跑在后端服务器上
然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度
ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
JS版本
主要还是用的5.1和6.0
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习
# js的注释
"""
// 单行注释
/*
多行注释1
多行注释2
多行注释3
*/
"""
# 两种引入方式
1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码
# js语法结构
js是以分号作为语句的结束
但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符
```
### js学习流程
* 变量
* 数据类型
* 流程控制
* 函数
* 对象
* 内置方法/模块
### 变量
```python
"""
在js中 首次定义一个变量名的时候需要用关键字声明
1.关键字var
var name='jason'
2.es6推出的新语法
let name='jason'
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
print(n)
print(n)
# var 5 let 10
"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""
```
### 常量
```python
# python中没有真正意义上的常量 默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14
```
