浮动+定位+溢出+z-index+透明度了解
作者：互联网
浮动
浮动之页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block; !*不推荐使用*!*/
/*float: left;*/
}
#d2 {
width: 100px;
height: 100px;
background-color: greenyellow;
/*display: inline-block; !*不推荐使用*!*/
/*float: right;*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
行内行外一行显示
/*display: inline-block; */ 不推荐使用
左右浮动
float: left;
float: right;
实际应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20%;
height: 1000px;
background-color: red;
float: left;
}
#d2 {
width: 80%;
height: 1000px;
background-color: greenyellow;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
浮动的负面影响
# 浮动带来的负面影响
"""
会造成父标签塌陷!!!
"""
解决浮动的负面影响
1.再写一个div撑场面(不可取)
2.关键词clear(可以使用)
3.通过解决策略(推荐使用):只要父标签塌陷了就使用
关键词clear:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20px;
height: 100px;
background-color: yellow;
display: inline-block;
float: left;
}
#d2 {
width: 20px;
height: 100px;
background-color: green;
display: inline-block;
float: left;
}
#d3 {
border: solid black 5px;
}
#d4 {
clear: left;
border: 1px solid red;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
</div>
</body>
</html>
通过解决策略
.clearfix:after {
content: '';
clear: both;
display: block;
}
<div id="d3" class="clearfix">
<div id="d1"></div>
</div>
# 实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20px;
height: 100px;
background-color: yellow;
display: inline-block;
float: left;
}
#d2 {
width: 20px;
height: 100px;
background-color: green;
display: inline-block;
float: left;
}
#d3 {
border: solid black 5px;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
"""
自定义浮动边距为0,所以d1,d2中间没有空隙
"""
定位
静态定位 static
所有的标签'默认'都是静态定位即不能改变位置
相对定位 relative
相对标签原来的位置做定位
绝对定位 absolute
相对已经定位过的父标签做定位(没有则参考body标签)
固定定位 fixed
相对浏览器窗口做定位
如何使用css完成定位
定位关键字position
位置关键字left,right,top,bottom
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
position: relative; /*修改标签的定位方式*/
top: 100px;
left: 100px;
}
#d2 {
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
top: 100px;
left: 100px;
}
#d3 {
border: 3px solid black;
position: fixed;
right: 50px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">啥也没有</div>
</div>
<div id="d3">回到顶部</div>
</body>
</html>
是否脱离文档流
#标签位置改变之后 原来的位置是否会空出来
如果空出来被其他标签自动占有
浮动、定位
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位
溢出属性
实操
# 需要要导入文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
border: 3px solid black;
border-radius: 50%;
overflow: hidden;
}
#d1 img {
/*max-width: 100%;*/
width: 100%;
}
</style>
</head>
<body>
<div id="d1" >
<img src="1.jpg" alt="">
</div>
z-index属性
# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)
实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#cover {
background-color: rgba(124,124,125,0.5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
#modal {
width: 800px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 1000;
margin-left: -400px;
margin-top: -200px;
}
</style>
</head>
<body>
<div id="content">我是最底层的文本内容</div>
<div id="cover"></div>
<div id="modal">
<h2>注册页面</h2>
<form action="">
<p>username:
<input type="text">
</p>
<p>password:
<input type="text">
</p>
<input type="submit">
</form>
</div>
</body>
</html>
透明度
rgba(124,124,124,0.5)
只影响颜色
opacity:0.5
影响颜色和字体
实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: rgba(124,124,124,0.5);
}
p {
background-color: rgb(124,124,124);
opacity: 0.5;
}
</style>
</head>
<body>
<div>
快要吃饭了 好激动
</div>
<p>
人生的意义和价值在哪里
</p>
</body>
</html>
JavaScript
# JavaScript简称JS 与Java没有关系!
# JS是一门编程语言
# JS是一门编程语言但是逻辑非常的不严谨
# JS很容易...
JavaScript补充
类中引入方式
1.script标签内直接编写(学习时使用)
2.script标签src属性导入外部js文件(最正规)
注释语法
html:<!--注释语法-->
css:/**/
JS://单行 /*多行*/
# 模板注释语法
标签：index,color,透明度,100px,height,width,background,溢出,left 来源： https://www.cnblogs.com/haiqinai/p/15880433.html