css佈局模型有哪些? css三種版面模型的介紹
本篇文章帶給大家的內容是關於css佈局模型有哪些? css三種版面模型的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
流動模型(flow)
預設的網頁佈局模式
* 塊狀元素都會在所處的包含元素內自上而下依序垂直延伸分佈
* 內聯元素都會在所處的包含元素內從左到右水平分佈顯示
浮動模型(float)
任何元素在預設情況下是不能浮動的,但可以用CSS 定義為浮動
两个 div 元素一行 div{ width:200px; height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div>
设置两个元素 右浮动 实现一行 float:right; div{ width:200px; height:200px; border:2px red solid; float:right; }
设置两个元素一左一右 div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}
層模型(layer)
層模型三種形式:
- 絕對定位(position: absolute)
- 相對定位(position: relative)
- 固定定位(position: fixed)
層佈局模型就像是影像軟體PhotoShop中非常流行的圖層編輯功能一樣,每個圖層能夠精確定位操作
1. 絕對定位
position:absolute (表示絕對定位),這條語句的作用將元素從文件流中拖出來,然後使用left、right、top、 bottom屬性相對於其最接近的一個具有定位屬性的父包含區塊進行絕對定位。如果不存在這樣的包含區塊,則相對於body元素,即相對於瀏覽器視窗。
实现div元素相对于浏览器窗口向右移动100px,向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div>
2. 相對定位
position:relative(表示相對定位),它透過left 、right、top、bottom屬性決定元素在正常文件流中的偏移位置。相對定位完成的過程是先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性決定,偏移前的位置保留不動。
相对于以前位置向下移动50px,向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>
3. 固定定位
fixed:表示固定定位,與absolute定位類型類似,但它的相對移動的座標是視圖(螢幕內的網頁視窗)本身。由於視圖本身是固定的,它不會隨瀏覽器視窗的捲軸滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置,不會受文件流影響,這與background-attachment:fixed;屬性功能相同。
相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。 #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....
4.Relative與Absolute組合使用
相對於其它元素進行定位
1、参照定位的元素必须是相对定位元素的前辈元素: <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>box1是box2的父元素
2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; }
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; }
相關推薦:
CSS佈局 聖杯佈局 & 雙飛翼佈局_html/css_WEB-ITnose
##css div 佈局(1)- css div實作table佈局_html/css_WEB-ITnose
以上是css佈局模型有哪些? css三種版面模型的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

基於無阻塞、事件驅動建立的Node服務,具有記憶體消耗低的優點,非常適合處理海量的網路請求。在海量請求的前提下,就需要考慮「記憶體控制」的相關問題了。 1. V8的垃圾回收機制與記憶體限制 Js由垃圾回收機

在當今前端開發中,Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展,單元測試變得越來越重要。今天,我們將探討如何在 Vue.js 3 中編寫單元測試,並提供一些最佳實踐和常見的問題及解決方案。

文件模組是對底層文件操作的封裝,例如文件讀寫/打開關閉/刪除添加等等文件模組最大的特點就是所有的方法都提供的**同步**和**異步**兩個版本,具有sync 字尾的方法都是同步方法,沒有的都是異

跨域是開發中常會遇到的場景,也是面試中常會討論的問題。掌握常見的跨域解決方案及其背後的原理,不僅可以提高我們的開發效率,還能在面試中表現的更加

PHP與Vue:完美搭檔的前端開發利器在當今網路快速發展的時代,前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高,前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術,搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合,以及詳細的程式碼範例,幫助讀者更好地理解和應用這兩

一開始的時候 JS 只在瀏覽器端運行,對於 Unicode 編碼的字串容易處理,但對於二進位和非 Unicode 編碼的字串處理困難。並且二進制是電腦最底層的資料格式,視訊/音訊/程式/網路包

Django是一個由Python編寫的web應用框架,它強調快速開發和乾淨方法。儘管Django是web框架,但要回答Django是前端還是後端這個問題,需要深入理解前後端的概念。前端是指使用者直接和互動的介面,後端是指伺服器端的程序,他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下,前後端程式可以獨立開發,分別實現業務邏輯和互動效果,資料的交

隨著網路技術的發展,前端開發變得日益重要。尤其是行動端設備的普及,更需要高效率、穩定、安全又易於維護的前端開發技術。而作為一門快速發展的程式語言,Go語言已經被越來越多的開發者所使用。那麼,使用Go語言進行前端開發行得通嗎?接下來,本文將為你詳細說明如何使用Go語言進行前端開發。先來看看為什麼要使用Go語言進行前端開發。很多人認為Go語言是一門
