正文
前端 CSS 基础
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS概述
CSS全称：层叠样式表 (Cascading Style Sheets)。CSS使得网站可以：创建文档内容清晰地独立于文档表现层。
样式表定义如何显示 HTML 元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS基本语法
CSS包含在style{}中，规则由两个主要的部分构成：选择器，以及一条或多条声明，每条声明由一个属性和一个值组成。多个声明用“;”隔开。
CSS优先级
单独css文件
html头部<style> </style>
标签属性
优先级：标签属性> html头部> 单独css文件
CSS选择器
分类：
1.标签选择器
文档的标签名就是最基本的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
div{
color:green;
}
</style></head>
<body>
<div>baidubaidubaidu</div></body>
</html>
2.id选择器
ID通常在文档中是唯一的，因此常用来当做选择指标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--标签选择器-->
<!--<link rel="stylesheet" href="common.css /">-->
<style>
#i1{
font-size: 56px;
color: green;
}
</style>
</head>
<body>
<a id="i1">baidu</a></body>
</html>
3.class选择器
类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*class选择器*/
.c1{
background-color: red;
}
</style>
</head>
<body>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a></body>
</html>
4.层级选择器
按照一定层级，逐层进行匹配。
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*层级选择器*/
.c2 div p a{
background-color: red;
color: white;
} </style>
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>ooo</span>
<a class="c3">uu</a>
</p>
</div>
</div></body>
</html>
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 div p .c3{
background-color: red;
}
</style>
</head>
<body>
<div class="c2">
<div></div>
<div>
<p>
<span>ooo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">dddd</div></body>
</html>
5.组合选择器
用逗号“，”分隔，可以用来对多个元素或者标签、class进行装饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">C4</div>
<div class="c5">C5</div>
<div class="c6">C6</div></body>
</html>
6.属性选择器
c1[alex='a']{....}，表示选择class是c1且标签属性包含alex='a'的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1[baidu='a']{
color: red;
}
</style>
</head>
<body>
<div>
<div class="c1" baidu="a">1</div>
<div class="c1" baidu="b">2</div>
<div class="c1">3</div>
<div class="c1" baidu="a">4</div> </div></body>
</html>
CSS属性（声明）
CSS背景
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。eg: background: #00FF00 url(bgimage.gif) no-repeat fixed top; |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。fix则可以声明图像相对于可视区是固定的 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。top、bottom、left、right 和 center |
| background-repeat | 设置背景图像是否及如何重复。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。 |
CSS文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
CSS字体
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | 设置字体系列。 |
| font-size | 设置字体的尺寸。 |
| font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
| font-stretch | 对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
| font-style | 设置字体风格。 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 设置字体的粗细。 |
CSS链接
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
实例
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
常见的链接样式
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：
实例
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景色
background-color 属性规定链接的背景色：
实例
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
CSS列表
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
| marker-offset |
CSS表格
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
CSS框模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而且宽度有百分比,按照父块级的百分比占比。但是height是没有百分比的。
CSS内边距
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。书写顺序为上右下左 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
CSS边框
在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
CSS外边距
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
CSS外边距
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
CSS定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
display属性
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改 变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
display 属性规定元素应该生成的框的类型。常用的属性包含下面几个：
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
CSS定位属性
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。值可以是absolute,fixed,relative.默认为static |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。默认为visible，可以是hidden,scroll,auto. |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
补充：
- position 三个值。三种情况：fixed, absolute, absolute+relative
- fixed fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
- relative 与absolute结合使用，用来将absolute的位置固定到relative的块中，只认relative
- absolute 按照当前浏览器窗口固定位置，但是浏览器滚动时会移动<br> position的三种使用方式：fix, absolute, absolute+relative
- z-index 显示优先级，数字越大，优先级越高
难点解析：position
http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
举几个例子：
1.fixed #固定在窗口的固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:1000px;background-color: #dddddd"></div>
<div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div></body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABD0AAAIJCAIAAAAprdGuAAASA0lEQVR4nO3d23PUZZ7H8fkP9n6v9mZvrLlwd3Rr1qll0BmMMwgqKiQRCCAKBhI04BgQDTiIQeWgrAiIEEQExHU4KQSVTsIpJOEUQsihDwbd2irL/2H3gqyjW87e8rl4vW66up+nq6ueq++7fv3r/sV/AwAAZPvFd999VywWSwAAAHmKxeL333+vWwAAgFy6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAAgHS6BQAASKdbAACAdLoFAABIp1sAAIB0ugUAAEinWwAASPTX6bRYKpVK5R+USsXiaLF4a738N5VK/+/y+JZisVQq/vBR448/3WBIjqBbAABIVBwaPLRj06FzA+VyceBK7+nOjkKh0NHZcWTfliVzahY0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" alt="" />
2.absolute #随窗口的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:1000px;background-color: #dddddd"></div>
<div style="position: absolute;right: 200px;bottom: 100px;">返回顶部</div></body>
</html>
效果：
aaarticlea/png;base64,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f8ppn7nw9A8ouZRPLz/dXdOn65mZTM8AADCTTfbH6ajInzn66YH8hdGRP/fh9Lf73AWfO8cSszD0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAESlZwAAgKj0DAAAEJWeAQAAotIzAABAVHoGAACISs8AAABR6RkAACAqPQMAAET12Z75X8GcCmFfT9RVAAAAAElFTkSuQmCC" alt="" />
3.relative和 absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:500px;width: 400px;border: 1px solid red;position: relative">
<div style="position: absolute;bottom: 0;right: 0;">返回顶部</div>
</div>
</body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmMAAAIUCAIAAADZjbxTAAAOlElEQVR4nO3cwVGjBxpFUeIiIMWjOCYAVpPDBEAGk8GsPAsaJCTxw5SvPdWvzqmvymDU0AvXuyUsePoDAPja08dbr//+j3POOeduTimdc865o1NK55xz7uiU0jnnnDs6pXTOOeeO7lLKf/zzX84555y7uUspAYB7SgkAR5QSAI4oJQAcUUoAOKKUAHBEKQHgiFICwJEflPLpyTnnfqeD1M9KCfC7MFnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0pgi8mippTAFpNFTSmBLSaLmlICW0wWNaUEtpgsakoJbDFZ1JQS2GKyqCklsMVkUVNKYIvJoqaUwBaTRU0pgS0mi5pSAltMFjWlBLaYLGpKCWwxWdSUEthisqgpJbDFZFFTSmCLyaKmlMAWk0VNKYEtJouaUgJbTBY1pQS2mCxqSglsMVnUlBLYYrKoKSWwxWRRU0rg1svp+fx68PHX8/PT09PT09Pxw2ovpx99RZNFTSmBOy+np6fTy9vbH1m88v6xrx/x0PP59cGDT6fT13/k81e6beXdJ3s+v5osckoJPHBp5ev5+aZXt75/xK8HXUfuOsbf/8svKvrpK7//YZNFTSmBRz4i9DeW8uX0xXdXX8/PN08l3969+sqXz2+yqCklcOjge6tXkfr15qPnf5enpl+U8uuvcEnpVURv8vj25tXHTRY1pQQ++YjdfQevXIfvcyk/PSu8fOibUt5/hdsnnS+np9PLzYPf3/n0WJNFTSmBe3fP224S+LBXf/z5Ut48PX2v4FdPOc9vD397Uvr+9zFZ1JQSuPc5Xs/nl9eXqxrdVO+vLeUP/5qXl8WaLGpKCdx7HL/L07svcvh/LOXlK5gsakoJ3Hv4Uplf796GMnlFz+MsH73k5+5/Wr6/Z7KoKSVw7yNB16F8y+Dp5f2fdw/+088pr8t39JKf948pJX8LpQTuvV5eKnP9i3U+/ZT/N69dffAZf/DzlDc/HPLpb/P5gfel/JVpk0VNKYFb799ifTk/P59fX8/Pj37f6iV9TSlfz8/XL3a9/thxKc8f35v1ih7+GkoJfPJyemvOR7m+9T/93tfLM8dLN98+wf0vdD361bMPnlP+YrKoKSXwyev59JGsg59l/K5X95/2+cET0wdPIB/8iR9+9/UXk0VNKYEtJouaUgJbTBa1n5XSOed+o4OU/6QA4IhSAsARpQSAI0oJAEeUEgCOKCUAHFFKADiilABwRCkB4IhSAsARpQSAI0oJAEeUEgCOKCUAHFFKADjyX8N5oxucKP/rAAAAAElFTkSuQmCC" alt="" />
4.relative和 absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
<div style="height: 200px;background-color: red">
<div style="position: absolute;bottom: 0;right: 0">返回顶部</div>
</div>
</div></body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaIAAAIDCAIAAADJwY3uAAAJA0lEQVR4nO3b243aCgBFUdflglyPq3EzFJP7wcsYA57J5EbZWktbyhA8wNeRGcPwCyBt+NsvAODPMnNAnJkD4swcEPc4c8MgSf9SZk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeGZOUjwzJymemZMUz8xJimfmJMUzc5LimTlJ8cycpHhmTlI8MycpnpmTFM/MSYpn5iTFM3OS4pk5SfHMnKR4Zk5SPDMnKZ6ZkxTPzEmKZ+YkxTNzkuKZOUnxzJykeN+ZOYB/hZkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgDgzB8SZOSDOzAFxZg6IM3NAnJkD4swcEGfmgI+WaZxPb+4/zeMwDMMwvD/spy3ToWc0c8BnyzQM03L++bZpK9f7Xh+xa5xPOwdP0/T6Vx6faTt0Tw82ziczBxxyH7rTPG7GZuvzEZeD1gu1XtLP//liAh+e+frLZg445LYg/+PMLdOLN6WnedycxJ1vrp75/vhmDviaN29JVwtz+XHvzOt+Uvhi5l4/w30HVwu42bbzj6v7zRzw3m2pnkdsZb1ajzP3cD52v+vDzD0/w/Z0b5mGadkcfL3xcKyZAw54OmPa7Nfu2Pz6/ZnbnBheJ+zVyd58Pvx8Onh9PWYOOOBxecZ5OS2rKdlM1p+duYMv834R1swBB+wv1/3E6sWW/cWZuz+DmQMO2P3b/uXmduV+5BLE/qa+u0bx9Ie66y0zBxxw24/1yp03bFqu/z4d/Ntnc+vZeneN4nqfmQO+63T/2/76qwsPH8X9cKV05xEPfG5u8zmSh1fzeODzzF021swBH13fmS7zOM6n0zzufZf0vls/M3OneVxfWl3f937m5ttbWpcggCOW6TwYt9n56Evfab2fs91H7/wAz19Wffe12p2zuQszB7x3mqfb3rz5zNqnsXl+2HHnlHDn1G3nNw6+ab0wc0CcmQPivjlzkvQP9eWZA8gxc0CcmQPizBwQZ+aAODMHxJk5IM7MAXH/AbRg8GlWJzYJAAAAAElFTkSuQmCC" alt="" />
5.标题栏固定（老男孩字体会随着窗口的移动而移动，但是标题栏不会移动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background-color: #2459a2;
}
.pg-body{
height: 2000px;
margin-top: 48px;
}
</style>
</head>
<body>
<div class="pg-header">百度</div>
<div class="pg-body">老男孩</div></body>
</html>
效果：
aaarticlea/png;base64,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6S88fn/RwMKfrv6fQ3x+AADAZ99H7ZbtNW/97om1a9asWbt2bcXVF7XvcNzcZSvWrl2zevWalza+vuaBijPGljz76ttNB6+449rUdt3OLJ5aVlY2tXhcp5RjcgacXFZWdlZZ2aD83u36jl5fvTOKoqr1vz/7rGlTiktGDitomdjqklk/WHzn/Ip5826Z8+20jscMHDH5toqKioq5dy/7+dade/5DfwMAACBsH7Vbnvrt/QX5A/v37z9gwIDsjK7NWrTq0St3QP/+AwcMmDRxSl6vzDElM6trapsOXnHHdcfnjX/mbxurqqpefXnd5BP7n3vNba9XVVVVVT1428yc/DHrN++Ioqihvm7Xrl07t2+96eIZ6X0Klz3wwJfPmlo8aWznDsd2yOwxcdLkadOmlZaUnPPN66ve2f0f+hsAAABh+6jdsve9nZuqql5//fVNmzbdd+u1qen9K9es21T1+sqfL8qNtRt0eulLm9/dd/Ajd89q17btsJGjTj/99NGjvpCaktQl1mPM2NPHjh1b1Duna+7YF6p37jt43aplx3VL+84tD+ypq6utrV336PIeaZmzFz+6c/vbf/j9n954853a2vf2vQMNAAD4f+5Dd8vWLa+tWvWblStXrly5ctVjj916xTdSO/a87d4Vj1QuHZzXo0VK5g23LV65cuWf/vLi3vrGKIpW3HFd79xTf/7r365Zs+bxlb8Y2b/3lIuuX7N27dq1ayu+85XuA8esP2C3LL1uRt9TJr2xbU8URdu2bJw26tTTJl32Tm39HyvvOK7ngEeefPk/c/IAAMBnwofuliceml9UkNckPz8/Pz8vK71rYkJCQkJSZnaPvrnH5+efkJeXd85VP96xp2m3XJOZXfC9H906d27FbTd/f2C82xemnFNRUVFRMffLZad36Te66X1iTe69vrzvsNLl99332OrVV547rfkRncvP/fbs675zQq+sEWWXvbjhlS1vvdPoegsAABBF0Ufslt07tm3e/MbmzZu3bNnyxuuv/Prn94w+oV9KSvrXv3Pz+pdeq66u3vLmm1uqq7fWbG9ojKIoeuEPvzh3xvTy8vLy8vIZZWUTxk+YVja9vLz8i18snz79rPNnztlcUxs1Nry8/s/LFt816ZR+zZu3TM/sWbH8pzde8+0vnn3ujNEjkhOO6HbSaU8889xl00eUfXPO9j0+ExkA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" alt="" />
CSS浮动
在 CSS 中，我们通过 float 属性实现元素的浮动。可能的值如下：
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
- float 漂浮 ，一定要有宽度限制，如果超过100%，则漂到下一行s7
- clear：both 相当于把漂起来的元素拉回父元素中,必须在最后一个div之后加
实际案例分析：
<div style="border:1px solid red;width:500px;"><div style="background-color:red;width20%;float:left">111111111111111</div>
<div style="background-color:green;width:80%;float:left">2222</div></div>
上边的代码测试的时候，会明显看到一个现象，父标签的红色边框，被遮挡住了部分
子元素没有把父元素的高度给“撑”起来。这种情况在实际中是需要避免的，解决方法如下：
<div style="border:1px solid red;width:500px;"><div style="background-color:red;width20%;float:left">111111111111111</div>
<div style="background-color:green;width:80%;float:left">2222</div>
<div style="clear:both"></div></div>
加上clear:both之后，就会发现，所有的子元素又重新回到了父级边框中。最终变成了这样
案例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height: 500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">浮漂</div>
<div style="width: 80%;background-color: beige;float: left;">浮漂</div>
<div style="clear: both;"></div>
</div></body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAf4AAAH+CAIAAADyDftyAAAJ9UlEQVR4nO3cPVJiaQBG4a+31BHFSjomYBWugIgNuAYzMzdBSm/D2AkA+RHEmdG2mvM89QZdSlf1UFPn4ofc8QJAzPjufwAAf5r0A+QcpH8MMzO7zb2T/h8vL/bBPT//NjP7Kyb90m9muUm/9JtZbtIv/WaW26en/3GM6Vi//Hh5GfNxxXL97b3+1vTfz8bPxer38/Pvh9mVp2qyePr2/1fM7GZ2Nf3rMR3j8WLvDvo+337lcT7G0V8Zj/MxXe6+Nf/2Rn9Z+p8WkzF7uPhcH/T918Pmiw+/xjj+Kw+/xuRutf3W7mFmZp+6D6R/OR9jjPnjtuknzl0VThLfSf9q8WuMMWb3m6afOH9VOEm89JvZ1+9DBz5jvRxjOtaPr60f8zHmjwffPXMNGMvpu2cYt3YN2D6nq7vJ+LlY3c92rX+YjTG7P/jumWvAavHz3efKNcDMPnNX0j+W09fE/3h5OTjKX4/pGMv1yfHO4eNf//z2Vf9YL28v/avFz33in38fHOU/LSZjsng6Od45fPz+z29f9a/uJtJvZp+6a+nfvKL/cKbH+nFMxzb0tfSv7mb/5hX6anW/mIxN6KXfzP7kPnLgs32Bv/3DJfsDn90PBMUDn90L/OenxeTif/nBgc/28Q58zOxP7v/+cuf2x4KjQ6Horj/dq7vJGMeHQmZm37CPpH//7u5p9+fj0reOLgyBl/y79O/f3T3Z5jc73/nVz+2FwUt+M/v6XU//5lz+csQPTJfvXypue8/Pu3P5ixE/sDnQv3ypMDP7un0g/cvprulHe33z9vTr27dwH69fKm7rmOh5827ttunHe33z9mTbt3Dvr32Y1zGRmX3mPvZp3nN3XLiY/kuXivmt3bnhTfpf3+N980RfSP+lS8XDzJ0bzOwLdzX9lw/6L6X/KPH7+0Dsvr6/yc+N7b3TmwvpP078/j4Qu6/vb/JjZvaJu/Z7/W9uvXB0O4czr+IPPvF79Gmv3W98rtfbx5y7bPzVO3PrhYPbOZx7FX9wqTj6tNfup4fV02pzFnT2sMjM7L/uk+/cuf/Q1nwcfIxre7R/9MjTzwn/9fvXz/7uUvEwGwcf49o4uoS8+Zywmdn/mvv1f1/6zcy+adIv/WaW25X0vwBwe6QfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFypB8gR/oBcqQfIEf6AXKkHyBH+gFyrqTfzMxuchfTD0CD9APkSD9AjvQD5Eg/QM4//kQMQRqJV60AAAAASUVORK5CYII=" alt="" />
CSS尺寸
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
Ps:想利用宽度的百分比,一定要在父元素定义好width是多少像素
CSS分类属性
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素。left表示在元素左侧不允许浮动，同理right，both表示在两侧都不允许。默认为none，表示允许两侧。 |
| cursor | 规定当指向某元素之上时显示的指针类型。常用的有move,pointer,wait,text。默认为auto |
| display | 设置是否及如何显示元素。默认inline。此元素会被显示为内联元素，元素前后没有换行符。常用值为none,inline,block,inline-block |
| float | 定义元素在哪个方向浮动。 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| visibility | 设置元素是否可见或不可见。默认为visible，还可以是hidden。collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
其他属性
- opactity: 透明度(0-1 1为不透明)
inline-block 默认会有3px的宽度img标签的边框， 在IE浏览器中会显示出来。所以为了兼容IE，需要将img的border-width设置为0px;CSS中的属性，经常会被其他优先级的属性覆盖掉。为了保持本身的特性，可以在属性后加“!important”来提高优先级。比如：color: red !important;
CSS伪类：hover :after :before
利用伪类实现清除浮动。之前的方法中，清除伪类的方式是，在父级div里，写一个新的div，给予属性“clear:both”来实现。如果使用伪类的话，可以按照如下代码来实现：
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
只需要将clearfix添加到父级的class属性中，就可以实现自动清除浮动了。
更多伪类的用法查看：http://blog.dimpurr.com/css-before-after/
练习
再写两个例子：
1.带图标用户密码输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon-name{
background-image: url("i_name.jpg");
height: 16px;
width: 16px;
display: inline-block;
}
.icon-pwd{
background-image: url("i_pwd.jpg");
height: 16px;
width: 16px;
display: inline-block;
}
</style>
</head>
<body>
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;"/>
<span class="icon-name" style="position: absolute;top: 2px;right: 0;"></span> </div> <div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;"/>
<span class="icon-pwd" style="position: absolute;top: 2px;right: 0;"></span>
</div></body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlAAAADGCAIAAACSICllAAANbElEQVR4nO3d25aiOh6A8Xn/l5rX8MBZURAQxAOHBGou/qspRruq7d29ZrLI97tyuy3bq3yLQJJ/fQAAYIF//b9/AAAA/wsEDwBgBYIHALACwQMAWIHgAQCsQPAAAFYgeAAAKxA8AIAVCB4AwAoEDwBgBYIHALACwQMAWIHgAQCsQPAAAFYgeAAAKxA8AIAVCB4AwAoEDwBgBYIHALACwQMAWIHgAQCsQPAAAFYgeAAAKxA8AIAVCB4AwAoEDwBgBYIHALACwQMAWIHgAQCsQPAAAFYgeAAAKxA8AIAVCB4AwAoEDwBgBYIHALACwQMAWIHgAQCsQPAAAFYgeAAAKxA8AIAV/kLw/g0AC/LnoyLM9HeC9+dfAgAmYEBbMIIHAJ8Y0BaM4AEw0TAMwzBM/zmO4/1+r+s6TdPD4eA4zna73W63juMcDoc0Teu6vt/v4zh+9Q1vYkBbMIIHwETzXA3DoLWu67osyyRJ4jieBy+O4yRJyrKs61prPf8rgoc5ggfAFJKocRyfLtSqqsrz3PM8x3E2m81ms3Fd13Vdz/M8z5N3HMfxPK8oisvl8nRpOHnnNzCgLRjBA2CK1+CN46i1zvM8SZLtdrterx3HcV03CIIwDKMoCsNQrvbW6/V2u03TtCgKrfX8GwgeBMEDYKhxHG+3W1VVURT5vu95XhAEWZaVZfl4PNq2bdv28XiUZZllme/7ruv6vh9FUVVVt9vtzcI9YUBbMIIHwFDjOF4ul6IogiDwPE9iJvfqlFJaa621Uqqu6/P5LFGUiz+Z2CR4eELwAJhoHEelVJIk+/1+vV5vNhu5tuu6Tik1/2Tf923bynXeZrNZr9f7/T5JEqXUP2geA9qCETwAJpLgxXEchqHcnzufz9O13fyT8+s8uZkXRdHhcCB4eELwAJhlWk6gtd7tdnL3LgzDpmmkYU8Zk3f6vn88HmEYyuTnbreTLv7u4gQGtAUjeADMMiVKKSXBc103DMOu614XLXz8CJ7Wum3bMAzl0ZXdbicznwQPE4IHwFBKKd/3ZZbSdV0J3lcfluC5risfDsPw6VbfmxjQFozgATCUUioIAsdxpGFt2z7dvXv6cNM0BA/fIHgATPE0/ai1Ph6Pu91OdlGR1XUyq/n0V1rr6/ValqXsxrLb7Y7H47yOLDzHB8EDYI7X4J1OJ9kq2nVdWV2nlHqa2FRKdV0n24+5rivbSZ9OJ4KHJwQPgKHGcZTFBp7nbbdbeVZzvjhhviAhCALXdeVj8hkWnuMJwQNgKDkS6HK5TDFzXferrcVkX2nZaeVyuTwdFfQ+BrQFI3gAzKKUmp43GYah7/s0TeM4DoJAlihM5yT4vu/7vuM4juP4vh8EQRzHaZr2fT9Ne8qF4Pv/OgPaghE8AGaZB09r3XXdPHibGTkST17Pg9d13RQ5gocJwQNginmcZC3560l40+l30xmwT+97npfneVVV80OC3s8eA9qCETwApphnSZ69zLLseDxK7SRyMp8pk5nzSU75v/Kx4/GYZdl8m2mChw+CB8A0Wuu+7+XQ16lhnuelaZrneV3Xt9utbduu67qua9v2drvVdZ1lWZIk8myLbDYt2ev7nilNCIIHwCx93zdNI/ft5Lgf3/fDMCyKoqoqeT5Tay2L9mRHMXlWM89zOTlvtVpNhwQ1TdP3/fv/OgPaghE8AAYZhkGWGcgsZRiG+/2+ruv7/T5F7mnh+VQ+pdT9fq/rer/fh2Eo85+n0+l8Pr+/fzQD2oIRPAAGGYZhum+33W7lqcv7/d62rXzgq9MSRNu29/tdrg632+206wrBwwfBA2AOuSEXRZE8lun7flmW1+v1df/Mr4zjOAyD7KspS/Q8z4uiSG77vfMNDGgLRvAAmOLxeFyv1ylUYRjWdf14PH5rz5RxHB+PR13XchishPN6vT4ej3f+nAFtwQgeAFPkeX46nWR1XZIkeZ7P19LNJzPlvt1XW0LLGr6iKNI0lW/Lsqwoind+AwPaghE8AKZI0/R4PE6JKstyfu/t/eDJB2TR+pTP0+n0zm9gQFswggfAFFEUydOVnuddr9emaaRnr8vG5w+qzN+fPjmOY9M01+tVZjXDMIyi6J3fwIC2YAQPgClk5xS56zZ/zOQfBO/jxyMw0xcGQfDOb2BAWzCCB8AU0+ZhYRg2TTNtDPY6mTn/q/k7808qpZqmCcNw2njsnd/AgLZgBA+AKeR+mwRPtlOR9/9Z8GQTFgmefPM7v4EBbcEIHgB8YkBbMIIHAJ8Y0BaM4AHAJwa0BSN4APCJAW3BCB4AfGJAW7C/EzwAWIw/HxVhpr8QPAAAzEfwAABWYEoTAP7Ln4+KMBMPrQDAJwa0BSN4APCJAW3BCB4As8xPPBjHcRiG+/1e13WSJHEce54ne2M6jrPf74/HY1VV1+tVttD86oS81/MWvsKAtmAED4BZ5nHSWiul6rouy/JwOOx2u3nwdrtdHMfn8/lyuSilvjkSluDhg+ABMNMwDEopObU8DEPf99fr9Xq9Xq1Wq9XKmfE8LwiC0+l0Pp/l2IRvTkL/JQa0BSN4AEykte77Ps/zJEnk1HIJ3maz2Ww2vu/Lya6O48iJQofD4XQ6aa1/ejDs+xjQFozgATDFFKpxHB+PR13XURTJtd1ms5EJzNPplGVZURRZlsmV33SpFwSBnJMuE5hyTt7vxo8BbcEIHgBTzIN3u92qqgqCwHXdzWbjOM7xeEzTtCzLqqqqqirLMo7jKIrkQPPNZuO67vV6laPSCR5eETwAxhmGoSzLLMu22+1mswnDMI7j+/3etu0wo5RqmiaKIpnz9Dwvz/Oqqp6ORP8tDGgLRvAAGGcYhvP5fDqdJHhRFB0Oh7ZtlVLygelGnVJqt9v5vu+6rud580dX/hkGtAUjeACMMwxDlmXH41GeSZkeSHn6mDzYUhRFmqaSxjiO0zRVSvHQCl4RPADGmQfPcRwJ3ut1mwRvPvlJ8PANggfALOM4aq1Pp9PhcJBl5l9d4X3M0ui6ruu6WZaVZSmL0J++880EMqAtGMEDYBa5MyfBkztzX13hfXx8DMMgU5q+7wdBUBTF5XKRRzSfvpPggeABMMv8Ck+u2+bBm6dLXvd937ZtURR5nj8ej7ZtX9tG8PBB8ACY5il40z08mdJ8DZ7cybtcLpfLpWmarut++p0EDwQPgHGGYZju4X0/pfnxI2avy8yVUtMyhvcxoC0YwQNgnOlRlF8+tPLxs2s+eU3w8ITgATCLUqrrOrnC833f8zzZaUUWG8g+ma9XdfO8vR4G9H78GNAWjOABMIUErG3b+/2epqkc9yqn/+z3+6Zp5PmUtm37vu/7vuu6ruvkxfS+Ukpezzchk3fe+Q0MaAtG8ACYIs/zLMv2+/18S2jZOdpxHDkSSBYq+D/InKfneVEUyaaaruv6vh+GYVEUZVlO37nb7d75DQxoC0bwAJgiSZLD4SCH/mxmtjPyjixXkNdyTp70T17LCXlpmmZZNv/Od34DA9qCETwApgjDMAgCqdp0uOt2u5XXUr4gCMIwlE/K9Zz83yl18udPn5Q33/kNDGgLRvAAmGJ+lfYaPJm63O/38Q9BEMgk52vwplPR59/5zm9gQFswggfAFPMpSoncarVarVa+70dRJNuGyeGusti8qqo8z13XlTlMKaLnefOJ0Pl3vvMbGNAWjOABMMVPgyf356Ioquv6fr/Pl9xdr9eyLH3fl+s/gofvETwAppBozSczZT5TliX0ff+6JXTf93IA7GveJH7z73znNzCgLRjBA2CKr4I3X3j+9Cdaawme/AnBwzcIHgBTPD2TKcsPpp1Wfrq1mNZalqiv1+vVauXMzCc2CR4+CB4Ac3wVPJnSfL3Ckx3FkiTZ7/cED79E8ACYYr6vynzhueu6QRBUVXW73aR5spFmXdfn89nzvKdMvj60QvDwQfAAmOOr4Mm+YrIsYQqe1lqWJciHCR5+ieABMMVPUydPoziOE0XR4XCYJja11sfjcbfbyTMp8+3H5t8zf/3Ob2BAWzCCB8AU3wfv6U6e1jqO4zAMCR7eRPAA4BMD2oIRPAD4xIC2YAQPAD4xoC0YwQOATwxoC0bwAOATA9qC/Z3gAcBi/PmoCDP9heABAGA+ggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGAFggcAsALBAwBYgeABAKxA8AAAViB4AAArEDwAgBUIHgDACgQPAGCF/wCZidS0BO4lmQAAAABJRU5ErkJggg==" alt="" />
2.对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal{
width: 400px;
height: 300px;
background-color: #dddddd;
position: fixed;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
z-index: 10; /*优先级*/
}
.shadow{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: black;
opacity: 0.6; /*透明度 ，范围0-1*/
z-index: 9; /*优先级*/
}
</style>
</head>
<body>
<input type="button" value="添加" />
<div class="shadow"></div>
<div class="modal">
<input type="text" />
</div>
</body>
</html>
怎么保证modal这一层在shadow这一层的外面？
使用z-index: 设置优先级，数字越大优先级越高
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3gAAAIDCAIAAADZniuvAAAgAElEQVR4nO3dd5RVVYLo/7LVjjPdb830dDttB9sAVVQCBCQYECMIVNXNOZxz9t7n3FsFqGRQMGDObUQliQERJQcT5tjdKqJIRQq1255+/d6b8N5vrZlWf3+c4lqnBCRMdd3N/X7WXq4CLsVZ949bX/c+e5+yLwEAAIBeUNbXFwAAAIAjE6EJAACAXlH25ZdfXjhj5QXTHz93+ooh4cuyznRlGjkplLSUNKQyhJJCWVJaUhlSSqEkAAAAsC+e0Lxg+uPnT1txzrTHTg3NzdjTCE0AAAAcMk9onj9txbmXPnr2pY8MDs5Jq6nKNBxhSWESmgAAADhYntA8b+pjZ1/6yOhLHh4UmO2Gpq1EV2hKSyg3LglNAAAAfDNPaI6Z+ujoSx4+6+LlNYFZaWeabQlH2dJdOic0AQAAcDB6huZZFy8/4+KHagKz0vYM2RWaUkmre2gqaUlCEwAAAPvlCc3Rlzx85pSHTp+yrCowM6WmF0JT7i00pbT78LoBAABQ5DyhedbFy0+fsmzk5KWV/hlJOU1aQiklhJDSEsoS0iY0AQAAcIA8oXn65OVnTHl45OSlA3zTk84MaQkppVJKKWHnlJB21jSEMC0zO2rUqMGDh1TvQ3l5+eDBg6uqqmpra8vLywcOHFhTU1NRUVFbW1tdXV1TU1NeXl5TU1NdXT1w4MCqqqqampqqqqrKysqqqqrCN3FfsFe1tbVVVVVDhgwZNmyYbdv5fD6dTts24QsAAFBEeobm6Rc/PGLSkgENM7uHppRWxkgbpsg3NUopR444bcyYc8PhqNiHfD6fzWYzmYxSKpPJ2LYthLBt2zAMIYRSKp/PCyEMw8hms+6kqRDCvSAhhGVZlmXt65u7f1FKGYvFRo0aNXTo0Gw26ziOUtw0CgAAUEQ8oTly8kOjpiwfMWlZ/4YZhdAUSiolLGmallSOLaWsHFCeSKSEUNl9SKfTbikahmFZllIqHA6nUikhRCaTSSQS6XTaNE0hhGmabpIahmGaZuGXmUxmX9/cfYF79ZlMprq6WgjR2NhoWVZfvpEAAADw6hmaIyc/NLRpSb/66UlnhpTS3QCklLBzjlSOYQop5eBBtfl8UzKZ3lcIJpNJd7YylUql02k3HKWUpmlalmXbdjwed//Usqzur+memPtpzUwmE4vFEolEU1NTTU2N27KFOVEAAAAUA09ojpi0bMSkZUMaF/ern57IzZDSdjcAKSWypqHsnJNrFKZVXTXANEUmY2T2wbKsRCKRTCZt23ajUEqZSqUSiUQqlTIMI5PJmHt0L0s3Ot1I7VGf3bnL6+4LKioqhBC5XK6v30kAAAB49AzNYZOWnppfdErdtIQzS0pbKkcoadt2xshK5Ti5RsswB9bUGhnTNMW+QjCRSFiWlUwmo9Gouz5ummZhmjORSAgh3OiMxWJuZRbishCaqVRqX98/Go1ms1nLsrLZ7ODBg90bQPv6nQQAAICHJzSHTVo6tGnJqflFJ9VN7RGayrHdpXMl5KmDBtvS2XcHZizLisfjtm0nk0l3kjIejxfi0o1O0zTdvUFuOLp3bbqtWbjRc5//QCbjzoMahjF48GB3lrSv30kAAAB4eEOz6aEhTcsG5R88qW56IjdDKaWUI6W0LMO2bakcS6jGXP6Uk0+UlspkjH2snqfGjh1bVlY2YcIEIcx+J59y7LFHf6vsqLKysm9/+9tlR5V95zvf+da3vhUIBAzDSCaTv/rVr+rq6mKxmGFYhds6C1uC9v2vZDKZjGEYAwcOVEo1Njb29TsJAAAAD09oDmlaPrBxWU1u0cn1MxK5GUpaSkglLSlMWyohlJS2FGZNdaWwjEwmk05n0+lsJpXOpNKZdHLPiGfSyXQq9oPvf/eC88ekYtFEPGxbZnn/U846e3QslUymU0KYyWQ8mYhZlvXzn//8wrEXZbJmIplNJNPpdDqRSGQzqXQqkUymsxkRj6UzGUNKO5lMJxKpbNZ0V9XdvUS1tYMsSyrluE0MAACAIuEJzUGNbmguObl+RiI3TUnLHbZl2lJJS0lp25ZZU10hLCOdTqZSqVQqk06m0slUOpVIpxLpVCydiqWS0Vg0KLKpZDRkZZJmOhH21x//s+OiyUTCyIQi4VQmmUzEhGWEw+ETTjhh3EV18UQmmsyYyh4yZNgxx3zrmLKybx1VduzR3z33nLHCctIpMxKJuZWZSHRNebqHKNXWDuoqYJ5UBAAAUEw8oTkw/1Btfmm1s7hHaDrC6haaoqa60jKzqVTC3bvjndGMZ9LxUwfX/PgffxSPherrLvruMUcfXVZ2dFnZUWVlZUeVlX2r7Ohjj/nO97593rljRo447eijjy4rKysrO6as7Jiyo44554ILR406Y9SoEel4LJmI/fNPfz5ubF06ZcaiqXg8aRiWZVmxWMy9fbMwo0loAgAAFKGeoVnjLK12Fp9UN/3rodnVc3tCM5GIJZPJZDKZSiRTyfieEU0lo/FY6LxzRx/3038MBRuS0Yi/buIPv/+9eDRWWTvw9DGjY4l4IhVPpxKpZFwIcfzxx/v84QZf6KT+AwKR6GmnjTjrrDNsy0wmYv1Orhg3ti6ZyGYzIpMxYrGEe9i7u6kokUiYpumGplIOoQkAAFBUPKFZm1te4yytshedOHFa3JkqpSWlZSvRPTSVkDXVlaaRicej0Wi4MGLRcCwadEco2OD3TQz4G8KhQCwS/dUvfjl8yNBoOFIfCH73h39X72tIphOhoD8WDft8vuOPP3702edFY6kT+1XU+QO1tYOGDRsSD4f8vvqf/tNx5507Nh5Lx6KpUCgSCkWi0WgkEolGo7FYzD3kqKZmIKEJAABQhDyhWeM8VG0vqVQP/nritLgzVQhTSkspoWTP0Mxm09FoOBwOFkYk7C+MTDoeDvmSiVgkHPzOsd8eUF4RD0d+9Pf/48LxEyb4G479zrfPOW9MNpOKhIPhcPjkk08ec84FoXD8p8f/ckKDb9SoM8488/R4OBQJB08+8ZSxF04IBWN+XzgUikSj8VgsFggEQqFQJBIJh8OZTKamZqCUNqEJAABQbDyhWW0vq1KL94TmdCGEJzQtR8m8LVVNdWUmkwlHI5FI6KsRDRRGQ/3E888757if/PT4f/7ZaUOHR0LReDTxve/9YKLPH4hFwtHIUUeXnTZsSDIRq6ur+/73v+/zh6Ox1E+P/+X4+oZhw4YPGTI45GtIJeM/O+74s0efFw7Fk4lsPJ70+4OhUCgWi3lDs0ZKqZQjhOrrNxMAAABf2XtonjBhao/QVKpnaIYinhnNcMRfGLFouKK83+kjR/kbfAFf8Aff+7uxF4z/4d//w6Chw35x0q//7od/P2782HAoEA4FxowZ8+Mf/zgQjI6f0PDDf/insRMmDh8+ctSoEZGAPxjwnfDLX5937thQMBYMht2l80gkEgqFwuFwITRra2sloQkAAFB8PKFZaS8doBZViPtPmDA97kwvvEgJ6Th5IyulyOWdXE11ZTabjcSioVBgryMcChz/s+OC/oCvvqGyoqqi/4BQIPqjH/7jORdc+E/H//PwkSP+xz/8KBT0R8LB8vLy8vLycCQRDMW++3c/agiGhg8fOXBgTTIa8TXU/eoXJ5x37thQKOL3B8PhaDQaDQaD4XA4FApEIqFQKGQYRmVlZT6ftyxLCNGH7yMAAAB62FtoWg+cMGF6tFtoOsoWQtmq0bRsW6rq6spUKhUIBQMB317H+IvG/vQnPx534dhIKPy973zfV++PRZLf+fYPzh930T8c95ORp4+qqCw/+aRfn3fumKOOOioQCARDsbHjJv7TP//cndE89tijjy4rO+boo449+tunjxqdTKYjka5bM93QDIeDwaA/Go1mMpmKigohhFIqn8/34fsIAACAHnqGZoV8sFz0DE1bKsOwGvNTTMu2pTNw4EDDMILhkDv2+GpG89RTB5WX90un0xdddFH9xIbvf/cHR5V96yc/OS4QidaHApFYdELd+Fg0fPzPjhsxYsQZZ5xx9DHfLSs7pqJ6YDieGDx4SG1tdTwcCocCv/z5r84Zc0E4HPX7gz6fLxgMBgK+YNAfCgXq6ydGo2HTzFZXV7uhqRRL5wAAAEXEE5oD1JIKubhcPPCr8dOi3qVzy5K5/GTDVFLaVVVVUspAKOgPBvzBQDddM5qRSCgY9Pt8vnA4HA5GQoFwJBT1+QITff66oN8fDERiYV9DXSwa9vv9wWAwEIz6A5FwPDWhwReJxFKpRMjX0FA/MeALhoKxQCAUCITcg41CoUAsFolGw3V1EwIBnxBmdXW14zhSStM0++xdBAAAwNd4Q1MuKxeL+lv3u6EplHQ32NhS5fNNQuZMyxZC9evXzzTNBr8vEAx3jVBwD38w6Pf7GwIBX0NDXSQSSiQSDQ0NQX8gEAhEEsmJAZ8v4A9Fgg31E4MBn8/nC4VCDb7QhIm+YDQRiETr6hr8/oZIwB+LhkOBYCAQ8vuDwWA4GAzW19fX108MBv3RaNjvb2hoqDPNbHl5eS6XE0LYNscbAQAAFBFPaFaIpW5o/mLCV6EplBSm1dg4yTCVkDmlnMrKynQ2E4lF/YFQYQQCocK8ZigUcCuzrm5CfX19KBSqmzDR7/dP9PnH1k0IhILReMTdDOT3+0OhUDAUC4Xj9YFwIBINhSJ+f0PDhPHBgM/f4AuHo9FoPBSKBIPBSCQSiYT8/oa6ugnBoD8cDppmtqqqynEc0zQJTQAAgKJyQKFpGaZSjpA5qfK2nRsyZEiDL5DIZH3+8J4R9PmDvoDfFQj46uomxONRn68+GPQ3NNT56htisVhDMNQQDvqDgXHjxwYDvvq6CdFotL6+fmKdPxSO+0LRcRPrgsFwKBQI+RrCoUDA5/f7gz5fYOLE+rq6OnfGdPz4cT5ffSQSisej4XBw8ODBSinTNC3L6us3EwAAAF/xhGa5XNp/z9J5xJ5WOJjSlsqyLCc3yRKOaYqhQ4eeceboSDSeyZqZrJnJij1fmNkuaSHMaDQshJlMxrPZdN7JxePxTNZMZjNZ08hkUoaRyWZSiUTCMAzTksFQRNmNWcPKZDKpVEoKM51KmKaZTmezWdOyZDabzWQyhpExjIwQZiqVCIeDo0efOWjQIMuybNvmeCMAAICi4gnNU8Syk8XiftaDvxo/zT1HU0lLScuxpRAiK2yZy+dyuUQ8Onr06IqKiuoutdUHrKpmP394EN+nsrKyqqrqzDPPjMfj+XzecRxmNAEAAIqKJzRPlt1C056pRFdoKmkJIQypTGXbtu3YUilVOFTob09KqZRyD2nP5XKO4wghCE0AAICickCh6djStm3LdgypDMMwjYyU0j1UqE+Ypuk4juM4bnSapmkYBudoAgAAFJUDndGUUlq2I5yc4zi2EpZlGYbRVxftTqa6X7jFads2TwYCAAAoKgcUmrYSQoiskKayHcfJ52y37fpq6dz9pw3DyGazQgghhLsFqa/fTAAAAHzlEJfOTdPsw13e3Y9nd5OXGU0AAIBic0ChKYUppRROTjg5pZSthDut2FcXXVi1d/cDmaZpmib3aAIAABSVA53RFEJkLJEVUinl7jrv213ebuYWpjbd4uzD6wEAAEAPPUPzFLnEDc2YmiEt4d6g6W4GMpVtKltK6f4SAAAA2I+9hGZ/sah7aBZ2nROaAAAAOHB7D80TJkyP2zMJTQAAABwy7yMo1UOEJgAAAP5b9AzNfmopoQkAAIDD5wnNfvbyfmppuVxMaAIAAOAw9QzN/vYyQhMAAACHb++h+euJM+LOdEITAAAAh6zHPZpL+9tLKuxFJ0yYHrOnKSGVkG5uyp6h6Q4AAABg73rMaC4rd5a6oRl3phOaAAAAOGSEJgAAAHqFJzT7Ow+VO0sHOIsJTQAAABymnqFZkVs2wOnaDERoAgAA4JARmgAAAOgVntAszy0nNAEAAPDfomdoDsg/VJlbQmgCAADgMHlCc0DjI5WNy6vyS0+sm5nIzbClsqVSQhKaAAAAOFg9Q7Oq6WFCEwAAAIfPE5qVTY9WNT1c3bjspPpZhCYAAAAOR8/QrJ70SE3TQ25ouvdoEpoAAAA4BJ7QrJr0WM3kR2snLT+5YTahCQAAgMPhCc3qyStqpzw2cPLDp/jmEJoAAAA4HD1Dc+DFKwZNeYTQBAAAwGHae2j2889O5GZIS3hDM1cITUVlAgAAYL88oVk75bGayQ8PmvJwP//suDNdCtOWSphdTWmqnJA5JezCTCcAAACwL57QHHjxitopj5w65ZH+gTmJ3DQlLVsqaQkppZC2kF2h6QiphK2E3dcXDwAAgOLlCc3Bl64YdMljQy5+tDw41w1Nx5ZSmJLQBAAAwEHyhOapUx8fPPWxoZc8VhG6LJGbJoVpK0FoAgAA4BB4QnPItJWnTlsx7NIVFaHL4s5UYRn7Dk3u0QQAAMD+eEJz6PQnhkx//LSpjxdCU0mL0AQAAMAh8ITmsBmrhs5YOXzaygHhywszmu6pmULJPaEpHWERmgAAANg/T2ieNvPJ02atGjHj8crIvERumhuathKEJgAAAA7WXkJz5MyVAyJz485UKcw9u87d0LSFtAlNAAAAHAhPaA6f9dTw2U+OnLmyMnqZG5p7NgMRmgAAADg4ntAcMeepEXOeGjXricroZYncpVJkbWVKkSU0AQAAcLA8oTly7uqRc588Y86TVbHLCU0AAAAcDk9ojrpszemXrz5z7lPV8XmJ3KXCyuwzNKWlpNXXFw8AAIDi5QnN0y9fe8a8NaMvX1OTmE9oAgAA4HB4QvOMeevOnL/27Hlra5NXEJoAAAA4HJ7QPOvyNWfPX3f2vNW1ySsK52iKr+0631OZhCYAAAD2yROa585fe+78tefMWzMofVXMnmbbtmVZSikpZVdoKimpTAAAABwAT2hecMWa8+ev7haaOdOSUjnSG5pSGe7vAAAAAPvSMzQvuGLNuVesHpy5mtAEAADA4fCE5oVXrr3wyrXnX7V2SGYBoQkAAIDD4QnNcVevHXf12rFXrRuavSbuTLdtm9AEAADAofGE5kUL1l20YN24q9cPMxbEnalKKdOS0lZSWlJabmgqaSlJaAIAAOAbeEJz/NXrJixYf9GCdV+FpmkqpdTeQhMAAADYD09oTliwfuI1G8Zfs/4085qvh6aUtpRdocmDzgEAALB/ntBsuGFT3XUbJl63cbh1bVRd4thSSimEIDQBAABwsHqGZv31G+uu3zRcXBNTUxxbCiH2FpoWoQkAAID984Sm78aNDTdsqL9x0wh5bdy+2FZCCCGl3Edo2n187QAAAChintD037TJd+PGhps2j5LX7DM03WedC5vQBAAAwH54QjNw82b/TZv8N206XbkzmqYQZreHmxOaAAAAOFCe0AzessUdZ9jXxe0p3UNTEZoAAAA4GJ7QDN22OXTb5tCtT7uhqaRBaAIAAODQeEIzcsvToVufDt369JnO9Qnn4h6hKZQUqis0pSQ0AQAAsD+e0Izf+nz89q3x27eenbsh4XTdoymEKZUhvxaagtAEAADAvnlCM3Hb1uTtLyTueOHs3A0J5xLHdvcAWVIZQnWFppSEJgAAAL6ZJzRTv9mavvOF1J0vndN4UzJ36VehKa2vhyZL5wAAANgPT2im73whe/dL6btePqfxJnfpvFtoSrFnFpPQBAAAwDfyhGb27heMe17M3P3SuU03p+yvNgMRmgAAADhYntA07nnRuu9l495XCqEpRWFSk9AEAADAQfCEprjvRbHwJXPhy+dP/io0lVKqW2hyvBEAAAAOhCc05cKX7Adekfe/ev7km9POJfsJTSUkoQkAAID98ISm8+ArzoOv2A++OnbKzUl7kpKGrYQQQgkppRTSlp7QBAAAAPZpf6HpCE9oSpFzQ9MRhCYAAAC+gSc0c4tezi161Vn02riLbymEprT2Hpq0JgAAAPbDE5r5xa80Lnk1v/T1iy65NWlPsq2skhahCQAAgEPgCc3GpS83LX2tcdkb46feklKEJgAAAA6dJzSblr0y6aFXJy1/Y8K0W9P2ZNvKepqS0AQAAMAB84TmlGUvT17+2uSH3yQ0AQAAcJg8oXnJQ69csvz1KcvfnjjtjpQz2V06d5tyz8GZHG8EAACAA+IJzRkPvzn9kbcueeR3E6fdkbIvlsK0pXIPbC+Upft14XGUAAAAwF55QnPWo2/PfOz30x99p37GnWnnUilMKWVXaErL/QuFpwSZiqdQAgAAYJ88oTn3sbfnPv77mSvea5h5VyE0pTuLSWgCAADgYHhC87IVv71s5TuzHt8WmHV32rmE0AQAAMAh84Tm5Svenrfy93NWvueGprAMydI5AAAADoknNOc9/tv5T7wz94ltoVl3ZZwpbmhKWykhpbSktIXqOtWI0AQAAMD+eULz6lW/u+rJd+c/uS0y555s7mJCEwAAAIfME5rXPPXOgtXbrly9PTr3XiN/ibAMIUThGCPhDU2ONwIAAMB+eELz+tXvXLfmvWvWfpCctzApmxxbWpZFaAIAAOAQeELzlrXbblj3/rXrPkzNv3+voSm77UAnNAEAALAfntC8ff22m9e/f8OGHcaV96dlY15ZhCYAAAAOjSc079jw3u0b379p0043NHPSJDQBAABwaDyh+ZuN2wqhmRJ5NzSlctyXEpoAAAA4cJ7QvHPT+3ds2n7rpmbzqgcKoansnPtSQhMAAAAHzhOa92zZftfTH9z+dLO46qulc2Y0AQAAcAg8oXnvMzvueXbHnc80ywUL07LREZZpmmpPaAIAAAAHzjuj+XzLXc/uvO/5nY3XPpASTbZ0nwkk3ScAOcJS0jJVzlTuYrrVd5cNAACAYucNzRfa736ueeHzHzVdszApm5RylHBPaLeVkI4wlLQMlc/YeSmlkkZfXzwAAACKlyc073uhbeHW5ge3Nk+69v6kbFJKeUPTUkISmgAAADgQntC8/6WOB15sXfRCy+TrF6ZEntAEAADAIfOE5uJXOha91LrkpZYpN9yflo1SSiHcmzQJTQAAABwcT2gueXXXklfal7/SdukNDxRCUynVfTOQofKGyklpKWmwHwgAAAD74gnNh17vXPZa+8Ovtl56w8I9oamUcsSe0JSEJgAAAA6MJzSXv7F7+Wsdj7zSOvXG+78emkr2DE1FaAIAAGAfPKH56Ju7H31r14o32qbftDArG23pLprbQuaktAlNAAAAHDhPaK54c/eKN3c98UY7oQkAAIDD5AnNlW92PvHW7lVvdsy66X5D5d2DjQhNAAAAHAJPaK56++PVv929+u1ds29+wFB5JS0h1F5DU0nLfVBQX18/AAAAipQnNJ/6/cdrfvfx2t/tvuzWBwlNAAAAHA5PaK5+55N173yy/p3dl9+2yLQb9xaa0pR5k9AEAADAN/GE5rp3Pln/7qcb3v143u2Le4SmkLYSUhKaAAAAODCe0Fz/7qcbtn2y6d1P5t2+OOt0naMppO2OrtBUua9CU/Tx1QMAAKBoeUJzw/bPNr7/6eZtnfPvWJS0G007r+ycJYVQhdfbQtruo8+pTAAAAOzHXkLzmW275t/xQMKZnHXywslZUkhp7XnapC27QtNWwu7jawcAAEAR84Tmxg/+tGn7H559v/OK3zyYcCZn7Jyyc0J0D01JaAIAAOBAeEJz04f/suXDz57bvvvKOxelnMkZOyeVQ2gCAADgEHhC8+kP//zMh3964cNPrrprccqZbKictJWUlpKW8oZmX14yAAAAdOAJzWd2/M9nd3z24o5PFty9iNAEAADA4fCE5rM7//zcR3966aNPr7lncTo3ZR+hCQAAAHyznqG5dee/vPrRH667e3HGITQBAABw6DyhubX5Ly80/9kNzbQ92ZCOUspWgtAEAADAwdpLaL6284/X3b04bTcRmgAAADhkntB8sfl/vdz8P1/f+cfr71mStpsMqZRSSlpKGkoa3kOOAAAAgP3xhOZLLf/7lZa/vNH82Q33LMnakwhNAAAAHDJPaL7c+n9ebf1fb7b86cZ7l2btSZZQSgm3MguhKZQUShKdAAAA2D9PaL7S9q+vtf3lzZY/3njvEkITAAAAh8MTmq+1/e/XW//ydstnN93HjCYAAAAOi3dGs+M/Xm3/t9fa/nL9wuWW0yiFaStTSUN1S8xulUloAgAAYJ88obm59T+ebv9/z7b/f/PvedSwzCYrmZeZxrySUgppmypnqpyUUnGEOwAAAL6JJzSf2Pn/Vn70fx/74D+m3bnCyeemqJQyEsIypJSmyhkqb3SFZvfFdAAAAGAvPKGpHnzRXvSSs/jV8RfflFKNkxxTWBmllDudaai8qXJKSEcYjiA0AQAAsD+e0DxtxkMjZz9y+pxHquNzw2KS4yjTNJVjC2nvWTq3lbQcYTgyu+feTQAAAGAvPKFZNfOJ2pkra6Y/dlJ0XjA/Uzi5jCWkcoTqukdTSFtJy5FZQhMAAAD75wnNU2as6T9zdb9pq34Rme9vmmvaect2lGO7L3XnNZU0CqHJ0jkAAAD2xRualz1bfvkzA+as+0XsGn/T3Kx0bCdvWV17zIW0pZTu0jmVCQAAgP3zhOavZ20+adbG/jPWHh+52p+bnRUyn8+bRsYRX62S7znYyBKqb68cAAAARc07ozln8ymzNlTMXPOr2NWhxtmWFLYS7tYfRxhSSndSU0ppKttUNq0JAACAffGEZvns9eWz1lTNePLE6PxI4wwhzJwyHJnNCU9oFg5vL3QnAAAA0IMnNCtmr62YubpmxhMnRedF89OkyOaUkRNpQhMAAAAHyxOaA2atqZz5ZM2Mx72h2XNGU0pJaAIAAGD/9jKjWTXziRNj8yKNMyxpdt2jKQx313mhLN2TNfv20gEAAFDM9nKPZuXMJ0+IzQ81zjKkUEq528wLoVnYdc7xRgAAANgPT2j2m72x/6x1FTNX/yJ+tb9pblo5lp3/ahZzT2jyrHMAAAB8ox7HG208ZYqsb58AABi+SURBVPa68lldoZmVntA0FaEJAACAA+Wd0Zy7od+ctQNmP3VC7MpQ42xLKNvuehqQ3HN2ptyzks6DzgEc0WwhlJS2lLZSzhtvvPXss8+vWvUUo1jHV55Y9VRhPL/1xdffeKtz9yftHZ0tLS0tLS27du1qbW1tA45E7e3tbW1tUkqliuWoc29oXrau35w1VbOe+nX8ikh+tiWFowo3ZXY/pN1SQirR19cOAL1GCCWEUsoRQuXzTZ2dH//7v//f//zPv36JovdFt/HZn/68s7m1Y9fu1raOjo4O9ydxc3NzX/cA0CsITQDQg1KOO5dpGJaUdmfnx3/96xd91044CF94x67Oj5tb2nY2t+7atavwkxg4IukXmrZUhCaAEqSUY1lSStuypOPkP/nkD//1X59/8cWXjGIdX/n8iy8L44svv2zv6NzZ3Nrc0tbR0eHOZbrFCRx5ij00+1++/uuhKYVJaAIoNblcY/fQ/OMf//S3n5nDoek+nfnXz7/c1flxe0enu3Te3NzMDZo4gmkQmv3nriU0AcBx8kKoXK5RCGUY1q5duz//vO/SCQejx9J55+5P2tp3uTOa7e3t7e3tLS0tfd0DQK8gNAFAD6YpDMPK55vc4vzkkz/0XTjh4HSvzM+/+LK9o9O9R7Ojo6Otrc39L3BEIjQBQA+OkzcMy7ZzQijTFG5osh9ICz1mNDt27W5r39Xe0dnZ2blz586WlhZaE0eqYg/NU+au7T93bfXs1SfE5odzs9xd54QmgJJkuxvP3UOOdu/+pO/CCQenR2i6N2i2tnW0tbW1trZ2dHRwmyaOVIQmAOiC0NQVoYmSVeyh2e+ydf3nrq2Zs+bX8SsITQCljdDUFaGJkqVBaJZfto7QBABCU1+EJkpWsYdm/8vXE5oAIKUkNPVFaKJkaRCaFZevr527ltAEUPIITV0RmihZxR6a5fM2uKF5YuLKwrPOCU0AJYnQ1BWhiZJFaAKALghNXRGaKFkahOaAeRu6L51zYDuA0qSUY9s5w7CktE1TfPzxp30XTjgszc2t7e27du3a3dzcumvX7tbW9vb2XX3dA0CvIDQBQA/uRKZlye6PoPz88y+/+IKh0/jyyy/b2jra23d1dHQ2N7d2dHQSmjiCEZoAoAfLkko5QijHyUtpf/rpH7/g8ZN62rVrd3v7rvb2XW5out3Z1z0A9ApCEwB0YbsPOpfSdkPTfdD5558zdBr/9V+fd3Z+7MZlS0ubG5ptbTzrHEcmQhMA9KCU485ouq358cef/tu//cd//udf/+bzcTgs//qv/95tudydy+xobW3v6x4AegWhCQB6KMxlutvPOzo6P/740z/96c+fffYvDI3GH/7wWVtbR0tLm7t67g5CE0cqQhMA9FCYyxRC2XbOvcNv167dexZeGXoMd63cndF0E9P9oq97AOgVhCYA6MJ2W9M0hRuaO3e2EJo6jkJftrV1uLdpdnR09nUPAL1Cg9DkEZQA0J0QQkrZ1tbGKd8AihyhCQCaITQB6KLYQ7Ni/kZ36fzExJWEJgBIQhOAPvQIzYGXreNZ5wDgIjQB6EKD0Kycv5HQBIACQhOALoo9NAdcsYnQBIDuCE0AutAjNAddvv6k5FWEJgBIQhOAPjQIzaorNtXO6wpNIQhNAKWO0ASgi2IPzf5XbBxwxcYeoekIyxGWEl2hKaVUhCaAkkFoAtBFsYdmvys2DrhiY8289SemCE0AkJLQBKAPQhMANENoAtAFoQkAmiE0AeiC0AQAzRCaAHRBaAKAZghNALogNAFAM4QmAF0QmgCgGUITgC6KPTT7X7mp8spNhdC0LMuWitAEUMoITQC60CM0a+dvKMxoEpoAShyhCUAXhCYAaIbQBKCLYg/N8qs2u6F5UvrqQmjalkloAihZhCYAXWgQmlVXbR54xUZCEwBchCYAXRR7aFZcvYXQBIDuCE0AutAgNKuv3kJoAkABoQlAFzqFZqiR0AQAQhOANoo9NN17NN3NQIXQlMJU0pKyKzSFklJafX3ZAPA3QmgC0IUGoTng6q9C05KEJoBSR2gC0IUeoVlYOic0AYDQBKCLYg/Niqu3VC7YQmgCQAGhCUAXhCYAaIbQBKCLYg/NAQuerlywZdCVm07OLAg3zSE0AYDQBKALDUKz6pqnCU0AKCA0AeiC0AQAzRCaAHShQWgOuHrzqVdvOSl9dTA/SyiphLSVIDQBlCxCE4Auij00K695htAEgO4ITQC60C80pSUITQCljNAEoAsNQrNywZYhC57uHppKWoQmgJJFaALQBaEJAJohNAHoothDs+raZ7uHpiUFoQmgxBGaAHRBaAKAZghNALrQIzRPvcYNzZmWFJZlEJoAShmhCUAXxR6aA657pua6pwcv2HRK9ppw02xTWEr1nNGUUippKSGV6OtrB4DeR2gC0IU2oXmSsYDQBABJaALQB6EJAJohNAHogtAEAM0QmgB0QWgCgGYITQC6IDQBQDOEJgBdEJoAoBlCE4AuCE0A0AyhCUAXGoRm5YJNp16z+cTs1aHGWUJJIUxbCUITQMkiNAHoQoPQrLpm85Brt3QPTWY0AZQyQhOALoo9NCuvf5bQBIDuCE0AuiA0AUAzhCYAXWgQmtXXbhly7ZaTjAWEJgBIQhOAPoo9NKtueK762i1Dr3ua0AQAF6EJQBeEJgBohtAEoAsNQrPmuqcJTQAoIDQB6EKP0Bx2/TNuaFpScI4mgBJHaALQBaEJAJohNAHoothDs/rG593QPNm8htAEAEloAtCHBqFZe/0zhCYAFBCaAHRR7KFZc9PW2uufOe2GZwlNAHARmgB0oUFoDrzhWUITAAoITQC6IDQBQDOEJgBdFHto1t78wsAbnh1+43OnWNcSmgAgCU0A+ij20Ky+8flBNz439Lqn+8vrg/mZyrEty3BsSWgCKFmEJgBd6BSagdwMNzSZ0QRQyghNALrQIzSHXf8MoQkALkITgC6KPTRrbtpKaAJAd4QmAF1oFprSVqaZJTQBlDJCE4AuNAjNwTc93yM0lbQITQAli9AEoAtCEwA0Q2gC0EWxh2btzS90C81phCYAEJoAdFHsoVlz83On3vLc8Jue6S+v9ztTpa0sy7Kl2kto7qlPADiyEZoAdEFoAoBmCE0Auij20Ky95fkhtz7vhqa7dE5oAihxhCYAXegRmiNufrZc3RDITVOOTWgCKHGEJgBdEJoAoBlCE4Auij00B966dehtWwlNACggNAHogtAEAM0QmgB0UeyhOei2F4betnXkLc91D00lJKEJoGQRmgB0oUdoMqMJAAWEJgBdEJoAoBlCE4AuCE0A0AyhCUAXhCYAaIbQBKALQhMANENoAtAFoQkAmiE0AeiC0AQAzRCaAHShe2jmCE0ApYbQBKCLYg/NwbdvHXLr8yNvea7CvtFnXyptJaVUQiohZVdo5qQbmnt+EwCObIQmAF1oEZrP7iM0bUITQAkiNAHogtAEAM0QmgB0QWgCgGYITQC6IDQBQDOEJgBdEJoAoBlCE4AuCE0A0AyhCUAXhCYAaIbQBKALDUJz6G3PjbzluQHOTX5nKqEJAIQmAF0Ue2ieescLQ297btStz7uhqRxbEpoAShuhCUAXhCYAaIbQBKALDUJz2O3Pj7r1+crczYQmAEhCE4A+ij00h/zmxWG3P3/6bVsJTQBwEZoAdEFoAoBmCE0Auij20Bx650un3bHVDc1AbhqhCQCEJgBdaBCaw37TFZr+PKEJAIQmAG0Ue2gOueulIb/ZOur2FypzN/tyU6WtpCUcIR0hlbCFzAlJaAIoLYQmAF0Ue2ieetdLQ+98gdAEgAJCE4Auij00h9z9shuaVflbCE0AkIQmAH3oEZqn3/EioQkALkITgC40CM1hd71IaAJAAaEJQBfFHppD73mF0ASA7ghNALrQIDRPu/ulM37zUnXjrf78NEITAAhNALogNAFAM4QmAF0Ue2gOu/fV4fe8fOadL1c33urLTRVKSkvkpCI0AZQsQhOALghNANAMoQlAF8Uemqfd99qIe185665Xappu8+enEZoAQGgC0EWxh+bwha93D033Hk1CE0ApIzQB6KLYQ3PE/W+MvO/V0Xe/WjvpdjYDAYAkNAHoo9hDc+QDb45a+NrZ97xGaAKAi9AEoAsNQvP0+18/+57XBk6+I9A4ndAEAEITgC6KPTRPf/Ct0+9/fcx9rw2cfBuhCQCS0ASgj2IPzbMWvXX2orfOu+/VgZNv8TdeqhwppaWkpaQlpTRVzlSEJoDSQmgC0IUGoTnmwTfPX/jawMm3BPKEJgAQmgC0UeyhOXrx2+cseovQBIACQhOALjQIzXMXv33B/a8PmnJrsHGqtAWhCaDEEZoAdFHsoXn2kt+et+S3Yx98c/DFtxGaACAJTQD6KPbQHLP0d+cv/d24RW+desntbmgKYdpKEJoAShahCUAXmoWmUBahCaDEEZoAdKFBaF6w7PcXLX6b0AQAF6EJQBfFHprnLX/3gmW/n7D0d8Om3RnIXyqUpZTgHk0ApYzQBKALQhMANENoAtBFsYfm+Q+/d+FD70xc9ntCEwBchCYAXWgTmqdNv4vQBABJaALQR7GH5gWPbBu7/F1CEwAKCE0AutAjNOseeqcQmhzYDqDEEZoAdKFTaLrHGxGaAEocoQlAF8Uemhc++v7XQ1MKk9AEULIITQC6KPrQfGzbRY9sa3j4veEz7g7kL7WkKaXc05S2JzT3THMCwJGN0ASgi2IPzbEr3r/o0XcJTQAoIDQB6ILQBADNEJoAdKFBaI5/7L2Gh98bMfOeYONUQhMACE0Auij20Bz3+Pbxj73ne2QboQkALkITgC4ITQDQDKEJQBfFHpoXrfxgwopthdAUypKEJoDSRmgC0AWhCQCaITQB6KLYQ3Pc49snPv5+4LHtI2be4+46V0oRmgBKGaEJQBf6haZkRhNAaSM0Aeii2EPzopUf1K3cTmgCQAGhCUAXhCYAaIbQBKCLYg/N8U98WLdye3DFByNn3UtoAoAkNAHoQ4PQrH/igx6hKS1BaAIoWYQmAF0QmgCgGUITgC6KPTQnrNpR/8QHocc/JDQBwEVoAtCFBqHZsOrD0OMfjpp9n3tgO+doAihxhCYAXRCaAKAZQhOALghNANAMoQlAF4QmAGiG0ASgC0ITADRDaALQBaEJAJohNAHogtAEAM0QmgB0QWgCgGYITQC6KPbQnPjkR91DkwPbAYDQBKALQhMANENoAtAFoQkAmiE0AeiC0AQAzRCaAHRBaAKAZghNALogNAFAM4QmAF0QmgCgGUITgC6KPzQ/bFj1YWjl9jP2EpqyZ2iKPr1wAPibIDQB6KLYQ7P+ye2+Jz+IrNp+5pyFwcaplhRSSiWkO3lpKttUtlBSMpcJoGQQmgB0Ufyhuc335PvRJ7afOefeYH66JYX7WCAlLSktU9mmkntC05bS7uuLB4BeR2gC0EWxh2bDU+/7n9pOaAJAAaEJQBd6hGZs1QeEJgC4CE0Auij20PSt3h5Y/UFs1Qdnzb2P0AQASWgC0AehCQCaITQB6ILQBADNEJoAdFHsoelf80FwzYfxJz8kNAHARWgC0IUeocmMJgAUEJoAdKFHaDKjCQAFhCYAXRCaAKAZQhOALoo9NANrPwyt3UFoAkABoQlAF3qEZuKpHWfNvS/UOIPQBABCE4Auij00g+t2uKE5+rKFhCYASEITgD40CM3wuo96hKa0BKEJoGQRmgB0oUFoRglNAOiG0ASgi2IPzdDaHbH1O1Nrdp59+f37WjqXUippKWErQWgCOPIRmgB0oUdoptfsPPvy+yOEJgAQmgD0QWgCgGYITQC6IDQBQDOEJgBdEJoAoBlCE4AuCE0A0AyhCUAXhCYAaIbQBKALQhMANENoAtAFoQkAmiE0Aeii2EMzvO4jQhMAuiM0AeiC0AQAzRCaAHShQWjGNzQTmgBQQGgC0EWxh2Zk/c74hubM2uYx8x4gNAFAEpoA9EFoAoBmCE0Auij20IxuaE5sbHFDM9o0k9AEAEITgC40CM3khpbM2uZzLt9vaApJaAIoEYQmAF0Ue2jGu4VmYenclqp7aIqu1iQ0AZQEQhOALvQITWONJzR7zGh6Q5PWBHCEIzQB6ILQBADNEJoAdEFoAoBmCE0Auij20ExsbEluaDHXthCaAOAiNAHoQoPQTG1s7R6a0hLSEoQmgJJFaALQBaEJAJohNAHoQrPQNIVFaAIocYQmAF0Ue2imNrdlNreL9W3nznvQDU3u0QRQ4ghNALogNAFAM4QmAF0QmgCgGUITgC4ITQDQDKEJQBeEJgBohtAEoAtCEwA0Q2gC0AWhCQCaITQB6KLYQzO9qc3YVAjNaaawpOwZmlJaUlpSUpkASgKhCUAXxR6axqZWY2OL3NB64RWLg41TTWEopZSQjrCUtITsHpoAUBIITQC6KPrQ3NxibGxWG1ovvGLRXkNTuKGpDCm71tAB4MhGaALQBaEJAJohNAHogtAEAM0QmgB0QWgCgGYITQC6IDQBQDOEJgBdEJoAoBlCE4AuCE0A0AyhCUAXxR6a5pZWc1OLs6l93FVLQk3TCE0AIDQB6ILQBADNEJoAdEFoAoBmCE0AuiA0AUAzhCYAXRCaAKAZQhOALghNANAMoQlAF4QmAGiG0ASgiyMkNJUkNAGUCkITgC6KPTTFlja5uS23uWPslYvdA9tt2xZCKGnJr4UmAJQCQhOALjQLzawkNAGUOkITgC4ITQDQDKEJQBeEJgBohtAEoAtCEwA0Q2gC0AWhCQCaITQB6ILQBADNEJoAdEFoAoBmCE0Auij20JRPt6st7fktu8ZdtYTQBABJaALQB6EJAJohNAHogtAEAM0QmgB0QWgCgGYITQC6IDQBQDOEJgBdEJoAoBlCE4AuCE0A0AyhCUAXhCYAaIbQBKALQhMANENoAtAFoQkAmiE0AeiC0AQAzRCaAHRBaAKAZghNALogNAFAM4QmAF0QmgCgGUITgC4ITQDQDKEJQBeEJgBohtAEoAv9QlMpRWgCKGWEJgBdEJoAoBlCE4AuCE0A0AyhCUAXxR6aYkub3NyW29wx9srFhCYASEITgD4ITQDQDKEJQBfFHprW5lZCEwC6IzQB6EKD0BSbWp1N7YXQ5HgjACWO0ASgC71C8xJvaMpuoWn19WUDwN8IoQlAF8UemuamFrm5zdnUNvbKxeFJU7PScD9hvwpNaRd+KaXdlxcOAH8ThCYAXegRmvbG1guvWPRNoWkTmgBKAaEJQBfFHprGxmaxqZXQBIACQhOALjQITWtji9rQcsH8BwlNAJCEJgB9FHtoZjfsNDc0i3U7z5/3QKjp0uye3eWEJoCSRWgC0EWxh2Zm/UfG+p3W2o/c0DSU6b6I0ARQsghNALrQJjTPu/x+QhMAJKEJQB8ahGZ23Ufmmh2EJgC4CE0Auij20Eyu+SC77qMeS+dKKUITQKkxTTOXyymllFKO4zQ3N+/ataulpaWvf44AQE+dnZ3Nzc3u1y0tLblczrIsx3H6+nNUyq+HZmbtDkITABzHsSwrm826M5rt7e0tLS27d+/u2x8nAPB1zc3N7e3tnZ2dbW1tra2tQgjbtrPZbF9/jkq519Bk6RwA3PkANzellJ9++mlzc7P7aQ4ARaWzs7O1tbW1tbWzs7OjoyOTyeTz+Xw+39efo1L2CM3E6u3pNR8aqz8kNAGUODc0bds2DKOxsXHHjh3t7e27d+9uBYAi497Y09LS0tnZuWPHjsbGRiFEMc5oxp96P7X6g+xTH5x72UJCE0Aps23bsiwhhOM42Wy2qalJCGEYhgKAIuN+UrmfWo2NjZlMRimVy+X6+nNUyq+HZvKp7Zknt58z975Q06WmbSmlJKEJoPS4H9mWZdm2rZRKpVKO4+TzeQEARcayLLc4TdO0LKupqckwjGKc0Yw9uS3x5PvpVe8TmgBKnGmatm03NjaqPaeE2LZtmmbfXhUAfJ17O2ZhycW2bSFEMd6jWQjNMXPu/abQlIQmgCNYISsty3KPOrIsq0iWogCgu8JhRrZtO45jGIbjOEXyP8Z7Dc19L50rKaW1JzQBAACAfdp7aI6Zc2+oaZo3NK1uoWn09WUDAACg2HlCM7rqvfiqbYQmAAAADt9eQjP1xPuEJgAAAA7TPkMz2DjVe44moQkAAICDQGgCAACgV3xzaAohCE0AAAAcrL2H5tmz7yE0AQAAcDg8oRl54t3oyncTj783etbdwcappm1JQhMAAACHhNAEAABAryA0AQAA0CsITQAAAPQKQhMAAAC9gtAEAABAryA0AQAA0CsITQAAAPQKQhMAAAC9gtAEAABAryA0AQAA0CsITQAAAPQKQhMAAAC9gtAEAABAryA0AQAA0CsITQAAAPQKQhMAAAC9whOaAAAAwH87QhMAAAC9gtAEAABAryA0AQAA0CsITQAAAPQKQhMAAAC9gtAEAABAr/j/AeQg45+nBe/8AAAAAElFTkSuQmCC" alt="" />
