一：前端开发简介
一、概述：前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框
架、解决方案，来实现互联网产品的用户界面交互。
二、发展过程：它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站
主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应
用，现代网页更加美观，交互效果显著，功能更加强大。
二：HTML5
一、HTML简介
HTML是超文本标记语言，是网页的核心，是一种制作万维网页面的标准语言
二、HTML基本骨架
<!-- 文档声明，声明当前文档遵循HTML5规范 -->
<!DOCTYPE html>
<!-- 超文本标记语言文件的标记符 -->
<html>
<!-- 定义文档的信息 -->
<head>
<!-- 定义文档编码格式 -->
<meta charset="utf-8">
<!-- 定义文档标题，显示在网页窗口的标题栏中 -->
<title>MyHtml.html</title>
</head>
<!-- 实体标记，网页中显示的内容 -->
<body></body>
</html>
三、HTML常用标签
1. 文档信息标签
<!--
1、文档信息标签
-->
<!DOCTYPE html>
<html>
<head>
<!-- 1. 定义文档标题 -->
<title>文档信息标签</title>
<!-- 2. 定义文档编码格式 -->
<meta charset="utf-8">
<!-- 3. 定义文档描述 -->
<meta name="description" content="文档信息标签学习" />
<!-- 4. 定义文档关键词 -->
<meta name="keywords" content="title标签，meta标签，link标签，style标签，script标签" />
<!-- 5. 声明CSS代码域 -->
<style type="text/css"></style>
<!-- 6. 引入本地CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="../css/百度百科.css">
<!-- 7. 声明js代码域 -->
<script type="text/javascript"></script>
<!-- 8. 引入本地js脚本文件 -->
<script type="text/javascript" scr=""></script>
<!-- 9. 引入网络上的js文件 -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<!-- 10. 为所有链接设置默认地址和打开方式 -->
<base href="https://www.cnblogs.com/mh2013118" />
<base target="_blank" />
</head>
<body></body>
</html>
2. 文本标签
<!-- 文本标签 -->
<!DOCTYPE html>
<html>
<head>
<title>排版标签</title>
<meta charset="utf-8">
<style type="text/css">
#div{
width: 100px;
height: 100px;
background-color: red;
}
#span{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!--
1. 标题标签
1. 作用：搜索引擎通过标题为网页的结构和内容编制索引，h1最重要，应该作为主标题
2. 特点：加黑加粗，独占一行，从1-6字体逐渐减小
-->
<h1>博客园简介 - 代码改变世界 Coding Changes the World</h1>
<!--
2. 段落标签
1. 作用：将文档分段落
2. 特点：自动换行
-->
<p>
博客园创立于2004年1月，是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者
<br />
打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的
<br />
使命是帮助开发者用代码改变世界。
</p>
<p>
Cnblogs.com was founded in 2004. It is a knowledge-sharing community for developers. Our mission is to help
<br />
developers change the world by coding.
</p>
<!--
3. 文本格式化标签
1. 水平线：<hr />
2. 换行：<br />
3. 空格：
4. 字体加粗：<b></b>
5. 字体倾斜：<i></i>
6. 下划线：<u></u>
7. 删除线：<del></del>
-->
<hr />
<p>
<b>Email</b>
：ad@cnblogs.com 或 bd@cnblogs.com
<br />
<b>电话</b>
：0571-88079867（杭州）
<br />
QQ：206423184
<br />
<u>广告位示例</u>
</p>
<!-- 4. 容器标签 -->
<div id="div">我是一个div</div><br />
<span id="span">我是一个span</span>
</body>
</html>
3. 图像和超链接标签
<!-- 图像和超链接标签 -->
<!DOCTYPE html>
<html>
<head>
<title>图像和超链接标签</title>
<meta charset="utf-8">
</head>
<body>
<!--
1. 图像标签
alt：图片加载不成功时的文字提示
title：图片的标题，当鼠标悬停时会显示
scr：图片的资源路径
-->
<img alt="本地资源" src="../images/a.jpg" title="真帅">
<br />
<img alt="网络资源" src="https://img2018.cnblogs.com/blog/1610676/201907/1610676-20190715125809080-934042040.png">
<br />
<!--
2. 超链接标签
href：要跳转的资源路径
name：指定锚点名称
target：指明要跳转的网页资源的显示位置
_selt：在当前页面刷新显示
_blank：在新的页面显示
_top：在顶层页面显示
_parent：在父级页面显示
-->
<a href="https://www.cnblogs.com/mh20131118" target="_blank">网络资源</a>
<br />
<a href="简历.html" target="_blank">本地资源</a>
<br />
<!--
3. 锚点
1. 作用：在一张网页中进行资源跳转
2. 使用
1. 在需要的位置添加锚点
<a name="锚点名"></a>
2. 使用a标签跳转到指定的锚点
<a href="#锚点名">访问方式</a>：
href的值为#时，表示刷新当前页，用来跳转到顶部
-->
<!-- 2. 跳转到指定锚点 -->
<a href="#button">底部</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 1. 设置锚点 -->
<a name="button"></a>
<p>这是一个锚点</p>
</body>
</html>
4. 列表标签
<!-- 列表标签 -->
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<meta charset="utf-8">
</head>
<body>
<!--
1. 无序列表：
type值：
1. desc：小黑圆点，默认
2. cricle：空心圆点
3. square：小黑方块
-->
<h4>中国四大电商</h4>
<ul type="circle">
<li><a href="https://www.taobao.com" target="_blank">淘宝</a></li>
<li><a href="https://www.jd.com" target="_blank">京东</a></li>
<li><a href="https://www.suning.com" target="_blank">苏宁</a></li>
<li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li>
</ul>
<!--
2. 有序列表
type值：A,a,I,i
-->
<h4>中国四大电商</h4>
<ol type="A">
<li><a href="https://www.taobao.com" target="_blank">淘宝</a></li>
<li><a href="https://www.jd.com" target="_blank">京东</a></li>
<li><a href="https://www.suning.com" target="_blank">苏宁</a></li>
<li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li>
</ol>
<!--
3. 自定义列表
<dl>
<dt>数据的标题</dt>
<dd>数据的具体内容</dd>
</dl>
-->
<h4>自定义列表</h4>
<dl>
<dt>淘宝</dt>
<dd>马云</dd>
</dl>
</body>
</html>
5. 表格标签
<!-- 表格标签 -->
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
<meta charset="utf-8">
</head>
<body>
<!--
1. <table>标签：表格的标识
border：边框
width：设置表格的宽度
height：设置表格的宽度
cellpadding：内容到单元格边框的距离
cellspacing：每个单元格之间的距离
2. <tr>标签：表示一行
height：设置此行表格的高度
3. <th>标签：表头单元格，加粗居中显示
width：设置此列表格的宽度
4. <td>标签：普通单元格，居左显示
5. 单元格合并：
1. 首先确保表格是一个规整的
2. 找到要合并单元格的源码位置
3. 合并
1. 列合并：在其中一个单元格中使用colspan="数量"属性，删除另一个要合并单元格
2. 行合并：在其中一个单元格中使用rowspan="数量"属性，删除另一个要合并单元格
6. <caption>标签：表格的标题
-->
<h4>创建一个4行4列的表格</h4>
<table border="1px" cellspacing="0px" cellpadding="10px">
<caption>学生基本信息</caption>
<tr>
<th>学号</th>
<th>班级</th>
<th>姓名</th>
<th>专业</th>
</tr>
<tr>
<td>201901</td>
<td rowspan="3">110191</td>
<td>张三</td>
<td rowspan="3">软件工程</td>
</tr>
<tr>
<td>201902</td>
<td>李四</td>
</tr>
<tr>
<td>201903</td>
<td>王五</td>
</tr>
</table>
</body>
</html>
四、HTML5表单
<!-- 表单 -->
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8" />
</head>
<body>
<!--
1. form表单标签：按照method属性指定的提交方式，将表单域数据提交给action属性指定的地址
<form action="" method=""></form>
action：表单域数据提交的地址
method：表单域数据提交的方式
2. form表单域标签：按照键值对的方式提交表单域数据
1. 输入文本：<input type="text" name="键名" id="" value="值" />
2. 输入密码：<input type="password" name="键名" id="" value="值" />
3. 单选按钮：<input type="radio" name="键名" value="值" checked="checked(默认选择)" />
4. 复选框：<input type="checkbox" name="" value="" checked="checked(默认选择)" />
5. 选择文件：<input type="file" name="" value="" />
6. 输入数字：<input type="number" name="" min="" max="" />
7. 输入日期：<input type="date" name="" min="" />
8. 输入颜色：<input type="color" name="" value="">
9. 输入电子邮件： <input type="email" name="">
10. 搜索字段：<input type="search" name="">
11. 输入URL： <input type="url" name="">
12. 单选下拉框：
<select name="键名">
<option value="">内容</option>
</select>
13. 文本域： <textarea name="键名" rows="行" cols="列"></textarea>
14. 预选列表：list属性必须引用 <datalist> 元素的 id 属性。
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
</datalist>
15. 提交按钮：提交表单域数据
<input type="submit" value="按钮值" />
3. input属性
1. value 默认值
2. readonly 规定输入字段为只读
3. disabled 规定输入字段应该被禁用
4. max 规定输入字段的最大值
5. min 规定输入字段的最小值
6. maxlength 规定输入字段的最大字符数
7. pattern 规定通过其检查输入值的正则表达式
8. required 规定输入字段是必填
9. size 规定输入字段的字符数
10. step 规定输入字段的合法数字间隔
-->
用户名：
<input type="text" name="username" maxlength="10" />
<br />
密码：
<input type="password" name="password" />
<br />
性别：
<input type="radio" name="sex" value="0" checked="checked" />
男
<input type="radio" name="sex" value="1" />
女
<br />
爱好：
<input type="checkbox" name="hobby" />
打篮球
<input type="checkbox" name="hobby" />
看电影
<input type="checkbox" name="hobby" />
蹦迪
<br />
籍贯：
<select name="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广东">广东</option>
<option value="深圳">深圳</option>
</select>
<br />
QQ：
<input type="number" name="qq" required />
<br />
邮箱：
<input type="email" name="email" required />
<br />
出身日期：
<input type="date" name="birthday" required />
<br />
期望工资：
<input list="salary" />
<datalist id="salary">
<option value="5000">
<option value="6000">
<option value="7000">
</datalist>
<br />
个人说明：
<textarea rows="10" cols="10"></textarea>
</body>
</html>
五、HTM5L新增标签
<!DOCTYPE html>
<html>
<head>
<title>HTML5新增标签.html</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="新增标签布局.css">
</head>
<body>
<!--
传统div布局：每个部分都使用div
-->
<!-- 页头 -->
<div class="header">页头</div>
<!-- 导航 -->
<div class="nav">导航</div>
<!-- 主体内容 -->
<div class="main">主要内容
<!-- 文章 -->
<div class="article">文章
<!-- 节 -->
<div class="section">节</div>
</div>
<!-- 边栏 -->
<div class="sidebar"></div>
</div>
<!-- 页脚 -->
<div class="footer">页脚</div>
<!--
新增布局标签：每个标签相当于一个div
header：导航或者页头重要内容的容器
nav：导航
article：页面的主体内容
section：页面的重要内容
aside：表示一个相关链接
footer：版权信息
-->
<!-- 页头 -->
<header>页头</header>
<!-- 导航 -->
<nav>导航</nav>
<!-- 主体内容 -->
<main>主体内容
<article>文章
<section>节</section>
</article>
</main>
<!-- 页脚 -->
<footer>页脚</footer>
<!--
音频标签属性
controls：标准插件
autoplay：是否自动播放，默认 false。
loop：是否循环播放，默认 false。
preload：预先加载的方式
none：表示不预加载
metadata：只加载音频的元数据
auto：表示预加载整个音频
volum：音量，值在 0 - 1 之间
var audio = document.getElementById('audio')
// 播放
audio.play()
// 暂停
audio.pause()
-->
<audio controls="controls">
<source src="../images/YSA - Baby Don't Go.mp3">
</audio>
<!--
视频标签属性
controls：标准插件
currentTime：控制播放时间
width：视频播放器的宽度
height：视频播放器的高度
-->
<video width="200px" height="200px" controls="controls" currentTime="5">
<source src="../images/YSA - Baby Don't Go.mp3">
</video>
</body>
</html>
@charset "UTF-8";
*{
margin-top: 20px;
width: 400px;
height: 100px;
}
/*传统div布局*/
.header,header{
background-color: gray;
}
.nav,nav{
background-color: blue;
}
.main,main{
height: 200px;
background-color: red;
}
.article,article{
height: 150px;
width: 300px;
background-color: aqua;
position: absolute;
letf: 50px;
}
.section,section{
width: 250px;
background-color: orange;
}
.footer,footer{
background-color: fuchsia;
}
三：CSS3
一、CSS3 简介
CSS 指层叠样式表 (Cascading Style Sheets)，在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
二、CSS3 选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="选择器.css">
</head>
<body>
<!--
选择器
1. 标签选择器
1. 语法格式：标签名{样式1;样式2...}
2. 作用：为一类标签设置相同的样式
3. 特点：
1. 所有的标签都可以是选择器
2. 为所有该标签设置样式，而不是一个
2. id选择器
1. 语法格式：#id属性值{样式1;样式2...}
2. 作用：为某个特定的标签设置样式
3. 特点：
1. 只能由字母、数字、下划线组成，且必须由字母开头
2. 严格区分大小写，且不能和标签同名
3. id选择器一般配合js使用
3. 类选择器
1. 语法格式：.class属性值{样式1;样式2...}
2. 作用：多个不同的标签使用同一个样式
3. 特点：
1. 类可以同时被多种标签使用
2. 同一个标签可以使用多个类
3. 不要用一个类去完成一个标签的所有样式，一个标签的样式应该由多个类共同完成
4. 类要尽可能的小，让更多的标签使用
5. class选择器一般配合CSS使用
4. 属性选择器
1. 语法格式：标签名[属性名=...]
2. 作用：为标签上指定的属性设置样式
3. 特点：
1. 可以设置匹配属性名的样式
2. 也可以设置匹配属性值对应的属性
5. 后代选择器
1. 语法格式：选择器A 选择器B{样式1;样式2...}
2. 作用：设置某一部分(后代)样式
3. 特点：
1. A和B之间用空格隔开，表示B是A的后代
2. 选择的是后代，不一定是儿子
6. 子元素选择器
1. 语法格式：选择器A>选择器B{样式1;样式2...}
2. 作用：为指定的儿子设置样式
3. 特点：只在儿子层找
7. 并集选择器
1. 语法格式：选择器A,选择器B,...{样式1;样式2...}
2. 作用：为所有选择器设置相同样式
-->
<div>
<h3>标签选择器</h3>
<div id="div_01">属性选择器</div>
<div class="div_02">类选择器</div>
<div class="div_02">
<p>这是一个<b>后代选择器</b></p>
</div>
<div class="div_02">
<p>子元素选择器1</p>
<p>子元素<i>选择器2</i></p>
<p>子元素选择器3</p>
</div>
<input type="button" value="按钮"/>
</div>
</body>
</html>
/*通用选择器*/
*{
margin: 0;
padding: 0;
}
/*标签选择器*/
h3{
color: red;
}
/*属性选择器*/
#div_01{
background-color: lime;
}
/*类选择器*/
.div_02{
background-color: maroon;
}
/*后代选择器*/
.div_02 b{
color: silver;
}
/*子元素选择器*/
.div_02>p{
color: orange;
}
/*并集选择器*/
#div_01,.div_02{
height: 100px;
}
/*属性选择器*/
input[value="按钮"]{
color: red;
}
三、CSS3 样式
<!DOCTYPE html>
<html>
<head>
<title>样式.</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="样式.css" />
</head>
<body>
<!--
1. 背景
1. 设置背景颜色
background-color：颜色值或者颜色名
2. 设置背景图片
background-image：url("图片相对路径")
3. 设置背景重复
background-repeat：
no-repeat：不允许图像重复
repeat-x：只在水平方向重复
repeat-y：只在垂直方向重复
4. 设置背景图像的位置
background-position：
1. 属性值：center、left、right、top
2. 百分比：左上角是0% 0% 右下角是100% 100%
3. 像素： 左上角是0 0, 右下角是100% 100%
5. 设置背景图像的显示
background-attachment：
scroll：图像会随着鼠标滚动
fixed：图像固定，设置背景图像位置是必须开启
2. 文本
1. 设置文本颜色
color：颜色名
2. 设置文本首行缩进
text-indent：字符数
3. 设置文本对齐方式
text-algin：center、left、right
4. 设置行高
line-height：
1. 数值：默认值是1
2. 像素：默认值是20px
3. 百分比：默认值是110%-120%
5. 向文本添加修饰
text-decoration：
none：定义标准的文本，可去除超链接下划线
underline：定义下划线
overline：定义上划线
line-through：定义穿过文本下的一条线。
blink：定义闪烁的文本
3. 字体
1. 设置字体系列
font-family：那种字体，.....;
2. 设置字体大小
font-size：多少em(1em=16px)；
3. 字体加粗
font-weight：bold；
4. 链接
1. 未访问的链接
a:link{样式1；样式2；....}
2. 已访问的链接
a:visited{样式1；样式2；....}
3. 鼠标移动到链接上
a:hover{样式1；样式2；....}
4. 按下链接时
a:active{样式1；样式2；....}
5. 列表
1. 设置列表项标志类型
list-style-type：属性值
2. 设置列表项的位置
list-style-position：
inside： 列表项目标记放置在文本以内
outside：列表项目标记放置在文本以外
3. 将图片设置为列表项标志
list-style-image：url("")
4. 简写
list-style: 列表项类型 位置 图片
6. 表格
1. 设置边框为单实线
border-collapse：collapse
2. 设置单元格的间隔
border-spacing：10px
3. 设置表格标题位置
caption-side：
top：表格之上，默认值
bottom：表格之下
-->
<!-- 背景 -->
<div>
<div class="div_01"></div>
</div>
<!-- 文本及字体 -->
<div>
<h3>基尼太美</h3>
<p>传说华佗在给关羽刮骨疗伤的时候，关羽不配合，一直在下棋，华佗很生气，想刺激一下关羽，华佗就用一种药来刺激关羽，关羽一吓，吓得眉毛都抬起来了。后人就把这个故事成为<b>“激你抬眉”</b>。</p>
</div>
<!-- 超连接 -->
<a href="http://www.cnblogs.com/mh20131118" target="_black">萌萌哥的春天</a>
<!-- 列表 -->
<ul>
<li>鸡</li>
<li>你</li>
<li>太</li>
<li>美</li>
</ul>
<br />
<!-- 表格 -->
<table id="ikun">
<caption>基尼太美</caption>
<thead>
<tr>
<th>ikun</th>
<th>黑粉</th>
</tr>
</thead>
<tbody>
<tr class="kunkun">
<td>我们的坤坤</td>
<td>大家的坤坤</td>
</tr>
</tbody>
</table>
</body>
</html>
@charset "UTF-8";
/*背景*/
.div_01 {
width: 100%;
height: 600px;
/*设置背景图片*/
background-image: url("../images/a.jpg");
/*取消背景图片重复*/
background-repeat: no-repeat;
/*开启图像固定*/
background-attachment: fiexd;
/*设置背景图像位置*/
background-position: 50% 15%;
background-image: url("../images/a.jpg")
}
/*文本及字体*/
p {
/*设置首行缩进*/
text-indent: 2em;
/*设置行高*/
line-height: 20px;
/*设置对齐方法*/
text-align: left;
/*设置字体系列*/
font-family: serif, cursive, fantasy;
/*设置字体大小*/
font-size: 20px;
}
p>b {
color: orange;
/*设置字体闪烁*/
text-decoration: blink;
/*设置字体加粗*/
font-weight: bold;
}
/*超连接*/
a:link, a:visited { /*点击之前*/
display: block;
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active { /*点击时*/
background-color: #7A991A;
}
/*列表*/
ul li {
/*取消样式*/
list-style-type: none;
/*浮动*/
float: left;
margin-left: 20px;
color: red;
}
/*表格*/
#ikun {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 200px;
border-collapse: collapse;
}
#ikun td, #ikun th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#ikun th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#ikun tr.kunkun td {
color: #000000;
background-color: #EAF2D3;
}
四、CSS 盒模型
一： 外边距：margin
1. 作用：设置元素和元素之间的间隔
2. 使用：margin：上 右 下 左
二：边框：border
1. 作用：设置边框的大小
2. 使用：border：大小 线条 颜色；
3. 圆角：border-radius：20px
三：内边距：padding
1. 作用：设置内容区和边框之间的距离
2. 使用：padding：10px；
五、CSS3 定位
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="盒子模型.css" />
</head>
<body>
<!--
1. 块级元素(block)
1. 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
2. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
3. 块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 ,
h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
2. 内联元素(inline)
1. 和相邻的内联元素在同一行;
2. 宽度(width)、高度(height)、内边距的top/bottom和外边距的top/bottom都不可改变，就是里面文字或图片的大小;
3. 内联元素主要有： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i ,
img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
3. 修改元素显示
1. 显示为块级元素：display:block
2. 显示为内联元素：display:inline
3. 显示为内联块元素：display:inline-block
1. 表现为同行显示并可修改宽高内外边距等属性
2. <ul>元素使用时，可以水平显示
4. 定位
1. 相对定位：relative
1. 使用：
1. 开启定位：position：relative
2. 移动：left：-20px;
2. 特点：
1. 相对元素原有的位置移动
2. 原本所占的空间不会改变
2. 绝对定位：absolute
1. 使用：
1. 开启定位：position：absolute
2. 移动：left：20px;
2. 特点：
1. 相对于父级元素(开启相对定位)或者页面(所有父级元素都未开启相对定位)进行移动
2. 不会占用原本空间，完全脱离文档流，会和其他元素重叠
3. 固定定位：fixed
1. 使用：
1. 开启定位：position：fixed
2. 移动：top：20px;
2. 特点：
1. 将元素固定在指定位置，不会随着滚动条移动
2. 完全脱离文档流，不会占用原本空间
5. 浮动
1. 开启浮动：使元素可以左右移动
1. 使用：float: left or right；
2. 特点：
1. 元素只能左右移动而不能上下移动
2. 浮动元素完全脱离文档流，不会占用原有空间，元素会重新排列
3. 当水平空间足够大的时候，所有浮动的元素都会水平排列
4. 如果元素的尺寸不同时，有可能出现元素卡住的现象
2. 清理浮动：指定元素两侧不能出现浮动元素
clear：both or left or right
6. 溢流
1. 控制内容溢出
overflow：
visible：默认值，溢出的内容呈现在框外
hidden：溢出的部分会被隐藏
scroll：通过滚动条可以查看隐藏的部分
auto：自动根据是否溢出添加滚动条
-->
<!-- 定位 -->
<div class="div_01">
<div class="one">我是老大</div>
<div class="two">我是老二</div>
<div class="three">我是老三</div>
</div>
<!-- 浮动 -->
<div class="div_02">
<img alt="我是老大" src="../images/a.jpg">
<img alt="我是老二" src="../images/a.jpg">
<img alt="我是老三" src="../images/a.jpg">
</div>
<!-- 溢流 -->
<div class="div_03">
<p>你是我的小苹果
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
小呀小苹果
</p>
</div>
</body>
</html>
@charset "UTF-8";
/*定位*/
.div_01{
width: 500px;
height:500px;
background-color: silver;
position: relative;
}
.one,.two,.three{
width: 100px;
height: 100px;
}
/*相对定位*/
.one{
background-color: lime;
position: relative;
left: 50px;
}
/*绝对定位*/
.two{
background-color: navy;
position: absolute;
left: 300px;
}
/*固定定位*/
.three{
background-color: orange;
position: fiexd;
right: 50px;
}
/*浮动*/
.div_02{
width: 500px;
height: 500px;
background-color: orange;
}
img{
width: 160px;
float: left;
}
/*溢流*/
.div_03{
width: 500px;
height: 500px;
background-color: silver;
}
p{
/*设置溢出内容*/
overflow: auto;
}