目录
一、网络传输的三大基石
三大基石：URL、HTTP协议、HTML
URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（统一资源定位符），它是WWW的统一资源定位标识，就是指网络地址。
HTTP协议：HTTP是一个简单的请求-相应协议，它通常运行在TCP之上，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。
HTML：超文本标记语言。
二、HTML（超文本标记语言）
学习HTML就是学习各种各样的标签（标记），然后组成一个页面，这个页面可以被浏览器解析，解析完后可以在浏览器中将页面进行展示。
1、标准结构
<html>
<head></head>
<body>
......
</body>
</html>
2、编辑器
编写HTML语言使用的编辑器为：HBuilder。
3、HTML标签的使用
（1）html标签
定义HTML文档，标签限定了文档的开始点和结束点，在它们之间的是文档的头部和主体。
（2）head标签–>里面放的是页面的配置信息
head标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。
下面这些标签可用在head的部分：
<title>、<meta>、<link>、<style>、<script>
应该把<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前。
文档的头部经常会包含一些<meta>标签，用来告诉浏览器关于文档的附加信息。
代码示例：
<html>
<head>
<!-- 设置页面标题 -->
<title>minh的网页</title>
<!-- 设置页面编码格式，避免乱码
charset="UTF-8"是属性，以键值对（k=v）的形式给出
-->
<meta charset="UTF-8" />
<!-- 页面刷新效果（3秒后跳转到百度） -->
<meta http-equiv="refresh" content="3;https://www.baidu.com" />
<!-- 页面作者 -->
<meta name = "author" content="minh;1505296767@qq.com" />
<!-- 设置页面搜索的关键字 -->
<meta name = "keywords" content="minh;man" />
<!-- 页面描述 -->
<meta name = "description" content="minh个人网页的首页" />
<!-- link标签用于引入外部资源 -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
my first html
</body>
</html>
（3）body标签–>里面放的就是页面上展示出来的内容
body元素是定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
- 文本标签
标题标签、横线标签、段落标签、加粗倾斜下划线、预编译标签、换行、字体标签等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 文本标签 -->
<!-- 标题标签
h1-h6：字号逐渐变小，每个标题占一行
h7之后均为普通文本
-->
<h1>标题！！！</h1>
<h2>标题！！！</h2>
<h3>标题！！！</h3>
<h4>标题！！！</h4>
<h5>标题！！！</h5>
<h6>标题！！！</h6>
<!-- 横线标签
width：设置宽度（500px：固定宽度 33%：页面宽度的百分比，会随页面宽度的变化而变化）
align：设置位置（left、right、center） 不写默认center
-->
<hr width="500px" align="left"/>
<hr width="33%" align="left"/>
<!-- 段落标签
段落中的文字自动换行，段落间有空行
实体字符（空格、尖括号、©️版权等）
-->
<p>  反射确实可以得到一切类中的东西（包括私有的属性、方法等），但是或许不算是破坏封装，私有方法是为了让继承的类无法使用，避免调用那些被设为私有的方法出现一些不必要的错误。这就是封装性。反射虽然可以获取私有方法并使用方法，只能说是其功能强大，可以在保证在调用私有方法不会出现错误，但是并没有反射调用方法后，该方法就不是私有的了。他仍然是私有的，仍然在子类中不可见。</p>
<p>反射确实可以得到一切类中的东西（包括私有的属性、方法等），但是或许不算是破坏封装，私有方法是为了让继承的类无法使用，避免调用那些被设为私有的方法出现一些不必要的错误。这就是封装性。反射虽然可以获取私有方法并使用方法，只能说是其功能强大，可以在保证在调用私有方法不会出现错误，但是并没有反射调用方法后，该方法就不是私有的了。他仍然是私有的，仍然在子类中不可见。</p>
<!-- 加粗、倾斜、下划线等 -->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<b><u>加粗下划线</u></b>
<del>中划线</del>
<!-- 预编译标签（在页面上显示原样效果） -->
<pre>
public static void main(String[] args){
System.out.printLn("hello, world!");
}
</pre>
<!-- 换行 -->
反射确实可以得到一切类中的东西（包括私有的属性、方法等），但是或许不<br />算是破坏封装，私有方法是为了让继承的类无法使用<br />
<!-- 字体标签 -->
<font color="red" size="5">反射确实可以得到一切类中的东西</font>
</body>
</html>
- 多媒体标签
图片、音频、视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 图片
width：设置宽度
height：设置高度
title：鼠标悬浮在图片上的提示语，若图片加载失败且没有设置alt属性，那么提示语也是title的内容
alt：图片加载失败的提示
-->
<img src="img/IMG_1027.jpeg" width="300px" title="框架" alt="图片加载失败"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp08%2F56041124144715.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653374108&t=43aeff2953ba4e15b5b3a351cda982ee" />
<!-- 音频 -->
<embed src="music/1.mp3" />
<!-- 视频 -->
<embed src="video/2.avi" width="500px"/>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=k0537eh4o0d" allowFullScreen="true"></iframe>
</body>
</html>
- 超链接标签
超链接标签：实现页面的跳转。
锚点：当一个页面太长时，需要设置锚点，实现在一个页面点不同位置进行跳转；不同页面也可以实现这个过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接标签
实现页面跳转功能
href：控制跳转的目标位置
target：_self：在自身页面打开（默认） _blank：在空白页面打开
-->
<a href="Test01.html">超链接跳转</a>
<a href="">超链接1</a> <!-- 跳转到自身页面 -->
<a href="https://blog.csdn.net/weixin_43583736?type=blog" target="_self">超链接2</a> <!-- 跳转到网络资源 -->
<a href="https://blog.csdn.net/weixin_43583736?type=blog" target="_blank">超链接2</a>
<br />
<!-- 图片超链接 -->
<a href="https://blog.csdn.net/weixin_43583736?type=blog"><img src="img/IMG_1027.jpeg" width="600px" alt="图片加载失败"></a>
<!-- 锚点 -->
<a name="1F"></a>
<a name="2F"></a>
<a name="3F"></a>
<a name="4F"></a>
<a href="#1F">锚点1</a>
<a href="#2F">锚点2</a>
<a href="#3F">锚点3</a>
<a href="#4F">锚点4</a>
</body>
</html>
- 列表标签
有序列表、无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 无序列表
type：设置列表图标样式（例如type="circle"）
如果想要更换图标样式，需借助css(例如style="list-style: url(img/IMG_1027.jpeg);")
-->
<h1>My day</h1>
<ul type="circle">
<li>起床</li>
<li>吃早饭</li>
<li>吃午饭</li>
<li>吃完饭</li>
<li>睡觉</li>
</ul>
<!-- 有序列表
type：设置列表标号
start：设置起始标号
-->
<h1>Study java</h1>
<ol type="I" start="3">
<li>javase</li>
<li>oracle</li>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
</body>
</html>
- 表格标签
应用场景：在页面布局很规整的时候就可能利用表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格
table：表格
tr：行
td：列
th：特殊单元格，表头效果（加粗、居中）
默认情况下表格没有边框
border：设置边框大小
cellspacing：设置单元格和边框之间的空隙
align：设置居中、左、右
background：设置背景图片
bgcolor：设置背景颜色
rowspan：行合并
colspan：列合并
-->
<table border="1px" cellspacing="0px" width="400px" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="3">4</td> <!-- 行合并 -->
</tr>
<tr>
<td colspan="2">5</td>
<!-- <td>6</td> -->
<td>7</td>
<!-- <td>8</td> -->
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<!-- <td>12</td> -->
</tr>
</table>
</body>
</html>
三、框架
1、内嵌框架
内嵌框架时用于在网页中嵌入一个网页并让它在网页中显示。
语法：<iframe src=“URL”></iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My Picture</h1>
<ul>
<li><a href="img/Reflect.jpeg" target="My_iframe">Reflect</a></li>
<li><a href="img/Socket.jpeg" target="My_iframe">Socket</a></li>
<li><a href="img/IMG_1027.jpeg" target="My_iframe">Frame</a></li>
</ul>
<iframe name="My_iframe" width="1400px" height="700px"></iframe>
</body>
</html>
2、框架集合
frameset：可以定义一个框架集，它被用来组织多个窗口（框架），每个框架存有独立的文档。在其最简单的应用中，frameset仅规定在框架集中存在多少列或多少行，使用cols和rows属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 框架集合
和body是并列的概念，不要将框架集合放入body中
-->
<frameset rows="20%,*,28%">
<frame />
<frameset cols="30%,39%,*">
<frame />
<frame src="index.html" />
<frame />
</frameset>
<frameset cols="50%,*">
<frame />
<frame />
</frameset>
</frameset>
</html>
四、form表单
表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个html文档中，当用户填写完信息后做提交（submit）操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。
<form action=“URL” method=“get/post” name=“myform”></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，分为get和post
前后端交互流程：
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form表单
1、action属性：提交到的地址
2、method属性：get、post
默认情况下不写method属性就相当于method="get"
get：提交数据可见、不安全、提交的数据长度有限、效率高
post：提交数据不可见、安全、提交数据长度没有限制、效率低
-->
<form action="">
用户名：<input type="text" name="UserName" />
<br>
密 码：<input type="password" name="Password" />
<br>
<!-- 提交按钮 -->
<input type="submit" />
</form>
</body>
</html>
1、表单元素
常规表单元素
文本框、密码框、单选按钮、多选按钮、文件、隐藏域、普通按钮、重置按钮、图片按钮、下拉列表、多行文本框、label标签、提交按钮
<!-- 表单元素 -->
<form action="">
<!-- 文本框
input标签：通过type属性的不同，来表现不同的形态
type="text"：文本框
表单元素必须有一个属性：name，才可以提交数据，才可以采集数据，提交的时候会以键值对的形式拼在一起
value：文本框中的具体内容
placeholder：默认提示语
readonly：只读，不能修改，但可以正常提交
disabled：禁用，完全不可用，不能正常提交
-->
<input type="text" name="UserName" placeholder="请输入用户名">
<input type="text" name="UserName2" value="hello" readonly>
<input type="text" name="UserName3" value="hello" disabled>
<!-- 密码框 -->
<input type="password" name=Password"">
<!-- 单选按钮
一组单选按钮必须通过name属性来控制，在一根组中才能只选一个
正常状态下，提交的数据为gender=on，无法区分提交的数据；
不同的选项，要value值控制为不同，这样后台接收才可以区分。
check：默认选中
-->
性别：
<input type="radio" name="gender" checked value="1"/>男
<input type="radio" name="gender" value="0"/>女
<!-- 多选按钮
通过name属性来控制，让它们在一个分组中，才可以多选
不同的选项value值要不同，后台才可以区分
多个选项提交时，键值对用&符号进行拼接
-->
喜欢的语言：
<input type="checkbox" name="checkbox" value="1" />C
<input type="checkbox" name="checkbox" value="2" />Java
<input type="checkbox" name="checkbox" value="3" />PHP
<input type="checkbox" name="checkbox" value="4" />Python
<!-- 文件 -->
<input type="file" />
<!-- 隐藏域 -->
<input type="hidden" name="hidden" value=hidden />
<!-- 普通按钮
仅可以点击，需和js配合，添加事件
-->
<input type="button" />
<!-- 重置按钮
将页面恢复到初始状态
-->
<input type="reset" />
<!-- 图片按钮 -->
<input type="image" src="img/IMG_1027.jpeg" />
<!-- 下拉列表
selected：默认选中
multiple：多选
-->
城市：
<select name="city" multiple>
<option value="0" selected>--请选择--</option>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">杭州市</option>
<option value="4">深圳市</option>
</select>
<!-- 多行文本框(文本域)
style="resize: none;"：利用css样式控制大小不可变
-->
自我介绍：
<textarea name="textarea" style="resize: none;" rows="10">请填写信息</textarea>
<!-- label标签
一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性和id配合使用
-->
<label for="label1">用户名：<input type="text" name="name111" id="label1"></label>
<input type="submit" value="提交">
</form>
2、H5新增type类型
email、URL、color、number、range、date、month、week
<form action="">
<!-- email
H5类型可以增加校验
-->
<input type="email" name="email"/>
<!-- URL -->
<input type="url" />
<!-- color -->
<input type="color" />
<!-- number
min：最小值
max：最大值
step：步长
value：默认值（一定要在步长范围内，否则不能提交）
-->
<input type="number" min="1" max="10" step="1" />
<!-- range -->
<input type="range" min="1" max="10" step="1" />
<!-- date -->
<input type="date" />
<!-- month -->
<input type="month" />
<!-- week -->
<input type="week" />
<input type="submit" />
</form>
详细参考网址：https://www.w3school.com.cn/html5/att_input_type.asp
3、H5新增属性
multiple（多选）、placehoder（默认提示）、autofocus（自动聚焦）、required（必填项）
五、CSS
作用：美化页面。使得样式和元素做到分离的效果。
1、CSS书写样式
（1）内联样式
<body>
<!--
内联样式：
在标签中加入一个style属性，css的样式作为属性值
多个属性值用分号连接
-->
<h1 style="color:blue;font-family:'宋体';">这是一个h1标题</h1></h1>
</body>
（2）内部样式
<head>
<meta charset="utf-8">
<title></title>
<!--
内部样式：
head标签中加入一个style标签，在里面定位到你需要修饰的元素，然后在{}中加入要修饰的样式
-->
<style>
h1{
color:red;
font-family:Verdana;
}
</style>
</head>
<body>
<h1>这是一个h1标题</h1>
</body>
（3）外部样式（最推荐）
新建一个css文件：
h1{
color:red;
font-family:sans-serif;
}
在html页面中使用link引入外部资源（css）：
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<h1>这是一个h1标题</h1>
</body>
2、选择器
（1）基本选择器
元素选择器、class选择器、id选择器
优先级：id选择器 > clss选择器 > 元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
1、元素选择器
通过元素的名字进行定位，它会获取页面上所有这个元素。
格式：
元素名字{
css样式;
}
*/
h1{
color:red;
}
i{
color:yellow;
}
/*
2、class选择器
不同类型的标签使用相同的类型
格式：
.class的名字{
css样式;
}
*/
.mycls{
color:green;
}
/*
3、id选择器
定位唯一的一个元素
不同标签可以使用相同的id，但不建议！
格式：
#id名字{
css样式;
}
*/
#myid{
color:blue;
}
</style>
</head>
<body>
<h1>我是<i>一个</i>标题</h1>
<h1 class="mycls">我是一个标题</h1>
<h1>我是一个标题</h1>
<h1 class="mycls">我是一个标题</h1>
<h1 id="myid">我是一个标题</h1>
</body>
</html>
（2）关系选择器
- div span
div：块级元素–>换行
span：行内元素–>不换行
div和span结合css用于页面的布局。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px red solid;
}
span{
border: 1px blue solid;
}
</style>
</head>
<body>
<div>小可爱</div>
<div>小可爱</div>
<div>小可爱</div>
<span>大可爱</span>
<span>大可爱</span>
<span>大可爱</span>
</body>
</html>
关系选择器：后代选择器、子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 后代选择器：只要是这个元素的后代，样式都会发生变化 */
div h1{
color:red;
}
/* 子代选择器：只改变子代的样式 */
div>h1{
color:blue;
}
span>h1{
color:yellow;
}
</style>
</head>
<body>
<div>
<h1>一个标题</h1>
<h1>一个标题</h1>
<h1>一个标题</h1>
<h1>一个标题</h1>
<span>
<h1>一个标题</h1>
<h1>一个标题</h1>
<h1>一个标题</h1>
<h1>一个标题</h1>
<h1>一个标题</h1>
</span>
</div>
</body>
</html>
（3）属性选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type='text']{
background-color: bisque;
}
input[type='password']{
background-color: black;
}
</style>
</head>
<body>
<form action="">
用户名：<input type="text" />
密码：<input type="password" />
<input type="submit" value="登录" />
</form>
</body>
</html>
（4）伪类选择器
伪类选择器一般用于超链接上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 静止状态 */
a:link{
color:red;
}
/* 鼠标悬浮状态 */
a:hover{
color:blue;
}
/* 触发状态 */
a:active{
color:green;
}
/* 完成状态 */
a:visited{
color:yellow;
}
</style>
</head>
<body>
<a href="www.baidu.com">超链接</a>
</body>
</html>
3、浮动
浮动设计的初衷时为了解决文字环绕图片的问题，浮动后不会将文字遮挡。后续CSS的浮动使元素脱离文档流。
代码示例：
(1)
<body>
<div style="background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;">3</div>
</div>
</body>
运行效果：
(2)
<body>
<div style="background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;">3</div>
</div>
</body>
运行效果：
(3)
<body>
<div style="background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;float: left;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;">3</div>
</div>
</body>
运行效果：
(4)
<body>
<div style="background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;float: left;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;float: left;">3</div>
</div>
</body>
运行效果：
消除浮动影响
（1）方式一
给浮动的父节点加入一个属性：overflow:hidden
<body>
<div style="background-color: pink;overflow:hidden">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;float: left;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;float: left;">3</div>
</div>
<div style="width:500px;height: 500px;background-color: grey;"></div>
</body>
运行效果：
（2）方式二
给父节点加一个高度
<body>
<div style="background-color: pink;height: 400px;">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;float: left;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;float: left;">3</div>
</div>
<div style="width:500px;height: 500px;background-color: grey;"></div>
</body>
运行效果：
（3）方式三
给被影响元素加一个属性：clear:both
<body>
<div style="background-color: pink;">
<div style="width: 100px;height: 100px;background-color: bisque;float: left;">1</div>
<div style="width: 200px;height: 200px;background-color: greenyellow;float: left;">2</div>
<div style="width: 300px;height: 300px;background-color: lightblue;float: left;">3</div>
</div>
<div style="width:500px;height: 500px;background-color: grey;clear: both;"></div>
</body>
运行效果：
4、定位
（1）静态定位（static）
<body>
<!-- 静态定位：
如果不写position属性，默认就是静态定位
静态定位效果就是元素出现在它本该出现的位置
-->
<img src="img/hi.jpeg" style="position: static;">
</body>
（2）相对定位（relative）
应用场合：元素在小范围移动的时候；结合绝对定位使用
<body>
<!-- 相对定位：
相对元素自身所在的原来的位置进行定位。
可以设置left、right、top、bottom四个属性
效果：在进行相对定位之后，元素原来所在的位置被保留，被占用-->保留展位其他元素的位置不会发生移动
优先级：左上>右下
-->
<div style="background-color: pink;height: 500px;width: 500px;;">
<div style="width: 100px;height: 100px;background-color: bisque;">1</div>
<div style="width: 100px;height: 100px;background-color: greenyellow;position: relative;left: 10px;top: 10px;">2</div>
<div style="width: 100px;height: 100px;background-color: lightblue;">3</div>
</div>
</body>
z-index属性：
设置堆叠顺序，设置元素谁在上谁在下
（3）绝对定位（absolute）
当给一个元素设置了绝对定位，它会向上一层一层的找父级节点是否有定位。如果直到找到body也没有定位，那么就相对body进行变化；如果父级节点有定位（绝对定位、相对定位、固定定位），这个元素就会相对父级位置发生变化。
开发中建议：父级节点为relative定位，子级节点absolute定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#outer{
background-color:pink;
height: 500px;
width: 500px;
margin-left: 300px;
position: relative;
}
#div01{
background-color: cornflowerblue;
height: 100px;
width: 100px;
position: absolute;
left: 30px;
top: 50px;
}
#div02{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="outer">
<div id="div01">1</div>
<div id="div02">2</div>
</div>
</body>
</html>
（4）固定定位（fixed）
应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mydiv{
background-color: cornflowerblue;
width: 50px;
height: 300px;
position: fixed;
right: 0px;
top: 200px;
}
</style>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
5、盒子模型
盒子模型（Box Model）在设计和布局时使用。包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 将所有元素的样式（外边距、边框、内边距）全部设置为0 */
*{
margin: 0px;
border: 0px;
padding: 0px;
}
#outer{
height: 400px;
width: 400px;
background-color: cornflowerblue;
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
padding-top: 100px;
}
#inner{
height: 60px;
width: 60px;
background-color: pink;
padding-left: 40px;
padding-top: 40px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">coo</div>
</div>
</body>
</html>
运行效果：
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
