HTML&CSS-盒模型運用居中方式合集

来源:https://www.cnblogs.com/566adsasdw55/archive/2022/09/28/16737206.html
-Advertisement-
Play Games

方法:定位,外邊距,內邊距,層級,邊框; 一個元素; 兩個元素; 三個元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e ...


方法:定位,外邊距,內邊距,層級,邊框; 一個元素; 兩個元素; 三個元素. <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <link rel="stylesheet" href="index.css"> </head> <body>   <div class="father1">     <div class="son1"></div>   </div> 方法1
  <div class="father2">     <div class="son2"></div>   </div> 方法2
  <div class="father3">     <div class="son3"></div>   </div> 方法3
  <div class="father4">     <div class="son4"></div>   </div> 方法4
  <div class="father5">     <div class="son5"></div>   </div>   <!-- 前五種為兩個元素的居中方式 --> 方法5
  <div class="six"></div> 方法6
  <div class="seven"></div>   <!-- 後兩種為1個元素的居中方式 --> 方法7
  <div class="father8">     <div class="box1"></div>     <div class="box2"></div>   </div> </div>   </div>   <!-- 最後一種為3個元素的居中方式 --> 方法8 </body> </html>   * {   margin: 0;   padding: 0;   list-style: none; } 清除瀏覽器預設樣式
.father1 {   width: 400px;   height: 400px;   background-color: #fc4;   position: relative; }
.son1 {   width: 200px;   height: 200px;   background-color: #f44;   position: absolute;   top: 100px;   left: 100px; } /* 第一種居中方式 */ 定位
.father2 {   width: 200px;   height: 200px;   background-color: #f77;   position: relative; }
.son2 {   width: 100px;   height: 100px;   background-color: #ff7;   position: absolute;   left: 50%;   top: 50%;   margin-left: -50px;   margin-top: -50px; } /* 第二種居中方式 */ 定位+外邊距+百分比
.father3 {   width: 200px;   height: 200px;   background-color: #0f0;   position: relative;   /* overflow: hidden; */   /* 解決margin塌陷問題 */ }
.son3 {   width: 100px;   height: 100px;   background-color: #77f;   position: absolute;   margin-left: 50px;   margin-top: 50px; } /* 第三種居中方式 */ 定位+外邊距
.father4 {   width: 100px;   height: 100px;   padding: 50px;   background-color: #f44; }
.son4 {   width: 100px;   height: 100px;   background-color: #0f7; } /* 第四種居中方式 */ 內邊距
.father5 {   width: 100px;   height: 100px;   border: 50px solid #f444;   background-color: #f444; }
.son5 {   width: 100px;   height: 100px;   background-color: #4fff; } /* 第五種居中方式 */ 邊框
.six {   width: 200px;   height: 200px;   background-color: #f9f67f;   border: 100px solid #08c; } /* 第六種居中方式 */ 一個元素 邊框
.seven {   width: 0px;   height: 0px;   padding: 100px;   background-color: #f78;   border: 50px solid #99f4; } /* 第七種居中方式 */ 一個元素 邊框+內邊距
.box1 {   width: 200px;   height: 200px;   background-color: #f075;   position: absolute;   z-index: 1; }
.box2 {   width: 100px;   height: 100px;   background-color: #ff99;   position: absolute;   z-index: 2;   top: 50px;   left: 50px; }
.father8 {   position: relative; } /* 第八種居中方式 */ 3個元素 定位+層級
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我的Vue之旅。使用 Vue 3.1 + TypeScript + Router + Tailwind.css 構建手機底部導航欄、仿B站的登錄、註冊頁面。 ...
  • 一、使用原生js實現拖拽 點擊打開視頻講解更加詳細 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position ...
  • 所有對象都有隱式原型; 原型也是對象,也有隱式原型. function User() {}console.log(User.prototype); function User() {}var u = new User();console.log(u.hasOwnProperty); Object.p ...
  • 在純靜態網站里,有時候會動態更新某個區域往會選擇 Pjax(swup、barba.js)去處理,他們都是使用 ajax 和 pushState 通過真正的永久鏈接,頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理,有些人可能會全量選擇載入,這樣會導致加 ...
  • 1 ES Module 規範 ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式:按需導出 和 預設導出。 按需導出是使用 export 關鍵字,將需要導出的成員 ...
  • HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript?"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢?在js早期,網景公司創造出了<script>元素,用來講JavaScript插入到HTML中。 <scrip ...
  • 一、開發優化一 1.使用Vant Weapp 1.1 什麼是Vant Weapp Vant Weapp官網鏈接 Vant Weapp是有贊前端團隊開源的一套小程式UI組件庫,助力開發者快速搭建小程式應用。它所使用的是MIT開源許可協議,對商業使用比較友好。 1.2 安裝Vant Weapp組件庫 安 ...
  • 什麼是JavaScript? 前言 本文內容為 博主閱讀“紅寶書”之後的總結和個人理解,有什麼錯誤歡迎指正! 一句話概括語言的誕生 1995年,網景公司一位名叫Brendan Eich的工程師,開發了一個叫Mocha的腳本語言。後來改名叫 JavaScript,以便蹭當時大火的Java的熱度。 到底 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...