爱站程序员基地(一：把元素拿起来)
position:;定位属性
作用：设置或者是检索元素得定位方式
(二：确定参照物)
1：position:static; [静态定位] position属性得默认值。
2：position:absolute; [绝对定位]参照物：已经添加定位的父元素。特点:a：如果父元素都没有定位，或者是没有父元素 参照物是整个文档。b: 脱离文档流，不再占据空间。3：position:relative; [相对定位]参照物：相对于自身默认的位置为参照物特点：a: 不会脱离文档流，占据空间。b: 一般给绝对定位提供参照物的。4:position:fixed; [固定定位]参照物：浏览器窗口特点：a:脱离文档流，不占据空间5:position:sticky [黏性定位]原理：position:relative; 和 position:fixed；结合体当添加黏性定位的元素，没有超出浏览器窗口的时候，执行的是position:relative; 当元素超出浏览器窗口执行的是position:fixed;
(三：固定坐标)
left属性
right属性
top属性
bottom属性值
transition属性 （过渡）
属性值：
参与过渡的属性（默认的为all）
时间（过渡的时间 s ms）
延迟时间 s ms
运动的类型 linear(匀速)
注：transition必须通过事件触发，如 :hover运动类型：贝塞尔曲线CSS/ 3s cubic-bezier(.33,1.84,.47,-0.88);}.box:hover{background:blue;width:1000px;}
rgba 让背景色、文本颜色…透明
opacity属性：( IE浏览器低版本不能识别 )属性值： 0 - 1 数值 0.5半透明兼容IE写法：fliter:alpha(opacity=100);.box{width:400px;height:300px;background:orange;font-size:40px;opacity:0.3}
让一个元素在浏览器窗口左右上下居中的方法：
1：position:fixed;left:50%;top:50%;margin:-高度一半 0 0 -宽度一半2：position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;例 *{margin:0;padding:0;}img{display:block;}.box{width:300px;height:200px;background:pink;/* position:fixed 固定定位 *//* position:fixed;left:50%;top:50%; *//* 用margin让元素往左走自身宽度一半、往上走高度一半 *//* margin:-100px 0 0 -150px; */position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
锚点：超链接的一种
<标签 id=\"id名称\"></标签><a href=\"#id名称\"></a>在一个页面内容实现不同位置的跳转。例 <head><style>span{font-size:30px;font-weight:bold;color:red;}p{font-size:26px;}</style></head><body><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容<span id=\"back\">你快回来</span>内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><p>内容内容内容内容内容内容内容内容内容内容</p><a href=\"#back\">返回顶部</a></body>
锚点实现楼层跳转
<style>*{margin:0;padding:0;}div{width:100%;height:802px;text-align: center;line-height:802px;font-size:80px;color:#fff;font-weight:bold;}#box1{background:orange;}#box2{background:pink;}#box3{background:#d00;}#box4{background:#dd0;}#box5{background:#000;}p{width:40px;height:300px;position:fixed;left:0;bottom:100px;}p a{display:block;width:40px;height:40px;background:gray;text-align: center;line-height:40px;color:#fff;font-weight:bold;margin-bottom:10px;}</style></head><body><div id=\"box1\">div1</div><div id=\"box2\">div2</div><div id=\"box3\">div3</div><div id=\"box4\">div4</div><div id=\"box5\">div5</div><p><a href=\"#box1\">F1</a><a href=\"#box2\">F2</a><a href=\"#box3\">F3</a><a href=\"#box4\">F4</a><a href=\"#box5\">F5</a></p></body>
