看视频的笔记。。。。
目录：
1.html的基本结构
2.HTML的标记及其属性
3.HTML中一些常见的标记
4.段落、标题、水平线
5. HTML实体
6.相对路径和绝对路径
7. HTML中的图像
8. HTML中的超链接
9. 锚点链接
10.列表
11.表格
12.表单的设计和运用
13.框架集的运用
14. css内容概要
15.css选择器
16. css中伪类
17.常用的css属性
18. 盒子模型
19.相对定位和绝对定位
20. 浮动
1.html的基本结构：
DTD(Document Type Defineition) -----文档定义类型
<!doctype html>
<html> ----------------------------文档根标记
<head> -------------------------文档头部标记
<meta> -------------------------主要用于定义文档字符集、使用语言、作者等信息
<title>标题</title>
</head>
</head>
<body> -------------------------网页主体
网页主体部分
</body>
</html>2.HTML的标记及其属性：
语法：
单标记：<标记名称 属性名称="属性值" />
双标记： <标记名称 属性名称="属性值"></标题>3.HTML中一些常见的标记：
文字加粗： <b></b>
文字倾斜： <i></i>
文字下划线：<u></u>
文字删除线： <s></s>
字体标签： <font>...</font>
属性名 属性值 说明
face 字体名 更换字体
color rgb('255','255','255') 更换文字颜色
英文：blue,green
十六进制表示：#333333
size 字号：数字的形式，区间1-7 修改字体大小
换行： <br />4.段落、标题、水平线
段落： <p>...</p>
属性名称 属性值 说明
align (对齐方式) left 向左靠 （默认靠左）
center 居中
rigth 向右靠
示例： <p align="left">段落内容</p>
水平线： <hr />
属性名称 属性值 说明
size 像素(数字) 数字越大，水平线越粗
百分比 百分比越大，水平线越粗
width 像素 水平线的长度会随数字大小变化
百分比（%） 水平线的长度会随百分比大小变化，并且会随着浏览器窗口变化
noshade noshade 水平线实心。
示例： <hr size="20" width="50%" noshade="noshade" />
注释：多写注释，多写，多写。
语法：<!--注释内容-->
5. HTML实体
为了输出一些特殊字符：
实体： 表示作用
> 大于号 >
< 小于号 <
' 单引号 '
& 连接号（&）
不间断空格（）
® 注册标
© 版权标6.相对路径和绝对路径
绝对路径有完整的协议名称、主机名称、路径及文档全称组成
如：http://www.baidu.com
7. HTML中的图像
IMG标签 : <img />
属性名称 属性值 说明
src 图像链接地址 必选属性
title 图像解释文字 鼠标悬停在图像上出现的解释文字
alt 图像解释文字 图像显示不正常时，出现的替代文字
width 图像宽度数值 设置图像宽度
height 图像高度数值 设置图像高度
border 图像边框数值 设置图像边框
示例：
<img src="file.png" title="解释1"/>
<img src="file1.png" alt="解释2"/>
<img src="file.png" title="解释3"/>
<img src="file.png" border="1px"/>8. HTML中的超链接
A标签 <a></a>,超链接的作用，可以在不同的html页面实现跳转
属性名称 属性值 说明
href 链接地址 所需跳转的链接地址
target _blank(新窗口打开) 跳转方法
_self
_parent
_top
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。9. 锚点链接：
当某个HTML页面为大长度的文章段落时，为了方面寻找某一章节，使用锚点链接的方式
关键字：id
语法：
<a href="#p1">点击前端</a>
<p id="p1">文章第一段</p>10.列表：
列表：无序和有序列表、自定义列表
1)有序列表：
用于显示具有某一相同特征的有序数据
<ol type="列表类型" start="起始编号">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
属性名 属性值 说明
type 1,数字（默认） 用于列表的排序
a,字母a
A，大写字母A
i，小写罗马数字
I,大写罗马数字
start 数字 表示列表起始数字
示例：
<ol type="1" start="10">
<li>wo</li>
<li>ni</li>
</ol>
2)无序列表：
用于显示具有某一特征的无序数据
<ul type="列表类型">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
属性名 属性值 说明
type disc 点是实心圆（默认）
circle ,空心圆
square 实心矩形
示例：
<ul type="circle">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
(3) 自定义列表
dt和dd是同级关系
示例：
<dl>
<dt>苹果</dt>
<dd>5元一斤</dd>
<dd>很甜</dd>
</dl>11.表格
1）表格的作用
表格通常来组织结构化的信息，把数据存储在单元格里。
2）构建一个表格
<table>
<tr> -----行,一对tr表示一行，一行可以有多个单元格。
<th>内容<th> -----单元格，加粗
<td>内容<td>
</tr>
</table>
示例：
<table>
<tr>
<th>第一行第一单元格<th>
<td>第一行第二单元格<td>
<td>第一行第三单元格<td>
</tr>
<tr>
<th>第二行第一单元格<th>
<td>第二行第二单元格<td>
</tr>
</table>
3)表格的属性：
属性名 属性值 说明
width 数值 设置表格宽度
height 数值 设置表格高度
bgcolor 英文颜色、rgb、十六进制 设置表格背景颜色
border 数值 设置边框
background 图像地址 设置表格背景图像（与bgcolor同时使用，background的优先级高）
cellpadding 数值 设置内边距（单元格和内容之间的距离）
cellspacing 数值 设置外边距（单元格之间的距离）
align 对齐方式（left|center|right）
bordercolor 颜色 设置边框颜色
示例：
<table border="1px" cellspacing="0px" width="500px" cellpadding="20px" bordercolor="red" bgcolor="green">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
4）表格中的行（tr）属性：
属性名 属性值 说明
align 对齐方式 设置对齐方式
bgcolor 颜色 设置表格背景颜色（行的优先级高于table）
valign (top|middle|bottom) 设置垂直对齐方式(vertical-align:垂直的对齐方式)
示例：
<table border="1px" cellspacing="0px" width="500px" height="500px" bordercolor="red" bgcolor="green">
<tr bgcolor="pink" valign="top">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
5）单元格属性：
属性名 属性值 说明
align 对齐方式（left|center|right）
bgcolor 颜色 设置行背景颜色
align 对齐方式 设置对齐方式
rowspan 数值 设置行合并
colspan 数值 设置列合并
示例：合并3列、合并3行
<table border="1px" cellspacing="0px" width="500px" height="500px" bordercolor="red" bgcolor="green">
<tr>
<th colspan="3">人员信息表</th><!--合并列-->
<td rowspan="3">其他补充信息</td> <!--合并行-->
</tr>
<tr bgcolor="pink" valign="top">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>
6）表格的嵌套
示例1：
<table border="1px" cellpadding="10" cellspacing="0">
<tr>
<td>第一行第一列</td>
<td><!--在一行第二列中创建一个嵌套的表格-->
<table border="1px" cellpadding="10" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td><!--这里还可以再嵌套-->
<table border="1px" cellpadding="10" cellspacing="0">
<tr>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
示例2：
<table border="1px" cellpadding="10" cellspacing="0" width="500px" height="500px">
<tr>
<td width="200px"><img src="file.png" alt="" title="吉普车"></td>
<td width="300px" valign="top">
<table cellspacing="0" cellpadding="10px" border="1px" width="100%">
<tr>
<td colspan="2">牧马人</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table> 12.表单的设计和运用
```
1）表单的作用：
表单是让浏览用户在浏览网页的过程中提交数据，以便存入数据库的工具
2)表单的功能结构
<form>
表单控件
</form>
属性名称 属性值 说明
name 字符串 表单的名字
method get/post 数据提交的方式
action URL 传输地址
3）常见的表单控件
文本框：
<input type="text" name="控件名称" value="值" size="控件显示宽度"
maxlength="控件数据输入最大长度" readonly="readonly" />
密码框：
<input type="password" name="控件名称" value="值" size="控件显示宽度"
maxlength="控件数据输入最大长度" readonly="readonly" />
多行文本控件：
<textarea name="控件名称" cols="设置长度" rows="设置宽度">
</textarea>
隐藏域：
<input type="hidden" name="控件名称" value="值">
多选勾选控件：
<input type="checkbox" name="控件名称" value="值" checked="checked" (已选中) disabled="disabled" (禁用该控件)>
单选勾选控件：
<input type="radio" name="控件名称" value="值" checked="checked" (已选中) disabled="disabled" (禁用该控件)>
下拉框控件：
<select name="控件名称">
<option value="值" selected="selected" （选中值）>选择内容</option>
</select>
分组：<optgroup lable="分组名称">
</optgroup>
发送表单按钮：
<input type="submit" value="按钮字样" />
重置表单按钮：
<input type="reset" value="按钮字样">
上传文件控件：
<input type="file" name="filename">
示例1：
<form name="" method="" action="">
用户名：<input type="text" name="" value="2323" maxlength="10" size="30" ><br />
密 码：<input type="password" name="" value="" maxlength="10" size="30"><br />
<textarea name="" cols="30" rows="10" ></textarea><br />
你是单身的？<input type="checkbox" name="" value="" checked="checked">
你是中国人？<input type="checkbox" name="" value="" checked="checked">
<br />
男<input type="radio" name="aaa" checked="checked" /> <!--name必须相同，才能关联-->
女<input type="radio" name="aaa" />
<br />
<select name="">
<option value="" selected="selected">姓名</option>
<option value="">张三</option>
<option value="">李四</option>
<option value="">王五</option>
</select>
<br />
分组的：
<select name="" id="">
<optgroup label="海南省">
<option value="">海口</option>
<option value="">三亚</option>
<option value="">琼州</option>
</optgroup>
<optgroup label="浙江">
<option value="" selected="selected">杭州</option>
<option value="">衢州</option>
<option value="">丽水</option>
</optgroup>
</select>
<input type="submit" value="登陆" />
<input type="reset" value="重置按钮">
<button>按钮</button>
</form>
示例2：
<form action="" method="" name="">
<table cellpadding="10" cellspacing="0" border="1" width="500" bgcolor="#adeaea" align="center">
<tr >
<th colspan="2">用户信息填写</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="" value="" maxlength="10" size="12"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="" value="" maxlength="10" size="12"></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" value="" checked="checked" />
女<input type="radio" name="sex" value="" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="" value="" />唱歌
<input type="checkbox" name="" value="" />跳舞
<input type="checkbox" name="" value="" />打游戏
<input type="checkbox" name="" value="" />敲代码
<input type="checkbox" name="" value="" />散步
<input type="checkbox" name="" value="" />健身<br />
<input type="checkbox" name="" value="" />爬山
<input type="checkbox" name="" value="" />钓鱼
<input type="checkbox" name="" value="" />花花
</td>
</tr>
<tr>
<td>家乡</td>
<td>
<select name="" id="">
<optgroup label="海南省">
<option value="">海口</option>
<option value="">三亚</option>
<option value="">琼州</option>
</optgroup>
<optgroup label="浙江">
<option value="" selected="selected">杭州</option>
<option value="">衢州</option>
<option value="">丽水</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="" cols="50" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>提交</button>
</td>
</tr>
</table>
</form>
13.框架集的运用：
DTD的框架集类型
HTML窗口分帧
如果使用框架集实现窗口分组
1）HTML窗口分帧：
把浏览器的窗口分割成多个窗口，并且把每个窗口都可以显示独立的网页
2）如何实现使用框架集进行窗口分帧
frameset标签 ：<frameset></frameset>
属性名 属性值 说明
rows 固定像素数值|百分比|*（星号表示平均分配） 横向分割框架
cols 固定像素数值|百分比|* 纵向分割框架
border 像素数值 边框宽度
frameborder 1|0 是否显示边框（1表示显示，0不显）
frame标签： <frame></frame>
属性名 属性值 说明
src url URL的链接地址
name 字符串 窗口名称
scrolling no 是否显示滚动条
noresize 布尔值 控制边框能否被拖动（默认可以被拖动）
noframes标签 <noframes></noframes>
作用：noframes 元素可以为那些不支持框架的浏览器显示文本。noframes 元素位于frameset元素内部
iframe标签 ：<iframe></iframe>
可以作用于普通的过渡型HTML页面，形成画中画效果。
示例1：
<html>
<head>
<meta charset="utf-8">
</head>
<frameset rows="200,*" border="2"><!--一般框架集用户后台的系统-->
<frame />
<frameset cols="200,*">
<frame noresize="noresize"/>
<frame noresize="noresize"/>
</frameset>
</frameset>
</html>
14. css内容概要：
1）css定义： Cascading Style Sheets 层叠样式表
2）css作用：用于修改和美化网页。优势：实现页面结构和表现形式的分析，便于文档的维护和更新。
3） css的书写形式：
第一种： 外部加载的形式（前端开发中最常用的形式，便于文档的维护和更新）
<link rel="stylesheet" type='text/css' href="外部样式表URL地址" >
第二种： 头部形式：在<head></head>标签里
<style type="text/css">
css样式
</style>
第三种： 内联形式
<p style="css样式">我是段落</p>
示例：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./mystyle.css">
<style>
#blue{
color: blue;
text-align:center;
}
</style>
</head>
<p id="red">段落1</p>
<p id="blue">段落2</p>
<p style="text-align: center;color:pink;">段落3</p>
</html>
4）css语法结构：
选择器 {属性1:值1; 属性2:值2; 属性3:值3;}
15.css选择器
1）通配选择器：使用 *
示例：
<html>
<head>
<meta charset="utf-8">
<title>通配选择器</title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<p >段落1</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
</ul>
</body>
</html>
2）标签选择器：直接使用标签名匹配
示例：
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style>
h2{width:200px;height:300px;border:1px solid red;text-align:center;}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<h2>3</h2>
<h3>4</h3>
</body>
</html>
3）类选择器：class --->使用点号（.）
示例：
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
.tag01{color: red;}
ul{list-style-type:none;}
.tag02{list-style-type:none;}
</style>
</head>
<body>
<p class="tag01">段落1</p>
<h1>我是标题</h1>
<ul class="tag01">
<li>我是列表1</li>
</ul>
<ul class="tag01 tag02">
<li>我是列表2</li>
</ul>
</body>
</html>
4）id选择器：id-----#
示例：
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
#tag03{color:red;}
</style>
</head>
<body>
<p id="tag03">我是段落</p>
</body>
</html>
5）群组选择器：匹配多个标签，可以使用多个选择器
示例：
<html>
<head>
<meta charset="utf-8">
<title>群组选择器</title>
<style>
li,td,.tag_p,#tag_h1{color: blue;}
</style>
</head>
<body>
<p class="tag_p">我是段落</p>
<h1 id="tag_h1">我是标题</h1>
<ul>
<li>我是列表</li>
</ul>
<table>
<tr>
<td>我是表格</td>
</tr>
</table>
</body>
</html>
6）后代选择器：从一个节点选它的所有子节点，以及子节点的子节点，不停地迭代，匹配到所有后代。
示例：
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style>
table a{text-decoration: none;color: red;font-size:1cm;}
table h1{color:blue;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<h1>我是标题</h1>
<p>
<a href="http://www.baidu.com">百度一下</a>
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
7）子代选择器:只有父子级的关系，才能匹配到。使用 > 。父级元素>子元素
示例：
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style>
table div>h1{color:blue;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<h1>我是标题</h1>
<p>
<a href="http://www.baidu.com">百度一下</a>
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
8）属性选择器：属性选择器，利用到了标签后的属性进行匹配。
示例：
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
[title]{width: 200px;height: 200px;}
img[title][id="tag01"]{border:1px solid red;}
</style>
</head>
<body>
<img src="file.png" alt="" title="img01" id="tag01">
<img src="file.png" alt="err02" title="img02" id="tag02" class="tag02">
<p>我是段落</p>
</body>
</html>
9）相邻兄弟选择器: 同级的，且相邻的。兄的弟弟
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
td + td{color:red;} /*只匹配到小娃*/
.tag01 + p{color:red;} /*匹配tag01的下一个p*/
</style>
</head>
<body>
<table>
<tr>
<td>王家-大娃</td>
<td>王家-小娃</td>
</tr>
<tr>
<td>李家-大娃</td>
<td>李家-小娃</td>
</tr>
</table>
<p>1</p>
<p>2</p>
<p class="tag01">3</pclass>
<p>4</p>
<p>5</p>
</body>
</html>
16. css中伪类： 也是css选择器的一种。
a:link {} /*未访问的链接*/
a:visited {} /*已经访问的链接*/
a:hover {} /*鼠标移动到链接上*/
a:active {} /*选定的链接*/
示例：
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
a:link{color:red;} /*点击前的样式 谷歌浏览器对这个支持不是很好，其他三个可以*/
a:visited{color:green;} /*在点击浏览过后的样式*/
a:hover{color:blue;} /*鼠标悬停在超链接上的样式*/
a:active{color:pink; } /*鼠标点击时所表现的样式*/
</style>
</head>
<body>
<a href="http://www.baidu.com">点击跳转到百度</a>
</body>
</html>
17.常用的css属性
1)字体属性：
属性名 属性值 说明
font-family 字体 修改字体
font-size px、cm、% 修改字体大小
font-style - normal (正常) 字体峰风格
- italic 斜体
font-weight(磅重) normal（正常） 对h1等标签无效
bold 加粗：
示例：
html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
h1{font-family:"幼圆","黑体";font-size:50%; }
h2{font-family: "宋体";font-style:italic;}
h3{font-size:30px;}
p{font-weight:bold;}
</style>
</head>
<body>
<h1>第一段</h1>
<h2>第二段</h2>
<h3>第三段</h3>
<p>我是第四段</p>
</body>
</html>
2）文本属性：
属性名 属性值 说明
letter-spacing 长度 字母间隔 ，允许使用负值
word-spacing 长度 文字间隔
text-decoration underline下划线
overline 上划线
line-through 删除线
none 无
text-align left 坐对齐
right 右对齐 文本对齐方式
center居中对齐
justify两端对齐
text-indent 长度或百分比 文本缩进，若为百分比那么视父级元素的宽度而定
line-height 长度或像素 行高
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{text-decoration: underline;text-align: left;text-indent:2cm;}
h2{text-decoration: overline;text-align: center;line-height:40px;border:1px solid red; font-size:5px;}
h3{text-decoration: line-through;text-align: right;}
p{word-spacing: 22px;}
</style>
</head>
<body>
<h1>第一段</h1>
<h2>第二段</h2>
<h3>第三段</h3>
<p>我是第四段</p>
</body>
</html>
3）背景属性：
属性名 属性值 说明
background-color 英文单词 设置背景颜色
rgb
十六进制数
background-image 图片URL 设置背景图片
background-repeat repeat 平铺
repeat-x 横向平铺 背景重复设定
repeat-y 纵行平铺
no-repeat不平铺
background-attachment scroll滚动 背景是否随滚动条滚动
fixed固定
background-position top
bottom
center
left
right
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
background-color: pink;
height: 1200px;
border:1px solid blue;
}
.div2{
background-image: url(file.png);
height: 200px;
border: 1px solid blue;
background-repeat: no-repeat;
background-position:center;/*还可以使用两个修饰 top left。即左上*/
background-attachment: fixed;/*不滚动*/
}
.div3{
height: 1200px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
4) 边框属性：
属性名 属性值 说明
border-color 英文单词、rgb、十六进制 边框颜色
border-width 像素 边框样式
solid
dashed虚线
double双实现
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
还可以使用缩写方式写上、下、左、右边框单独css样式：
1.）1px 黑色虚线上边框
border-top:1px dashed #000
2) 1px黑色实现下边框
border-bottom:1px solid #000
左右同理
18. 盒子模型：
1）盒子模型：
布局方式，由于table布局转变为div布局，页面有多个盒子模型组成
2）盒子模型的组成部分
Margin(外边距) - 清除边框外的区域，外边距是透明的。（最外层）
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。 （最里层）
border (边框)
border-top
border-right
border-bottom
border-left
padding (内边距)
padding-top
padding-right
padding-bottom
padding-left
margin (外边距)
margin-top
margin-right
margin-bottom
margin-left
content(文本区域)
3）内联元素和块级元素
内联元素：
<a></a>
<i></i>
<u></u>
<b></b>
<span></span> 文本标签。
<font></font>
<select></select>
<br />
<img />
<input />
等
块级元素：
<body></body>
<div></div>
<hi></h1>~<h6></h6>
<ul></ul>
<ol></ol>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>
<form>
等
区别：块级元素独占一行，可以设置宽高、内边距等，而内联元素不能设置宽高，和上下内外边距。19.相对定位和绝对定位
1）相对定位：
相对于原来的位置发生变化，并且保留原有的空间位置
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 1px solid blue;width: 200px;height: 100px;position:relative;top:20px;left:50px;}
/*距离原来的自己的位置，偏移了，距离原来的顶端20px，距离自己的左端20px*/
.div03{border: 1px solid pink;width: 200px;height: 100px;}
</style>
</head>
<body>
<div class="div01">第一个盒子</div>
<div class="div02">第二个盒子</div><!--对他进行相对定位-->
<div class="div03">第三个盒子</div>
</body>
</html>
2）绝对定位：
绝对定位相对于他有position属性的父级元素进行定位。
如果父级元素没有position定位，那么就找父级的父级，知道向上找到position定位为止。
如果他向上找不到position定位，那么就以最外层的boby进行定位。
并且，绝对定位不会保留原有的位置空间。
绝对定位有四种值就改变他的位置：top 、rigth、bottom、left.
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 1px solid blue;width: 200px;height: 100px;position:absolute;top:20px;left:50px;}
/*因为没找到父级的,或父级的父级的position，所以就直接相对于body进行定位。*/
.div03{border: 1px solid pink;width: 200px;height: 100px;}
</style>
</head>
<body>
<div class="div01">第一个盒子</div>
<div class="div02">第二个盒子</div><!--对他进行绝对定位-->
<div class="div03">第三个盒子</div>
</body>
</html>
z-index属性：
确定层级大小，用来设定哪一个盒子在上面。20. 浮动
1）浮动效果：
满足我们的页面排版要求，是竖列的盒子横向的排列起来。
副作用：因为浮动元素脱离了标准文档流，会导致父级元素无法被撑开。
解决方式：清除浮动负面效果（三种方式）
1.1）添加空盒子：
较为流行
缺点：为清除浮动，页面添加的多余空盒子太多，新手容易蒙
做法：在被浮动元素的后面（同级元素）添加一个空的div，并且定义一个clear类，赋给该div
.clear{clear:both;}
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{border:1px solid red;}
.box01{border:1px solid blue;width: 200px;height: 200px;float:left;}
.box02{border:1px solid green;width: 500px;height: 200px;float: left;}
.clear{clear:both;}
</style>
</head>
<body class="div00">
<div class="box">
<div class="box01">我是第一个盒子</div>
<div class="box02">我是第二个盒子</div>
<div class="clear"></div>
</div>
</body>
</html>
1.2) overflowe:hidden 、较简单、兼容性较好，负面效果较少，但不推荐使用。
定义clear类，并把clear类赋给浮动元素的父级元素
.clear{display:block;overflow:hidden;}
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{border:1px solid red;}
.box01{border:1px solid blue;width: 200px;height: 200px;float:left;}
.box02{border:1px solid green;width: 500px;height: 200px;float: left;}
.clear{display:block;overflow:hidden;}
</style>
</head>
<body class="div00">
<div class="box clear">
<div class="box01">我是第一个盒子</div>
<div class="box02">我是第二个盒子</div>
</div>
</body>
</html>
1.3)最流行也是最常用，可兼容的：
定义clear类，使用为元素：after,并把clear类赋给浮动元素的父级元素。
.clear:after{display:block;clear:both;content:"..";visibility:hidden;height:0;}
.clear{zoom:1;}
示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{border:1px solid red;}
.box01{border:1px solid blue;width: 200px;height: 200px;float:left;}
.box02{border:1px solid green;width: 500px;height: 200px;float: left;}
.clear:after{display:block;clear:both;content:".";visibility:hidden;height: 0;}
.clear{zoom:"1";}
</style>
</head>
<body class="div00">
<div class="box clear">
<div class="box01">我是第一个盒子</div>
<div class="box02">我是第二个盒子</div>
</div>
</body>
</html>- 21.
扫一扫
4221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
