定位锚点圆角透明滚动条

目录
一、元素定位设置
二、锚点链接
三、圆角切图
四、透明度设置
五、滚动条设置

---

一、元素定位设置

1.1 position定位设置，检索对象的定位方式
	{position：static absolute relative fixed；}
1.2 说明
	static 默认值，无特殊定位，对象遵循html原则
	absolute 绝对定位，将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象，而其层叠通过z-index属性定义
	relative 相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；
	fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；

1.3 绝对定位和相对定位的区别
	参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；
	绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
1.4 包含块的概念及作用
	包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；
	默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
	定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；这个方法在给子元素添加absolute属性值的时候，给父元素添加relative效果最佳
1.5 定位元素层叠属性
	z-index : auto |number 检索或设置对象的层叠顺序。
	auto：默认值。遵从其父对象。number:无单位的整数值。可为负数
	较大number值的对象会覆盖在较小number值的对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。此属性仅仅作用position 属性值为relative或absolute的对象。

---

二、锚点链接

2.1 介绍
	是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
2.2 命名锚点链接的应用
	命名锚点的作用：在同一页面内的不同位置进行跳转。
	给元素定义命名锚记名，语法：<标记 id="命名锚记名"></标记>，然后命名锚记连接，语法：<a href="#命名锚记名称"></a>

---

三、圆角切图

3.1 css书写
	border-radius：左上角 右上角 右下角 左下角
	border-radius：左上角右下角  右上角左下角 (对角线)
	border-top-left-radius：左上角
	border-top-right-radius：右上角
	border-bottom-left-radius：左下角
	border-bottom-right-radius：右下角

---

四、透明度设置

4.1 IE浏览器的写法
	filter：alpha（opacity=value）； 取值范围1-100
4.2 兼容其他浏览器写法
	opacity：.value value取值范围（0-1）
	例如：opacity：.8（0可以省略不写）；filter：alpha（opacity=80）；

图片背景透明：
    .gif：支持
    .png8：支持(建议使用)
    .png24:  IE6不支持，其它内核浏览器支持（PS制作)
    .png32：IE6不支持，其它内核浏览器支持
Png32图片作为背景图兼容IE6的写法
background-image: url(路径)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='路径'); /* IE6 */
_background-image: none; /* IE6 */

图片本身透明
    .png24: IE6不支持（ps制作)，可用filter兼容。
    .png32：IE6不支持，可用filter兼容。
半透明插入图片兼容IE6做法:（使用png32或PS制作的png24半透明图片）
样式：
<style type="text/css">
.alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="图片路径",sizingMethod="scale");width:value;height:value;}
.ie6hidden{_display:none;}
</style>
结构：
<span class="alpha"></span>
<img class="ie6hidden" src="" />

css3新增透明属性
语法 ：background:rgba(value,value,value,value);
说明：前三个值是RGB的颜色值，最后一个是透明的数值。

---

五、滚动条设置

5.1 语法 
	overflow内容溢出时的设置属性
	overflow 水平及垂直方向内容溢出时的设置
	overflow-x 水平方向内容溢出时的设置
	overflow-y 垂直方向内容溢出时的设置
	以上三个属性设置的属性值：visible、scroll、hidden、auto
5.2 说明
	visible 默认值，其中的内容无论是否超出范围都将被显示
	hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏
	scroll 无论内容是否超越范围，都将显示滚动条
	auto 当内容超出范围时，显示滚动条，否则不显示
5.3 举例应用
	没有水平滚动条:<div style="overflow-x:hidden">test</div>
	没有垂直滚动条：<div style="overflow-y:hidden">test</div>
	没有滚动条：<div style="overflow-x:hidden;overflow-y:hidden"></div>
				或者<div style="overflow:hidden">test</div>
	自动显示滚动条：<div style="height:100px;width:100px;overflow:auto;">test</div>