整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
