浮动的本质
浮动的初心是为了解决图片与文本并排显示的问题
#总结
1.浮动只限于水平方向
2.浮动元素脱离了文档流，后面的元素会上移填充它原来的控件
3.浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素的排列，
4.任何元素 包括行内元素 浮动后 ，都具备了块级元素的特征
父元素计算高度的时候，会忽略内部的浮动元素（父级高度的塌陷）
浮动演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动的本质</title>
<style>
*{
margin: 0;
border: 0;
box-sizing: border-box;
}
.box{
padding: 1em;
border:1px solid #000
}
.box img {
width: 15em;
border-radius: 0.5em;
/* 图片向左浮动 后面的文本会围绕着它水平排列 */
float:left;
margin-right: 1em;
}
.box .decs a{
width: 10em;
height: 2em;
background-color:lightgreen;
float: left;
}
/* 总结:
1.浮动只限于水平方向
2.浮动元素脱离了文档流，后面的元素会上移填充它原来的控件
3.浮动元素不会影响到它前面的元素的布局，只会影响到后面的元素的排列，
4.任何元素 包括行内元素 浮动后 ，都具备了块级元素的特征 */
/* 父元素计算高度的时候，会忽略内部的浮动元素（父级高度的塌陷） */
</style>
</head>
<body>
<h1>浮动的本质</h1>
<div class="box">
<!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
<img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
<div class="decs">
<h2>第十三期_综合实战</h2>
<p>五大综合实战项目，巩固一二阶段学习成果，达到前端和PHP核心知识点的灵活运用，实训完成自己的项目，并指导上线
公益直播时间：2020.11.25 晚19:30-21:30，交流QQ群：916808767，并有神秘抽奖活动，敬请期待！本次公益直播课程，使用uniapp框架实现微信app的tabbar的编写，实现用户下拉刷新，上拉加载~
</p>
<a href="">了解详情</a>
</div>
</div>
</body>
</html>
清除浮动元素的影响
/* ---------------------------- */
/* 用附加元素来实现 */
.clear {
clear: left;
}
/* 伪元素 */
.box:after{
content: "";
display: block;
clear: both;
}
/* -------------------- */
/* 我们希望左右两边是完全独立的元素，右边的元素不受左边浮动元素的影响 */
more
创建BFC :创建一个独立的布局单元
创建BFC的方式:任何一个元素添加上一下任何一个属性后就是一个BFC容器
1.float: left /right 不能是none
2.overflow: hidden / auto / scroll ,不能是visible
3.display：inline-block 、table-cell
4.display : flex / inline-flex
5.display: grid / inline-grid
6.position: absolute /fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC:创建一个独立的布局单元</title>
<style>
* {
margin: 0;
border: 0;
box-sizing: border-box;
}
.box {
padding: 1em;
border: 1px solid #000
}
.box img {
width: 15em;
border-radius: 0.5em;
/* 图片向左浮动 后面的文本会围绕着它水平排列 */
float: left;
margin-right: 1em;
}
.box .decs a {
width: 10em;
height: 2em;
background-color: lightgreen;
/* float: right; */
float: left;
}
/* ---------------------------- */
/* 解决高度塌陷问题 */
/* 伪元素 */
.box:after{
content: "";
display: block;
clear: both;
}
/* -------------------- */
/* 我们希望左右两边是完全独立的元素，右边的元素不受左边浮动元素的影响 */
.box .decs{
overflow: hidden;
}
/* 创建BFC的方式:任何一个元素添加上一下任何一个属性后就是一个BFC容器
1.float: left /right 不能是none
2.overflow: hidden / auto / scroll ,不能是visible
3.display：inline-block 、table-cell
4.display : flex / inline-flex
5.display: grid / inline-grid
6.position: absolute /fixed */
/* ----------------------- */
/* 能不能用 overflow: 解决父元素的高度塌陷问题？不用伪元素 */
</style>
</head>
<body>
<h1>浮动的本质</h1>
<div class="box">
<!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
<img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
<div class="decs">
<h2>第十三期_综合实战</h2>
<p>五大综合实战项目，巩固一二阶段学习成果，达到前端和PHP核心知识点的灵活运用，实训完成自己的项目，并指导上线
公益直播时间：2020.11.25
晚19:30-21:30，交流QQ群：916808767，并有神秘抽奖活动，敬请期待！本次公益直播课程，使用uniapp框架实现微信app的tabbar的编写，实现用户下拉刷新，上拉加载~
</p>
<a href="">了解详情</a>
</div>
</div>
</body>
</html>
BFC:解决父元素的高度塌陷问题
在父元素上使用 overflow:hidden 转为BFC，使它的布局不受到内部浮动元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC:解决父元素的高度塌陷问题</title>
<style>
* {
margin: 0;
border: 0;
box-sizing: border-box;
}
.box {
padding: 1em;
border: 1px solid #000
}
.box img {
width: 15em;
border-radius: 0.5em;
/* 图片向左浮动 后面的文本会围绕着它水平排列 */
float: left;
margin-right: 1em;
}
.box .decs a {
width: 10em;
height: 2em;
background-color: lightgreen;
/* float: right; */
float: left;
}
/* ---------------------------- */
/* 解决高度塌陷问题 */
/* 伪元素 */
/* .box:after {
content: "";
display: block;
clear: both;
} */
/* -------------------- */
/* 我们希望左右两边是完全独立的元素，右边的元素不受左边浮动元素的影响 */
.box, .box .decs {
overflow: hidden;
}
/* 在父元素上使用 overflow:hidden 转为BFC，使它的布局不受到内部浮动元素的影响 */
/* .box{
overflow: hidden;
} */
/* 浮动的本质是为了解决图文并排显示的问题。 */
/* 浮动要解决的两个问题： */
/* 1.浮动元素的高度对于他的包含块不可见 */
/* 2.浮动元素可以BFC块使他不影响到后面元素的布局 */
/* 在flex 和grid布局中无效 */
</style>
</head>
<body>
<h1>浮动的本质</h1>
<div class="box">
<!-- 浮动的初心是为了解决图片与文本并排显示的问题 -->
<img src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png" alt="">
<div class="decs">
<h2>第十三期_综合实战</h2>
<p>五大综合实战项目，巩固一二阶段学习成果，达到前端和PHP核心知识点的灵活运用，实训完成自己的项目，并指导上线
公益直播时间：2020.11.25
晚19:30-21:30，交流QQ群：916808767，并有神秘抽奖活动，敬请期待！本次公益直播课程，使用uniapp框架实现微信app的tabbar的编写，实现用户下拉刷新，上拉加载~
</p>
<a href="">了解详情</a>
</div>
</div>
</body>
</html>
定位的种类
定位属性:position
定位类型： 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed
1.静态定位 position:static 默认 也就是文档流显示，元素的显示位置与源码顺序一致
2.相对定位 position:relative 相对于该元素在文档流中的原始位置进行偏移
3.绝对定位 position: absolute; 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移’
如果祖先元素中不存在定位元素，他就相对于根元素（html）进行定位
定位元素:只要这个元素中有 position: 或者 position：absoulte;被称为定位元素
position:static 不是定位元素;
而且只有定位元素才有资格虫儿当绝对定位元素的定位祖先元素 （定位参考元素 父级元素）
4.固定定位 position:fixed 是绝对定位的一个特例 他始终相对于html定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位的种类</title>
<style>
/* 定位属性:position */
/* 定位类型： 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed */
/* 1.静态定位 position:static 默认 也就是文档流显示，元素的显示位置与源码顺序一致 */
/* 2.相对定位 position:relative 相对于该元素在文档流中的原始位置进行偏移 */
/* 3.绝对定位 position: absolute; 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移’ */
/* 如果祖先元素中不存在定位元素，他就相对于根元素（html）进行定位 */
/* 定位元素:只要这个元素中有 position: 或者 position：absoulte;被称为定位元素 */
/* position:static 不是定位元素; */
/* 而且只有定位元素才有资格虫儿当绝对定位元素的定位祖先元素 （定位参考元素 父级元素）*/
/* 4.固定定位 position:fixed 是绝对定位的一个特例 他始终相对于html定位*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 15em;
height: 15em;
border: 1px red solid;
margin: 2em auto;
}
.box h2 {
border: 1px green solid;
background-color: lightgreen;
/* 透明度 */
/* opacity: 0.6; */
/* 相对定位 */
/* 相对之前的位置进行偏移 */
position: relative;
top: 1em;
left: 1em;
}
/* 将h2改为绝对定位 */
.box h2 {
/* 绝对定位元素 会脱离文档流 */
position: absolute;
}
.box{
/* 转为定位元素 它的内部元素就相对于它进行绝对定位 */
position: relative;
}
.box h2{
top:0;
left: 0;
right: 0;
bottom: 0;
/* 如果被定位的元素的四个方向全部紧贴定位 父级的四个边沿，则会充满全部的定位 空间 */
width: 8em;
height: 9em;
/* 使用 绝对定位的完全定位控件来快速实现水平和垂直居中 */
margin: auto;
}
html{
min-height: 100em;
}
.box h2{
position: fixed;
}
</style>
</head>
<body>
<div class="box">
<h2>城南花开</h2>
<p>欢迎来到城南花开的个人博客，最真实的内容。最新的内容</p>
</div>
</body>
</html>
作业
作业标题：1221作用
作业内容：1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例，实现一个模态框
演示地址:https://php.gzj2001.com/1221/
作业代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1221作业</title>
<style>
.relative {
/* 设置相对定位 */
position: relative;
/* 进行偏移 */
top: 5em;
left: 5em;
}
.old {
/* 设置old为相对定位，便于absolute找到 */
position: relative;
}
.absolute {
/* 设置为绝对定位 */
position: absolute;
/* 距离他祖先的位置偏移 */
top: 5em;
}
html {
/* 为了展示固定定位的效果，将html拉长 */
min-height: 100em;
}
.footer {
font-size: 5em;
width: 100vw;
background-color: #666;
/* 设置为固定定位 */
position: fixed;
bottom: 0;
}
/* -------------------- */
/* 模态框演示 */
/* 蒙版全屏覆盖 */
.login {
/* display: none; */
background-color: rgb(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 主体利用相对定位到中间 */
.login .login-main {
padding: 1em;
min-height: 20em;
border: 1px solid red;
position: fixed;
top: 5em;
left: 30em;
background-color: green;
}
</style>
</head>
<body>
</body>
<h2>静态定位是 默认的，和源码的位置一致 默认场景。默认使用条件 </h2>
<h2 class="relative">相对定位 是相对于自己本身原来的 位置进行偏移 应用场景，css阴影特效偏移？ </h2>
<div class="old">
我是祖先
<h2 class="absolute">绝对定位 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移 应用于页面绝对布局？</h2>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button style="font-size: 10em;" onclick="login()">点我打开蒙版</button>
<div class="login" id="login" style="display: none;">
<div class="login-main">
<form>
username<input type="text">
<br> password <input type="text">
<br>
<button>login</button>
</form>
</div>
</div>
<div class="footer">
我是footer 演示了固定定位
</div>
</html>
<script>
function login() {
document.getElementById("login").style.display = "block";
}
</script>
效果展示：
