整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS定位机制
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。
相对定位
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
只要box2设置了position为relative ，box1和box3始终不会因为box2的改变而改变。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: relative;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body></html>
2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。
<!DOCTYPE html><html lang="en">
<head><meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
详细的可以参考：http://www.w3school.com.cn/css/css_positioning_floating.asp
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
当设置box2的position为absolute时，它就会脱离文档，相当于不存在。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body></html>
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
html5 地理定位
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的
注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确
Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置
下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML="该浏览器不支持获取地理位置."}
}
function showPosition(position){
x.innerHTML="纬度:"+position.coords.latitude+
"<br>经度:"+position.coords.longitude;}
实例解析:
●检测是否支持地理定位
●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息
●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
●showPosition()函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理
你需要先熟悉JavaScript才能理解和使用API
如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:
●coords.latitude:十进制数的纬度
●coords.longtitude:十进制的经度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米计
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,从正北开始以度计
●coords.speed:速度,以米/每秒计
●timestamp:响应的日期/时间
二 html5 拖放
拖放(Drag和drop)是html5标准的组成部分
拖放是一种常见的特性,即抓取对象以后拖到另一个位置
在html5中,拖放是标准的一部分,任何元素都能够拖放
★设置元素为可拖放
首先,为了使元素可拖动,需要把draggable属性设置为true:
<img draggable="true">
★拖动什么-ondragstart和setData()
然后,规定当元素拖动时,会发生什么
dataTransfer.setData()方法,设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")
★放到何处-ondragover
ondragover时间规定在何处放置被拖动的数据
默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止元素的默认处理方式.
这要通过调用ondragover时间的event.preventDefault()方法:
event.preventDefault()
★进行放置-ondrop
当放置被拖数据时,会发生drop事件
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸缩矢量图形(Scalable Vector Graphics)
●SVG用于定义用于网络的基于矢量的图形
●SVG使用XML格式定义图形
●SVG图像在放大或改变尺寸的情况下其图形质量不会损失
●SVG是万维联盟的标准
在html5中,你能够直接将SVG元素嵌入html页面中
要使用SVG绘制图形,你首先需要创建一个<svg>标签
<svg width="1000" height="1000"></svg>
要创建一个圆形,需要添加一个<circle>标签
下面是SVG代码:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>
●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)
●r属性定义圆的半径
运行效果如下:
篇文章我们主要给大家说一下css的定位。css的定位是我们以后网页制作中比较常用的属性，也是很重要的知识点。了解各个定位的作用以及层级关系对以后的页面布局至关重要。
css定位主要有四种，静态定位、相对定位、绝对定位和固定定位。其中静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。我们这里主要介绍后边的这三个定位。
如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。比如我们想要让一个div元素相对当前位置左移100px，上移100px。
代码以及页面显示效果就如下所示：（div向左和向上偏移了100px）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
我们做个例子来看一下，我们这里写两个div，内部都有2个span元素，span元素我们都使用绝对定位，并设置left和top为50px，第一个div我们设置相对定位，第二div不设置定位。
由上图我们可以看出，div1使用了相对定位，所以div1内部的span使用绝对定位是相对于div1来定位元素位置的，而div2没有定位，所以div2内部的span使用绝对定位是相对于浏览器body元素来定位元素位置。
如果想为元素设置层模型中的固定定位，需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。比如我们准备一长串的文字，让文字超出一屏的宽度，设置浮动元素div1的left和top为100px，拖动浏览器的滚动条，浮动元素div1的位置不会发生变化。
具体代码和展示效果如下图所示：
对于css的三种定位方式今天就先介绍到这里，大家在平时可以自己多加练习练习，要能熟练使用定位将元素放到自己想要放的位置，以及想一下都可以运用到哪些地方。
每日金句：凡事不要说“我不会”或“不可能”，因为你根本还没有去做！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
