day53——浮动影响的解决办法、定位、溢出属性、z-index
今日内容
- 解决浮动带来的影响
- 溢出属性
- 定位
- 验证浮动和定位是否脱离文档流
- z-index模态框
- 透明度opacity
- 简单博客园首页的搭建
- JavaScript编程语言初始
一、解决浮动带来的影响
-
浮动带来的影响
会造成父标签塌陷的问题
-
初步解决办法
直接在父标签内加一个div标签，给该div加一个高度，高度大于等于子标签最高的高度，这样将父标签撑起来。
-
设置clear属性解决
#dd { clear:left #该标签左边（空中或者地面不能有浮动的元素） } -
通用解决办法（推荐）
在写html页面前，先写好处理浮动带来的影响的 css代码，写一个命为clearfix的选择器，哪个标签出现了塌陷问题就给其加上clearfix属性。
.clearfix {
display:bloack;
content:"";
clear:both;
}
<div class='clearfix'...> #标签出现塌陷问题直接加属性即可
二、溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
height: 100px;
50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
</style>
</head>
<body>
<p>
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
大家好我叫喳喳辉，是兄弟就来啃我！
</p>
</body>
</html>
总结：当标签内的内容超过标签的大小的时候，设置overflow属性，可将超出的部分隐藏，或者做出滚动条。
溢出应用
做一个圆形的图片头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
background-color: #2b2b2b
}
div {
100px;
height:100px;
border:red 4px solid;
border-radius: 50%;
overflow:hidden; /*图片超出部分隐藏*/
margin:0 auto; /*图片居中*/
}
div>img{
100%; /*占标签100%比例*/
}
</style>
</head>
<body>
<div>
<img src="111.jpg" alt="">
</div>
</body>
</html>
定位
-
静态
所有的标签默认情况下都是静止(static)的，不能改变位置
-
相对定位
相对与标签原来的位置移动relative
-
绝对定位
相对于已经定位的父标签做移动，没有父标签就以body标签做参考
eg:小米网站购物车
-
固定定位
相对与浏览器页面固定在某个位置
eg:右侧小广告
<!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;
100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div ></div>-->
<!--<div >-->
<!-- <div ></div>-->
<!--</div>-->
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div >回到顶部</div>
</body>
</html>
ps：浏览器优先展示的是文本内容
四、验证浮动和定位是否脱离文档流
（原来的位置是否还保留）
-
不脱离文档流
1）相对定位
<body> <!--<div style="height: 100px; 200px;background-color: red;"></div>--> <div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div> <div style="height: 100px; 200px;background-color: greenyellow"></div> </body>相对移动后标签原来的位置还在。
-
脱离文档流
便签原来的位置不再了，位置被其他标签占据。
-
浮动
<!--<div style="height: 100px; 200px;background-color: red;"></div>--> <div style="height: 100px; 200px;background-color: red;float:right"></div> <div style="height: 100px; 200px;background-color: greenyellow"></div> -
绝对定位
<div style="height: 100px; 200px;background-color: red;"></div> <!--<div style="height: 100px; 200px;background-color: greenyellow"></div>--> <div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div> <!--当没有父标签做到位 就参照与body--> <div style="height: 100px; 200px;background-color: blue;"></div> -
固定定位
<div style="height: 100px; 200px;background-color: red;"></div> <!--<div style="height: 100px; 200px;background-color: greenyellow;"></div>--> <div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div> <div style="height: 100px; 200px;background-color: blue;"></div>
-
五、z-index模态框
浏览器页面的坐标轴其实是一个立体的坐标轴，其中轴指向的是用户，z轴值越大意味着离用户越近。
eg：百度的登录页面，其实是三层的结构
- 最底部的是正常的内容（z=0） 离用户最远
- 第二层黑色透明区（z=99) 中间层
- 白色的注册窗口(z=100) 离用户最近
登录界面简单版代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0
}
.cover {
position:fixed;
left:0;
right: 0;
top:0;
bottom:0;
background-color: rgba(217,217,217,0.5);
z-index:99;
}
#d1 {
flood-color: #4e4e4e;
}
#d2 {
background-color: yellow;
400px;
height:400px;
z-index: 100;
position:fixed;
top:50%;
left: 50%;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
</body>
<div >这是底部的页面</div>
<div class="cover"></div>
<div >
<h1>登录界面
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我</button>
</h1>
</div>
</html>
六、透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-color: rgba(0,0,0,0.5);
}
#d2 {
background-color: red;
opacity:0.5;
color:blue;
}
</style>
</head>
<body>
<p >111</p>
<p >22asdasdasd2</p>
</body>
</html>
七、简易博客园首页搭建
八、初识JS
ps：JS的全称是JavaScript，我们可能想JS和Java可能是有关系的，难道是又Java洐生而来的？其实JS和Java一点关系都没有，只是为了蹭当时Java的热点，这个热度明显是蹭的很成功的。
JS简介
- JS也是一门语言，它也是可以写后端代码的需要用到node.js，它支持js代码在后端服务器上运行。
- ECMAScript和JavaScript的关系：因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
- 主要用5.1和6.0版本
- 跟python一样是脚本语言
- 是一种轻量级编程语言
- 是可插入HTML页面的编程语言
- 学习难度相对较小
JS的注释
// 单行注释
/*
多行注释
多行注释
多行注释
*/
# 多行注释和css的多行注释相同
JS的两种引入方式
- script便签内部直接书写JS代码
- script便签src属性引入外部JS代码
JS的语法的结束符
JS以分号作为语句的结束符，和SQL语句的结束符相同，如果不写分号结束符，也能正常工作，但是它就相当于没有结束符。
变量
"""
在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中没有常量的概念，全大写表示常量只是程序员约定俗成的一种表示常量的方法，而在JS中有真正的常量，定义一个常量之后修改值会报错。
const pi = 3.14