CSS中的三種基本的定位機制（普通流、定位、浮動）
一、普通流
普通流中元素框的位置由元素在XHTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平佈置。
普通流就是html文件中的元素如塊級元素、行內元素依據他們的顯示屬性按照在文件中的先後次序依次顯示。是塊級元素就佔一行或多行，是行內元素就和其他元素共處一行，沒什麼好說的，該咋顯示咋顯示，一個蘿蔔一個坑。
二、定位
１、相對定位 (position:relative)
被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。例如：
設定元素 top:20px； left:20px; 那麼框將出現在距原本元素頂部左側各20px的地方。
對藍框進行定位後，它仍佔據原先的位置。２、絕對定位 (position:absolute)
絕對定位的元素位置是相對於距離它最近的那個已定位的祖先(相對/絕對)元素決定的。
如果元素沒有已定位的祖先元素， 那麼它的位置相對於初始包含塊。絕對定位的元素可以在它的包含塊向上、下、左、右移動。
與相對定位相反，
絕對定位使元素與文件流無關， 因此不佔據空間。 普通文件流中其他的元素的佈局不受絕對定位元素的影響。參見下圖：
對藍框定位後， 它下面的元素上移佔據了藍框原本的位置， 彷彿藍框不存在一般。
由於絕對定位的元素脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設定Ｚ-Iindex屬性來控制這些框的堆放次序。絕對定位在大多數現代瀏覽器中實現得很好， 但是在IE5.5與IE6中有一個bug。 如果要設定絕對定位元素的right或bottom, 那麼需要確保它的"最近的相對定位的祖先元素"已經設定了尺寸。 如果沒有， 那麼IE會錯誤的相對於初始包含快（畫布）定位這個元素。 簡單的解決辦法 就是給相對定位的元素設定尺寸。 或者儘量使用 top/left定位。
３、固定定位 (position:fixed)
相對於瀏覽器視窗，其餘的特點類似於絕對定位。
三、浮動
浮動的元素可以在左右移動，直到它的外邊框邊緣碰到包含塊或另一個浮動元素的邊緣。浮動的元素離普通流。如果包含塊太窄，無法容納水平排列的浮動元素，那麼其他浮動元素
行內元素會圍繞著浮動框排列。
相關推薦
CSS中的三種基本的定位機制（普通流、定位、浮動）
一、普通流 普通流中元素框的位置由元素在XHTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平佈置。 普通流就是html文件中的元
CSS中三種定位介紹
在這段時間對CSS學習中到今天也終於能收個尾了，小編這篇會對CSS中的3種定位做一個詳細介紹 1.相對定位 相對定位：相對於自己原來的位置進行移動。 實際程式碼操作：對於標籤樣式先宣告 position:relative; 再描述移動方向與畫素大小 left帶正數向右移，以此
java中三種基本語句及四道例題
一、if-else語句 if (關係/邏輯/算術表示式) { 當條件成立時所要執行的函式功能 } else { 當if後的條件不成立時所要執行的函式體 } 二、switch語句 switch(引數) { case 表示式1(即有可能輸入的引數): 所要執行的函式體;
03、html基礎學習筆記三---CSS中三種選擇器
CSS中三種選擇器：標籤選擇器、類選擇器、ID選擇器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <
PYTHON中三種取整函式（// int round）的區別
>>> 5//3 1 >>> -5//3 -2 >>> int(5.3) 5 >>> int(5.6) 5 >>> round(5.3) 5 >>> round(5.6
SparkML中三種特徵選擇演算法（VectorSlicer/RFormula/ChiSqSelector）
在SparkML中關於特徵的演算法可分為Extractors（特徵提取）、Transformers（特徵轉換）、Selectors（特徵選擇）三部分： 上一章理解了基於SparkML的文字特徵提取（Feature Extractors）
射頻電路中三種基本接收機結構
眾所周知，射頻電路按功能主要可以分為三部分，發射機、接收機和本地振盪電路。對於接收機來說，主要有三種，超外差接收機(heterodyne receiver)、零中頻接收機(homodyne receiver)和近零中頻接收機，這三種接收機可以說各有優缺點，那麼在設計射頻接收機
學習筆記---css中偽元素與偽類（迷惑我的:after與:hover）
一直被偽類與偽元素所迷惑，以為是同一個屬性名稱，這兩天看css動畫，越來越多的看到諸如 a:hover:after，a.hover:after 的用法，越來越糊塗，索性翻翻定義研究研究。 本文出現的偽類偽元素均為css2、css1中內容。css3中偽類、偽元素還未做
SpringBoot 三種方式配置 Druid（包括純配置文件配置）
tor clu 分享 mys dep imp 沒有 context 密碼 記錄一下在項目中用純 YML（application.yml 或者 application.properties）文件、Java 代碼配置 Bean 和註解三種方式配置 Alibaba Druid 用
視覺化格式模型（二） 定位概述（普通流、絕對定位）
2、定位概念 上一節熟悉了盒模型， 現在來看一下視覺化格式模型和定位模型。 理解這兩個模型的細微差異是非常重要的， 因為它們一起控制著如何在頁面上佈置每個元素 2.1 視覺化格式模型 CSS有三種基本的定位機制：普通流、 浮動、絕對定位。 除非專門指定， 否則所有框都在普通流中定位。 在普通流中元
CSS的三種定位機制。絕對定位是相對誰？設定百分屬性時是相對誰？
直入主題： CSS定位的三種機制： 一.普通流： position: static 元素框正常生成，預設設定。 position: relative 元素相對於它本來的位置，注意：移動後，在原來的位置會佔用一個相同大小的空間。 二.絕對定位： position
Css三種基本的佈局模型包含層模型的三種定位
在網頁中，元素有三種佈局模型：流動模型（Flow）、浮動模型(Float)、層模型(Layer)。 流動模型 流動模型是預設的網頁佈局模式。 具有兩個典型特徵：1、塊級元素都會在所處的包
CSS格式與布局中三種位置的理解與應用
tom ora col 使用 其它 wid abs 方式 出現 第一種位置關系：position:fixed 鎖定位置（相對於整個瀏覽器的位置），常用在各大網站的右下角或其它位置的小廣告。 如果需要調整鎖定位置，需要使用如下方式：<div style="widt
一、Unity中Shader的三種基本類型
ron 光照 llb 代碼 com unity3d ogr 不同 部分 一、固定功能著色器（Fixed Function Shader） 固定功能著色器為固定功能渲染管線的具體表現。功能較簡單兼容比較老的機器 二、表面著色器 存在於Unity3D中由U3D發揚光大的一
Android中三種常用解析XML的方式（DOM、SAX、PULL）簡介及區別
字符串 lan win name屬性 Coding 空間 toc log fin XML在各種開發中都廣泛應用，Android也不例外。作為承載數據的一個重要角色，如何讀寫XML成為Android開發中一項重要的技能。今天就由我向大家介紹一下在Android平臺下幾種常見的
css三種基本選著器
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css選著器分類</title> <style> /*使用選擇器給div設定樣式*/ .bigbox{
C++中類的三種繼承方式public（公有繼承）、protected（保護繼承）、private（私有繼承）之間的差別（附思維導圖）【轉】
（轉自：https://blog.csdn.net/coco56/article/details/80467975） 注：若不指明繼承方式，則預設是私有繼承。 一：對於公有繼承（public)方式： 基類的public和protected成員的訪問屬性在派生類中保持不變，但基類的p
iOS中Runtime的幾種基本用法記錄（必看）
Runtime顧名思義執行時，就是系統在執行的時候的一些機制，最主要的是訊息機制。下面這篇文章主要給大家介紹了關於iOS中Runtime的幾種基本用法，文中通過示例程式碼介紹的非常詳細，需要的朋友下面隨著小編來一起學習學習吧 Runtime 介紹 這不是一遍介紹關於Runtime實現
SparkSQL中的三種Join及其實現（broadcast join、shuffle hash join和sort merge join）
1.小表對大表（broadcast join） 將小表的資料分發到每個節點上，供大表使用。executor儲存小表的全部資料，一定程度上犧牲了空間，換取shuffle操作大量的耗時，這在SparkSQL中稱作Broadcast Join Broadcast Jo
建立物件（二）——三種基本模式的組合使用
一、建構函式模式和原型模式的組合使用 建立自定義型別的最常用方式 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.fr