【标签的分类一】
1.head内常用标签
1 <head> 2 <meta charset="UTF-8"> 3 <!-- 网页标题--> 4 <title>亚洲最大的赌场</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <!-- 网页样式--> 7 <style> 8 h1 { 9 color: blue; 10 } 11 </style> 12 <!-- 内部用来书写js代码--> 13 <script>alert(123)</script> 14 <!-- 外部引入js代码--> 15 <script src="myjs.js"></script> 16 <!-- 引入外部css文件--> 17 <link rel="stylesheet" href="mycss.css"> 18 <!-- 自动跳转，告诉浏览器你要干什么--> 19 <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> 20 <!-- 当用浏览器搜索的时候，只要输入了keyword后面指定的关键字，那么该网页都有可能呗百度搜索出来展示给用户--> 21 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> 22 <!-- 网页描述--> 23 <meta name="description" content="老男孩教育python学院"> 24 25 </head>
2.body内常用标签
1 <h1>HELLO WORLD</h1> 2 <!--1.基本标签--> 3 <!--标题标签,总共有6个级别，h1最大，h6最小--> 4 <h1>欢迎来到我的网站</h1> 5 <h2>欢迎来到我的网站</h2> 6 <h3>欢迎来到我的网站</h3> 7 <h4>欢迎来到我的网站</h4> 8 <h5>欢迎来到我的网站</h5> 9 <h6>欢迎来到我的网站</h6> 10 我是普通文本 11 12 <b>加粗标签</b> 13 <i>斜体标签</i> 14 <u>下划线标签</u> 15 <s>删除线标签</s> 16 <p>段落标签： 大梦谁先觉，平生吾自知</p> 17 <!--br换行--> 18 <br> 19 <!--水平分割线--> 20 <hr>
2.2 标签的分类二
特点：
1.块级标签：独占一行，可以设置宽高，h1-h6 p2.
2.行内标签：不会独占一行，不可以设置宽高 i u s b
3.行内块级标签：不会独占一行，可以设置宽高
4.块级标签内可以嵌套任意的块级标签和行内标签,但是p标签虽然是块级标签，但是它只能嵌套行内标签，不能嵌套块级标签
特殊符号
1 <!--空格符--> 2 <p>苍茫的天涯是我的爱，绵绵的 青山脚下花正开!</p> 3 <!--大于号--> 4 2>1 5 <!--小于号--> 6 1<2 7 <!--and符号--> 8 魏晓龙&靳浩 9 <!--人民币符号--> 10 人民币¥800000 11 <!--版权符号--> 12 拷贝©李白 13 <!--注册商标符号--> 14 商标®
div与img标签与span便签与a标签
<div> <div>div1</div> <p>段落1</p> <h1>h1</h1> </div>
------------------------------------
img
<img src="http://www.baidu.com/img/bd_logo1.png" alt="百度logo" title="百度logo" height="200" width="200">
【a标签：链接标签】
1 <a href="http://www.baidu.com">百度默认当前页面跳转</a> 2 <a href="https://www.luffycity.com/" target="_blank">路飞学城，以新的页面打开跳转</a> 3 <a href="https://www.luffycity.com/" target="_self">路飞学城，当前页面跳转</a> 4 <br> 5 <!--a标签的锚点功能，点击一个文本标题，页面自动跳转到标题对应的内容区域--> 6 <a href="" id="d1">顶部</a> 7 <div style="height:800px;background-color: red"></div> 8 <a href="" id="d2">中间</a> 9 <div style="height:800px;background-color: greenyellow"></div> 10 <a href="" id="#d1">回到顶部</a> 11 <a href="" id="#d2">回到中间</a>
2.3列表标签
1 <h2>无序列表:虽然ul标签很丑，但是在页面布局的时候，只要是排版一致的几行数据基本上用的都是ul标签</h2> 2 <ul type="circle"> 3 <li>第一项</li> 4 <li>第二项</li> 5 <li>第二项</li> 6 <li>第二项</li> 7 </ul> 8 <br> 9 <h3>无序列表2</h3> 10 <ul type="circle"> type="circle"/none/square 11 <li>列表项1</li> 12 <li>列表项2</li> 13 </ul> 14 -------------------------------------------------------------------------------- 15 <h2>有序列表</h2> 16 <ol> 17 <li>1</li> 18 <li>2</li> 19 <li>3</li> 20 </ol> 21 <h3>有序列表2</h3> 22 <ol type="A" start="5"> 23 <li>1</li> 24 <li>2</li> 25 <li>3</li> 26 </ol> 27 ----------------------------------------------------------------------------------- 28 <h2>标题列表</h2> 29 <dl> 30 <dt>标题1</dt> 31 <dd>列表项1</dd> 32 <dt>标题2</dt> 33 <dd>列表项2</dd> 34 </dl>
补充：
1 标签上的两个重要属性: 2 <div id="" class=""> 3 <p>id属性：相当于你在整个页面上的唯一标识</p> 4 <p>class属性：可以放很多个样式或者是装饰</p> 5 </div>
。
。
【表格标签】
1 <table> 2 <thead>表头：字段信息 3 <tr>一个tr就是一行</tr> 4 <th>加粗样式</th> 5 <td>正常文本</td> 6 </thead> 7 8 <tbody>表单：数据信息</tbody> 9 10 </table> 11 12 一些字段意思 13 <table border="1" cellpadding="5" cellspacing="5">表格边框和内间距和外边框的间距 14 <td rowspan="2">李四</td>水平方向占多行 15 <td colspan="2">李四</td>垂直方向占多行 16 17 18 ------------------------------------------------------- 19 代码演示 20 21 <!DOCTYPE html> 22 <html lang="en"> 23 <head> 24 <meta charset="UTF-8"> 25 <title>Title</title> 26 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 27 </head> 28 <body> 29 <table border="1" cellpadding="5" cellspacing="5"> 30 <thead> 31 <tr> 32 <th>姓名</th> 33 <th>密码</th> 34 <th>爱好</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <td>张三</td> 40 <td>123456</td> 41 <td>篮球</td> 42 </tr> 43 <tr> 44 <td rowspan="2">李四</td> 45 <!-- <td>李四</td>--> 46 <td>654321</td> 47 <td>足球</td> 48 </tr> 49 </tbody> 50 </table> 51 </body> 52 </html>
【form表单标签】
表单标签：能够获取前端用户数据（用户输入的，用户选择的，用户上传的）基于网络发送给后端服务器
(注册功能)
<form action=""></form> 在form标签内部书写的获取用户的数据都会被form标签提交到后端 action控制数据提交的后端路径（给哪个服务端提交数据） 1.什么都不写，默认就是朝当前页面所在的url提交数据 2.写一个完整的url，朝指定的url提交数据 3.只写路径后缀action="/index"自动识别出当前服务端的Ip和port拼接到前面： host:port/index/ ------------------------------ label就是给Input框加标识 <label for="d1"> 第一种：直接将input框写在label内内 username:<input type="text" id="d1"> </label> <label for="d2"> 第二种： 通过id链接即可，无需嵌套 password: </label> <input type="text" id="d2"> type=text,这样密码是明文，改为password密码就为密文了
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
Button:就是普通的按，但是我们可以给它自定义各种功能钮，本身没有任何功能
reset:重置内容
radio:单选，如果想要默认选中，添加checked=checked,简写：checked
checkbox:多选框
province:下拉框
file:上传文件
tectarea:文本框（自我介绍）
hidden:隐藏当前input框
select标签：默认是单选
disabled：禁用，不能往后端提交数据
readonly:只读
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值" disabled></label>
PS：能够触发form表单提交数据的按钮有：
1.<input type="submit" value="注册">
2.<button> 点我</button>
==========================================================================
验证form表单提交数据
先安装:pip3 install Flask
form表单默认提交数据的方式:是get请求 数据是直接放在url后面的
<form action=" http://127.0.0.1:5000/index/" method="post">
method:指定提交方式
所有的标签都要给value属性，value属性是提交的数据
form表单提交文件需要注意：method=必须是"post"
enctype="multipart/form-data"类似于数据提交的编码格式，
默认是urlencoded 只能够提交普通的文本数据
multipart/form-data:可以提交文件数据
from flask import Flask
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取文件数据
file_obj=request.files.get('myfile')
print(file_obj.name)
file_obj.save(file_obj.name)
return 'ok'
app.run()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 7 8 </head> 9 <body> 10 <h1>注册页面</h1> 11 <form action="http://127.0.0.1:500/index/" method="post"> 12 <p><label for="d1"> 13 username:<input type="text" id="d1"> 14 </label></p> 15 <p><label for="d2"> 16 password: <input type="password" id="d2"> 17 </label></p> 18 <p> 19 birthday：<input type="date"> 20 </p> 21 <!-- 提交按钮开始--> 22 <input type="submit" value="注册"> 23 <input type="button" value="按钮"> 24 <input type="reset" value="重置"/> 25 <button>点我，绑定事件</button> 26 <!-- 提交按钮结束--> 27 <!--选择按钮开始--> 28 <p> 29 <!-- 所有获取用户输入的标签，都应该有name属性--> 30 <!-- name就类似于字典的key,用户的数据就类似于字典的value--> 31 gender: 32 <input type="radio" name="gender" checked="checked">男 33 <input type="radio" name="gender">女 34 <input type="radio" name="gender">其他 35 </p> 36 <!--选择按钮结束--> 37 <!-- 多选框开始--> 38 <p>hobby: 39 <!-- checkbox多选框，默认不选中，选中要加checked="checked"--> 40 <input type="checkbox" checked="checked" name="hobby" value="reading">reading 41 <input type="checkbox" name="hobby" value="run">run 42 <input type="checkbox" name="hobby" value="swimming">swimming 43 <input type="checkbox" name="hobby" value="sing">sing 44 </p> 45 <!--多选框结束--> 46 <!-- 下拉框开始--> 47 <p>province: 48 <!-- select下拉框,默认选项：selected=selected--> 49 <select name="province" id=""> 50 <option value="">--请选择--</option> 51 <option value="bj">北京</option> 52 <option value="sh" selected>上海</option> 53 <option value="sz">广州</option> 54 </select> 55 </p> 56 <!-- 下拉框：多选--> 57 <p>前女友： 58 <select name="" multiple="multiple"> 59 <option value="">--请选择--</option> 60 <option value="">高圆圆</option> 61 <option value="" selected>赵又廷</option> 62 <option value="">李小璐</option> 63 </select> 64 </p> 65 <!-- 带标题：北京-昌平/朝阳--> 66 <p>province1: 67 <select name="province1"> 68 <optgroup label="上海"> 69 <option value="">浦东</option> 70 <option value="">静安</option> 71 <option value="">徐汇</option> 72 </optgroup> 73 <optgroup label="北京"> 74 <option value="">朝阳</option> 75 <option value="">昌平</option> 76 <option value="">丰台</option> 77 </optgroup> 78 </select> 79 </p> 80 <!-- 下拉框结束--> 81 <!-- 上传文件类型开始--> 82 <p>文件： 83 <!-- 自动调用电脑中的文件,multiple选择多个文件--> 84 <input type="file" multiple name="myfile"> 85 </p> 86 <!-- 上传文件类型结束--> 87 <!-- 文本框开始--> 88 <p>自我介绍： 89 <!-- cols:列数，rows:行数，maxlength:最大输入长度--> 90 <textarea name="info" cols="30" rows="10" maxlength="20"></textarea> 91 </p> 92 <!-- 文本框结束--> 93 </form> 94 </body> 95 </html>
【文字属性】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 p { 9 /*默认是左对齐*/ 10 text-align: center; 11 text-align: right; 12 text-align: left; 13 text-align: justify; /*!*两端对齐*!*/ 14 text-decoration: overline; /*无下划线*/ 15 text-decoration: underline; /*下划线*/ 16 text-decoration: line-through; /*删除线*/ 17 text-decoration: none; /*专门用来去除a标签自带的下划线*/ 18 font-size: 16px; 19 text-indent: 32px; /*首行缩进*/ 20 } 21 22 </style> 23 </head> 24 <body> 25 <p>我要感谢我的导师，要不是他，我的论文早写完了</p> 26 <!-- <a href="https://www.mzitu.com/">点我</a>--> 27 <p> 28 我要感谢我的导师，要不是他，我的论文早写完了,我要感谢我的导师，要不是他，我的论文早写完了,我要感谢我的导师，要不是他，我的论文早写完了,我要感谢我的导师，要不是他，我的论文早写完了</p> 29 </body> 30 </html>
【字体属性】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 p { 9 /*font-family: 'Arial','微软雅黑 Light';*/ 10 /*第一个不生效，就第二个*/ 11 font-size:24px; 12 font-weight:500; 13 /*继承父亲的粗细值：100-900*/ 14 /*color: #eee;*/ 15 /*颜色编号*/ 16 /*color:rgb(128,23,45)*/ 17 color:rgba(128,23,45,0.5) /*透明度*/ 18 } 19 </style> 20 </head> 21 <body> 22 <p>魏老板抬人</p> 23 </body> 24 </html>
字体取色器
【边框】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 p { 9 background-color: red; 10 border-width: 5px; 11 border-color: green; 12 border-style: solid; 13 } 14 15 div { 16 border-left-width: 5px; 17 border-left-color: blue; 18 border-left-style: dotted; 19 20 /*border-right-width: 5px;*/ 21 /*border-right-color: yellow;*/ 22 /*border-right-style: solid;*/ 23 24 /*border-top-width: 5px;*/ 25 /*border-top-color: black;*/ 26 /*border-top-style: dashed;*/ 27 28 /*border-bottom-width: 5px;*/ 29 /*border-bottom-color: pink;*/ 30 /*border-bottom-style: solid;*/ 31 /*border: 5px solid blue;*/ 32 } 33 34 #d1 { 35 background-color: green; 36 height: 400px; 37 width: 400px; 38 border-radius: 50%; 39 /*变圆形*/ 40 } 41 42 </style> 43 </head> 44 <body> 45 <p>穷人被diss到了，哭泣</p> 46 <div>妈拉个巴子的，你是谁啊</div> 47 <div id="d1"></div> 48 </body> 49 </html>
【盒子模型】
盒子模型：以快递盒子为例
快递盒与快递盒之间的距离（标签与标签之间的距离：margin---外边距）
盒子的厚度（标签的边框 ：border）
盒子里面的物体到盒子的边距（内容到边框的距离 :padding--内边距）
物体的大小（内容 :content）
注意：浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0; /*上下左右全是0*/ 10 /*margin: 10px 20px; 第一个上下，第二个左右*/ 11 /*margin: 10px 20px 30px; 第一个上，第二个左右，第三个下*/ 12 /*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/ 13 } 14 15 #d1 { 16 margin-bottom: 20px; /*标签与底部之间空格20px*/ 17 } 18 19 /*如果设置了两个，取大的那一个，不叠加，所以我设置的这两个的边距为50px*/ 20 #d2 { 21 margin-top: 50px; 22 } 23 24 /*p {*/ 25 /* margin-left: 0;*/ 26 /* margin-right: 0;*/ 27 /* margin-top: 0;*/ 28 /* margin-bottom: 0;*/ 29 /*}*/ 30 31 #dd { 32 margin: 0 auto; /*水平居中*/ 33 } 34 35 p { 36 border: 3px solid red; 37 /*padding-left: 10px;*/ 38 /*padding-right: 20px;*/ 39 /*padding-top: 20px;*/ 40 /*padding-bottom: 50px;*/ 41 /*padding: 10px 20px 30px 40px; !*上 右 下 左*!*/ 42 /*padding: 10px 20px; 上下 左右*/ 43 /*padding: 10px; 上下左右都是10px*/ 44 /* padding: 10px 20px 30px; 上 右 下 左*/ 45 } 46 47 </style> 48 </head> 49 <body> 50 <p style="border: 1px solid red;" id="d1">ppp</p> 51 <p style="border: 1px solid orange;" id="d2">ppp</p> 52 <div style="border: 3px solid yellow;height: 400px;width: 400px"> 53 <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue">ppppp</div> 54 </div> 55 <p>我也是ppp</p> 56 </body> 57 </html>
【display属性】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 #d1 { 9 display: none; /* 隐藏标签不展示到前端页面并且原来的伪装也不在占有了，但还存在于文档上*/ 10 display: inline; /*将标签设置为行内标签*/ 11 } 12 13 #d2 { 14 display: inline; 15 } 16 17 18 #d3 { 19 /*将行内标签变为块级标签*/ 20 display: block; 21 } 22 23 #d4 { 24 display: block; 25 } 26 27 28 /* !*既可以在一行显示，还能设置长款*!*/ 29 #d5{ 30 display: inline-block; 31 } 32 #d6{ 33 display: inline-block; 34 } 35 36 </style> 37 </head> 38 <body> 39 <div id="d1" style="height: 100px;width: 100px;background-color: red">01</div> 40 <div id="d2" style="height: 100px;width: 100px;background-color: blue">02</div> 41 <span id="d3" style="height: 100px;width: 100px;background-color: green">span1</span> 42 <span id="d4" style="height: 100px;width: 100px;background-color: yellow">span2</span> 43 <div id="d5" style="height: 100px;width: 100px;background-color: rebeccapurple">01</div> 44 <div id="d6" style="height: 100px;width: 100px;background-color: burlywood">02</div> 45 <div style="display:none">div1</div> 46 <div>div2</div> 47 <div style="visibility:hidden">单纯的隐藏，但位置还在</div> 48 <div>div4</div> 49 </body> 50 </html>
【浮动】
"浮动"（Float）是一个CSS属性，用于控制元素在页面上的定位。当你给一个元素设置float属性时，它会从正常的文档流中移除，并尽可能地向左或向右移动，直到它的外边缘碰到包含块或另一个浮动框的边框为止。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0; 10 } 11 12 #d1 { 13 height: 200px; 14 width: 200px; 15 background-color: red; 16 /*display: inline-block; 不会用于标签的布局*/ 17 /*如果我想让d2在左边呢？*/ 18 float: right; /* 右浮动 */ 19 } 20 21 #d2 { 22 height: 200px; 23 width: 200px; 24 background-color: blue; 25 /*display: inline-block;*/ 26 float: left; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 50px;height: 50px;background-color: orange"></div> 32 <div id="d1"></div> 33 <div id="d2"></div> 34 </body> 35 </html>
（案例：一个大的容器里面有两个小的布局--一左一右，左边的布局不动，右边的布局是一篇一篇的文章，如博客园首页）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0; 10 } 11 12 #d1 { 13 width: 20%; 14 height: 500px; 15 background-color: #4e4e4e; 16 float: left; 17 } 18 19 #d2 { 20 width: 80%; 21 height: 1000px; 22 background-color: orange; 23 float: right; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="d1"></div> 29 <div id="d2"></div> 30 </body> 31 </html>
【浮动带来的影响】
浮动带来的影响：
父元素的高度会塌陷，影响下面元素的位置
解决浮动带来的影响，推导步骤：
1.自己加一个div设置高度
2.利用clear属性
3.通过的解决浮动带来的影响方法
在写html页面之前，先提前写好处理浮动带来的影响 CSS代码
.clearfix:after{
content:'';
display: block;
clear: both;
}还有如使用伪元素overflow: auto/hidden等
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
带来的问题：
解决：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0; 10 } 11 12 #d1 { 13 border: 3px solid red; 14 } 15 16 #d2 { 17 height: 100px; 18 width: 100px; 19 background-color: orange; 20 float: left; 21 } 22 23 #d3 { 24 height: 100px; 25 width: 100px; 26 background-color: green; 27 float: left; 28 } 29 30 #d4 { 31 heigth: 100px; 32 clear: left; /*该标签的左边（地面和空中）不能有浮动的元素*/ 33 } 34 35 /*解决浮动带来的影响*/ 36 .clearfix:after { 37 content: ''; 38 display: block; 39 clear: both; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="d1" class="clearfix"> 45 <div id="d2"></div> 46 <div id="d3"></div> 47 <div id="d4"></div> 48 </div> 49 </body> 50 </html>
【透明度】
透明度：
opacity:0.5;
既可以修改颜色的透明度，也可以修改字体的透明度。
rgba只能影响颜色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 #d1{ 9 background-color: rgba(0,0,0,0.5); 10 } 11 #d2{ 12 color: blue; 13 opacity: 0.3; 14 } 15 </style> 16 </head> 17 <body> 18 <p id="d1">111</p> 19 <p id="d2">222</p> 20 </body> 21 </html>
【定位】
定位：
静态：所有的标签都默认是静态定位，无法改变位置static
相对定位：relative，相对于自己原来的位置进行移动
绝对定位：absolute，相对于已经定位过的父级标签进行移动，如果没有父级标签，则以body为参照物
如果不知道页面其他标签的位置和参数，只给了一个父标签的参数，让你基于该标签做定位-->
固定定位：fixed，相对于浏览器窗口固定在某个位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0; 10 } 11 12 /*相对定位*/ 13 #d1 { 14 height: 100px; 15 width: 100px; 16 background-color: red; 17 left: 50px; /*从左往右 如果是负数，方向则相反*/ 18 top: 50px; /*从上往下 如果是负数，方向则相反*/ 19 /*position: static;默认是无法修改位置的*/ 20 position: relative; 21 /*相对定位 标签由static变为relative，它的性质就是从原来没有定位的标签变成了已经定位过的标签*/ 22 } 23 24 #d2 { 25 height: 200px; 26 width: 300px; 27 background-color: blue; 28 position: relative; /*已经定位过了*/ 29 } 30 31 #d3 { 32 height: 200px; 33 width: 400px; 34 background-color: orange; 35 position: absolute; 36 left: 300px; 37 top: 100px 38 } 39 40 #d4 { 41 position: fixed;/*写了这个，这个标签就会固定在浏览器窗口的某个位置*/ 42 bottom: 10px; 43 right: 20px; 44 height: 50px; 45 width: 100px; 46 background-color: white; 47 border: 3px solid black; 48 } 49 </style> 50 </head> 51 <body> 52 <div id="d1"></div> 53 <div id="d2">abcvdfh 54 <!-- /*橘色盒子过大，这时候加入文字，蓝色悬浮在上面，这是一个浏览器会优先展示文本内容的现象*/--> 55 <div id="d3"></div> 56 </div> 57 <div style="height: 500px;background-color: bisque"></div> 58 <div style="height: 500px;background-color: orchid"></div> 59 <div style="height: 500px;background-color: green"></div> 60 <div id="d4">回到顶部</div> 61 </body> 62 </html>
【验证浮动和定位是否脱离文档流】
验证浮动和定位是否脱离文档流：原来的位置是否还保留
1.不脱离文档流:相对定位
2.脱离文档流：浮动、绝对定位、固定定位
参考对象;
浮动
相对定位
绝对定位
固定定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <!--相对定位：不脱离文档流--> 10 <div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div> 11 <div style="height: 100px;width: 200px;background-color: yellow"></div> 12 <!--绝对定位:脱离文档流--> 13 <div style="height: 100px;width: 200px;background-color: burlywood;"></div> 14 <div style="height: 100px;width: 200px;background-color: blanchedalmond;position: absolute;left: 500px"></div> 15 <div style="height: 100px;width: 200px;background-color: orchid;"></div> 16 <!--固定定位：脱离文档流--> 17 <div style="height: 100px;width: 200px;background-color: red;"></div> 18 <div style="height: 100px;width: 200px;background-color: blanchedalmond;position: fixed;left: 500px"></div> 19 <div style="height: 100px;width: 200px;background-color: orchid;"></div> 20 </body> 21 </html>
【Z-index之模态框案例】
eg:百度登录页面 其实是三层结构
1.最底部是正常的内容z=0 最远的
2.中间是黑色的透明区域z=99 次之
3.白色的注册区域z=100 最靠近用户
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 margin: 0 10 } 11 12 .cover { 13 position: fixed; 14 left: 0; 15 top: 0; 16 right: 0; 17 bottom: 0; 18 background: rgba(0, 0, 0, 0.5); 19 z-index: 99; 20 } 21 22 .modal { 23 background-color: white; 24 height: 200px; 25 width: 400px; 26 position: fixed; 27 left: 50%; 28 top: 50%; 29 z-index: 100; 30 margin-left: -200px; 31 margin-top: -100px; 32 } 33 </style> 34 </head> 35 <body> 36 <div>这是最底层的页面内容</div> 37 <div class="cover"></div> 38 <div class="modal"> 39 <h1>登录页面</h1> 40 <p>username: 41 <input type="text"> 42 </p> 43 <p>password: 44 <input type="password"> 45 </p> 46 <button>登录</button> 47 </div> 48 </body> 49 </html>
【溢出属性】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 p { 9 height: 100px; 10 width: 100px; 11 border: 3px solid red; 12 /*解决溢出*/ 13 overflow: visible; /*默认就是可见，溢出还是展示*/ 14 overflow: hidden; /*文字溢出隐藏*/ 15 overflow: scroll; 16 overflow: auto; /*文字溢出自动添加滚动条*/ 17 } 18 19 </style> 20 </head> 21 <body> 22 <p>我还在起点，马上换二档，准备上坡，然后下坡，快到终点啦,再等等我，过了我就可以拿驾照啦,哎呀，终于拿到驾照啦</p> 23 </body> 24 </html>
（溢出案例）
