CSS的三種定位方式介紹

阿新 • • 發佈：2018-12-21

在CSS中一共有N種定位方式，其中，static ,relative,absolute三種方式是最基本最常用的三種定位方式。他們的基

本介紹如下。

static預設定位方式relative相對定位，相對於原來的位置，但是原來的位置仍然保留absolute定位，相對於最近的非標準劉定位，原來的位置消失，被後邊的位置所頂替

下面先演示相對定位的案例

<!DOCTYPE html><html>  <head>    <title>relative.html</title>     <meta http-equiv="keywords" content 
="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <link rel="stylesheet" href="../css/relative.css" type="text/css"></link>  </head>    <body>    <div 
 class="style1">內容一</div>    <div id="special" class="style1">內容二</div>    <div class="style1">內容三</div>    <div class="style1">內容四</div>  </body></html>

CSS程式碼如下

.style1{ width: 300px; height: 100px; background-color: gray; border: 1px solid red; float: left; margin-left 
: 10px;}#special{ position: relative;/*這裡使用了相對定位,left意思是在原來的位置向左移動多少*/ left: 40px;/*左側座標變大，向右移動*/ top: 200px;}

其中的left是值擴大left的長度，也就是向右移動，當然了，是相對於這個模組的原來的位置。他的後面的元素不會頂

替他的位置，效果圖

然後是絕對定位。其中，HTML程式碼不變，至改變了CSS程式碼

.style1{ width: 300px; height: 100px; background-color: gray; border: 1px solid red; float: left; margin-left: 10px;}#special{ position: absolute;/*這裡使用了相對定位,left意思是在原來的位置向左移動多少*/ left: 40px;/*左側座標變大，向右移動*/ top: 200px;}

絕對定位這裡就是相對於body這個元素的絕對定位，當然了，當他的最近處有一個非標準流的東西，他就會跟那個非

標準流為標準進行配對。

效果如如下

CSS的三種定位方式介紹

在CSS中一共有N種定位方式，其中，static ,relative,absolute三種方式是最基本最常用的三種定位方式。他們的基本介紹如下。static預設定位方式relative相對定位，相對於原來的位置，但是原來的位置仍然保留absolute定位，相對於最近的非標準劉定

css三種引用方式

運行 PE meta text alt utf 直接 20px font 1 直接在標簽內添加 style屬性 1 <body> 2  3 <div style="color: red;fon

CSS三種引入方式

賦值 meta 引入 end del ron enc charset 規範 CSS三種引入方式一、三種方式的書寫規範 1、行間式 <div style="width: 100px; height: 100px; color: rgb(17, 119, 0);"&g

css三種書寫方式

1.嵌入樣式： < style> < /style> 當單個檔案需要特別樣式時，就可以使用巢狀樣式。通過在< head> 部分定義< style>標籤書寫巢狀樣式，在< style>標籤中可以使用標籤選擇器，類選擇器，id選

分散式鎖簡單三種實現方式介紹

版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/u010870518/article/details/79036337 很多小夥伴在學習Java的時候，總是感覺Java多執行緒在實際的業務中很少使用，以至於不會花太

JS----直接呼叫函式與call呼叫的區別 (函式的三種呼叫方式介紹)

直接呼叫直接呼叫函式是最常見最普通的方式,直接以函式附加的物件作為呼叫者, 在函式後括號內傳入引數來呼叫函式例如: window.alert("測試程式碼"); 其中呼叫者如果是window可以省略, 即直接alert("測試程式碼"); 以call() 方法

分散式鎖簡單入門以及三種實現方式介紹

分散式鎖應該具備哪些條件在分析分散式鎖的三種實現方式之前，先了解一下分散式鎖應該具備哪些條件： 1、在分散式系統環境下，一個方法在同一時間只能被一個機器的一個執行緒執行； 2、高可用的獲取鎖與釋放鎖； 3、高效能的獲取鎖與釋放鎖； 4、具備可重入特性； 5、具備鎖

Apache HTTP Server 與 Tomcat 的三種連線方式介紹

首先我們先介紹一下為什麼要讓 Apache 與 Tomcat 之間進行連線。事實上 Tomcat 本身已經提供了 HTTP 服務，該服務預設的埠是 8080，裝好 tomcat 後通過 8080 埠可以直接使用 Tomcat 所執行的應用程式，你也可以將該埠改為 80。

xml中三種解析方式介紹

1）dom: 文件物件模型(Document Object Model) 官方推薦的標準 dom原理:會把我們要解析的整個xml載入到到記憶體中.在記憶體中形成一個樹形結構優點:可以進行增刪改查缺點:由於把整個文件載入到記憶體中.所以會造成記憶體

iOS中三種定位方式

原理每個手機基站都有一個識別符號，iPhone或3G iPad可以蒐集周圍所有收到訊號的基站和它們的識別符號，通過聯網傳送到蘋果雲端伺服器，再由伺服器根據這些基站的的位置資訊查詢並計算出當前位置，然後返回給手機。因為基站訊號輻射範圍大，所以誤差也大，在500米 ~ 幾公里. 特點定位速度最

Android 的三種定位方式

　　Android 定位大致分為三大類：GPS定位；Network定位；AGPS定位。而Network又細分為WIFI定位和基站定位。下面詳細講解每種定位：　　Android GPS：需要GPS硬體支援，直接和衛星互動來獲取當前經緯度。　　優點：速度

css三種引入方式及格式

一：行內式（內聯樣式）其基本語法格式如下： <標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名如： <div style="color: red; font-size: 12px;"&g

Selenium練習四：百度搜索自動化指令碼（三種定位方式）

1. 實現百度搜索的自動化測試指令碼，需滿足要求如下： 1）瀏覽器至少選擇兩種（火狐+chrome/ie)，關鍵詞為“福哥雜記 CSDN”； 2）指令碼檔案命名為“{組名}_{姓名}_百度搜索_{瀏覽器}_{指令碼序號}.py” 3）搜尋框和“百度一下”元素的定位方式，至少

Server 與Tomcat的三種連線方式介紹

以上的 workers.properties 配置就是我們前面那個螢幕抓圖的頁面所用的配置。首先我們配置了兩個型別為 ajp13 的 worker 分別是 s1 和 s2，它們指向同一臺伺服器上執行在兩個不同埠 8109 和 8209 的 Tomcat 上。接下來我們配置了一個型別為 lb（也就是負載均衡的意

分布式鎖簡單入門以及三種實現方式介紹

資源容錯性例子 ogr 強一致性 https 說明 jvm內存映射前言很多小夥伴在學習Java的時候，總是感覺Java多線程在實際的業務中很少使用，以至於不會花太多的時間去學習，技術債不斷累積！等到了一定程度的時候對於與Java多線程相關的東西就很難理解，今天需要

前端 CSS 三種引入方式

html文檔 () http 前端類型 import 表現 mic pat CSS三種引入方式行內樣式內接樣式外部樣式鏈接式導入式行內樣式就是在標簽加上style屬性設置樣式 <!DOC

前端-CSS-介紹及三種引入方式

我們為什麼需要CSS? 使用css的目的就是讓網頁具有美觀一致的頁面，另外一個最重要的原因是內容與格式分離在沒有CSS之前，我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，當HTML內容非常多時，就會定義很多重複的樣式屬性，並且修改的時候需要逐個修改，費心費力。是時候做出改變了

CSS中三種定位介紹

在這段時間對CSS學習中到今天也終於能收個尾了，小編這篇會對CSS中的3種定位做一個詳細介紹 1.相對定位相對定位：相對於自己原來的位置進行移動。實際程式碼操作：對於標籤樣式先宣告 position:relative; 再描述移動方向與畫素大小 left帶正數向右移，以此

jenkins介紹部署及三種構建方式配置

構建簡單 nbsp adding linu tle ref pass 默認 [隱藏] 1前言 1.1jenkins介紹 1.2jenkins好處 1.3我的jenkins實踐 1.4jenkins使用前提 2jenkins部署 2.1下面內容介紹 2.2環境介紹

css樣式的三種引用方式

段落 html標簽改變樣式內聯 dom 瀏覽器 base ext css CSS的三種引用方式: 1.內聯樣式(行間樣式):直接在標簽內部通過使用style屬性添加CSS樣式　 <p style="color:red;font-size:12px;">這是一

CSS的三種定位方式介紹

相關推薦